绝对定位

多列布局通过column-count和column-width将文本自动分栏，提升长文本可读性；配合column-gap、column-rule设置间距与分隔线，column-span实现元素跨列；其核心是内容流动，不同于Flexbox的一维排列和Grid的二维布局；响应式中结合媒体查询调整列数，避…

模态框由遮罩层和弹窗组成，通过CSS的flex布局实现居中，使用display控制显隐；2. 遮罩层覆盖全屏并置于底层，弹窗通过z-index浮于上方；3. JavaScript可触发显示或关闭，支持点击遮罩、按钮或ESC键关闭；4. 可添加过渡动画、背景滚动禁用等优化提升体验。 实现一个简易模态框…

margin collapse 是指相邻块级元素的垂直外边距合并为较大者，影响多行文本间距。多行文本常由多个块级元素（如 p 标签）构成，这些元素间的 margin 会合并，导致段落间实际间距小于预期。例如，默认上下 margin 均为 1em 的段落，相邻时仅产生 1em 间距。此外，首段与容器顶…

CSS盒模型是网页布局的核心，包含内容、内边距、边框和外边距四部分；默认content-box模式下宽度仅指内容区域，而border-box模式下宽度包含内边距和边框，推荐全局设置box-sizing: border-box以简化布局计算；此外，垂直外边距可能发生折叠，可通过Flexbox、Grid…

CSS定位核心是五种模式：static为默认流内定位；relative相对自身偏移且保留原空间，常作absolute参照；absolute脱离文档流，相对于最近非static祖先定位；fixed相对于视口固定，滚动不变；sticky在阈值内如relative，达到后如fixed。应用场景包括布局微调…

绝对定位元素仍遵循CSS盒模型，其尺寸由内容、内边距、边框和外边距决定，定位时相对于最近的已定位祖先或视口，通过top、right、bottom、left与margin协同控制位置，结合box-sizing可精准布局。 当使用绝对定位的元素时，它仍然遵循CSS盒模型的基本规则，但其布局行为会因为定位…

CSS transition 实现卡片翻转的核心是结合 transform 与 transition 属性，通过设置 perspective、backface-visibility 和 transform-style 构建 3D 翻转效果，利用 transition 控制旋转过渡的时长与节奏，使正面…

Flexbox是移动端布局的理想选择，因其提供灵活的容器与项目模型，支持响应式设计，通过flex-direction、flex-wrap等属性轻松实现元素排列、换行与对齐，适配不同屏幕尺寸；其语义化强、代码简洁，可高效处理导航栏、卡片布局、表单对齐等场景，结合gap、order和移动优先策略提升开发…

margin: auto 可实现块级元素水平居中，需设置固定宽度且仅对块级元素有效；行内元素应使用 text-align: center；垂直居中需结合绝对定位才能生效；现代布局推荐使用 Flexbox 实现更灵活的居中效果。 在CSS中，使用 margin: auto 是实现元素居中的常用方法之一…

z-index的生效需基于非static定位，且受层叠上下文限制，父元素创建上下文后子元素层级在其内独立计算，合理分层与调试可精准控制堆叠顺序。 在CSS布局中，z-index 是控制元素堆叠顺序的关键属性。但它的行为受定位（position）和层叠上下文的影响，理解这些机制才能准确控制元素层级。 …