CSS基础

在前端开发中，设计师有时会给出 10px 甚至更小的字体设计。然而，Chrome 等浏览器为了保证中文的可读性，默认限制了最小字号为 12px。。本文将带你梳理解决这一限制的几种方案及其优缺点。

在 UI 布局中，为了保证页面的整洁，我们经常需要对超出容器范围的文本进行截断并显示省略号（...）。针对不同的布局需求和浏览器兼容性，通常有三种主要的实现方案。

如果说 Flex 布局是一维的“线性布局”，那么 Grid（网格布局） 就是真正意义上的“二维布局”。它能够同时处理行与列，让我们通过简单的代码就能实现极其复杂的页面结构。

相比传统的 transition（过渡），animation（动画）提供了更强大的控制能力。它不需要触发条件，可以自动播放，并且通过“关键帧”能够实现极其复杂的视觉效果。

在前端开发中，让页面“动起来”有两种常见方式：一种是自动运行的 Animation，另一种则是响应用户交互的 Transition。而 Transform 则是实现这些动效的“物理引擎”。

在前端开发中，有时我们需要一些非矩形的图形来增强页面的视觉效果，比如下拉菜单的小箭头、加载动画的扇形进度条。利用纯 CSS 绘制这些图形，不仅能减少图片请求，还能展示你对 CSS 底层渲染机制的理解

“如何实现居中？”是前端开发中最经典的问题，也是面试中的必考题。根据元素类型（行内/块级）和容器环境的不同，选择最优的居中方式至关重要。本文将为你总结所有主流的居中方法。

在 CSS 布局中，你是否遇到过“子元素浮动导致父元素高度消失”或者“两个盒子的垂直外边距莫名其妙重叠”？这些现象都指向了一个核心概念——BFC

在 Flex 和 Grid 统治现代前端之前，table 布局和 float 布局是网页排版的两大支柱。理解它们的特性，不仅能帮助我们维护老项目，更能深刻理解 CSS 的渲染机制和 BFC 概念

在 CSS 布局中，position 属性是控制元素“脱离常规”的关键。无论是想要悬浮的导航栏，还是精准重叠的图层，都离不开对定位属性的深入理解。

Flex 布局（Flexible Box）已成为现代前端开发的标配。它不仅解决了垂直居中的百年难题，还通过强大的动态伸缩能力适配各种屏幕。

在 CSS 的世界里，页面布局的本质就是控制元素在“流”中的位置。理解普通流、浮动、绝对定位与固定定位，是掌握复杂页面结构的钥匙。本文将带你理清它们的底层逻辑与相互影响。

在前端开发中，细节决定质感。如何让背景图只在内容区域显示？如何优雅地处理文字溢出？本文将带你深入探索 CSS 中关于 background 与 Text 的进阶属性，让你的页面更加精致。

在前端布局中，如何控制元素的显示、隐藏以及内容溢出，是每个开发者必须掌握的基本功。本文将梳理这三大属性的核心用法，并带你通过对比搞清楚它们的底层区别。

为什么我写的样式不生效？为什么那个单位在移动端会缩放？理解 CSS 的优先级（Specificity）和度量单位，是每一个前端开发者从“画页面”走向“精通布局”的必经之路。

在前端开发中，如何优雅地将 CSS 引入 HTML 决定了页面的加载性能与维护成本。本文将带你梳理 CSS 的四种引入方式，并重点解析面试常客：link 与 @import 到底有什么区别？

在 CSS 的世界里，单冒号 : 和双冒号 :: 并不是随心所欲使用的。它们分别代表了伪类和伪元素。理解它们的区别，不仅能帮你写出更优雅的选择器，还能在面试中展示扎实的基础。

在 H5 开发中，视频和音频的应用非常广泛。虽然市面上有很多优秀的第三方播放器插件（如 DPlayer、Video.js），但理解原生的媒体属性和事件，是实现自定义交互、埋点统计以及性能优化的核心基础

虽然现代前端框架（Vue/React）已经极大简化了表单处理，但理解原生 Form 表单 的事件流、控件属性和 API，依然是处理复杂业务逻辑（如埋点、自定义验证、无刷新提交）的基础。

在前端开发中，很多标签渲染出来的视觉效果是一样的。比如 <b> 和 <strong> 都是加粗，<i> 和 <em> 都是倾斜。那它们的具体区别是什么呢？本文将带你深度分析。