排列

通过CSS内外边距组合可实现等高布局，核心是利用大padding-bottom拉伸列高，配合负margin抵消溢出，并用overflow:hidden隐藏超出部分，使多列视觉等高；结合box-sizing:border-box可精确控制尺寸，避免布局错位。该方法适用于兼容老浏览器的场景，如IE8+的…

grid-auto-flow 控制网格项自动排列方式，其取值 row 按行填充，column 按列填充，dense 可填补空隙；常与 grid-template-columns 和 minmax() 配合实现响应式布局，适用于卡片、垂直时间线等场景，但 dense 可能影响阅读顺序，需谨慎使用。 在…

flex-direction决定主轴方向，order控制子项顺序，二者配合可实现响应式布局。如通过改变flex-direction切换行列，结合order调整视觉顺序，使内容在不同设备上灵活排列，提升用户体验。 在CSS中，flex-direction 和 order 可以配合使用来灵活控制弹性盒子…

清除浮动常用clearfix或BFC，Flex布局则无需浮动；现代推荐使用Flex，兼容旧场景时可条件切换并注意父容器处理。 在传统 CSS 布局中，浮动（float）常用于实现多列布局或文本环绕图片等效果，但浮动元素会脱离文档流，导致父容器高度塌陷。因此需要“清除浮动”。而现代布局更多使用 Fle…

默认情况下padding增加盒子高度，使用box-sizing: content-box时，padding会额外增加总高度；2. 设置box-sizing: border-box后，padding包含在设定高度内，内容区域压缩以保持总高度不变；3. 建议全局设置box-sizing: border-…

盒模型中元素总宽度包含width、padding、border和margin，float使元素脱离文档流并按设置方向排列，但会受总宽度影响导致换行；margin增加外边距却加剧宽度溢出风险，尤其在float+百分比布局中。使用box-sizing: border-box可让width包含内边距和边框…

正确使用transform属性和transform-origin是实现CSS旋转缩放动画的关键。需根据视觉需求调整transform-origin以避免位移偏移，如设置为0 0或100% 100%；尽管transform函数执行顺序不影响最终效果，建议按scale→rotate→translate提…

页面整体用Grid布局划分区域，局部如头部、页脚用Flex对齐内容；2. 卡片容器用Grid实现响应式排列，内部用Flex调整元素对齐；3. 表单字段用Grid设置多列结构，按钮组用Flex处理水平排列与对齐；4. 导航栏主菜单用Flex实现等分或居中，整体嵌入Grid与其他元素构成二维布局，下拉项…

邮政总局的包裹区一片狼藉。 需要装载到货车上的包裹已按任意重量顺序排成一排。 邮政总站管理员希望按照包裹重量的升序对它们进行分类，但有一个例外。 他希望将最重（也可能是最有价值）的包裹放在离他办公室最近的地方。 问题描述邮政总局的包裹区一片狼藉。 需要装载到货车上的包裹已按任意重量顺序排成一排。 邮…

Flex容器与absolute元素可共存，但absolute元素脱离文档流，不参与flex布局，其定位依赖最近的已定位祖先（如position: relative的容器），常用于覆盖层或精确定位，需注意父容器设置相对定位以建立包含块。 在使用 CSS 时，Flex 容器和 绝对定位元素（absolu…