flex_新疆栾骏商贸有限公司

overflow:hidden通过触发BFC使父容器正确包裹浮动或溢出内容，而非单纯隐藏；适用于浮动未清除、负margin、内容过长等场景，但会裁剪超出区域的内容。

flexbox居中需父容器设display:flex、justify-content:center和align-items:center，并有明确高度；子元素不能脱离flex流；grid居中用plac...

CSSGrid可高效构建后台页面布局：通过grid-template-areas划分header、nav、main、footer区域，配合响应式媒体查询适配移动端，辅以gap、min-height等技...

justify-content控制主轴对齐，align-items控制交叉轴对齐；主轴方向由flex-direction决定，二者作用方向随之动态切换。

浮动元素会自动变为块级元素，无论原display值如何；浏览器将其内部计算为display:block，导致inline、inline-block、flex等特性失效，现代布局应优先使用flex或gr...

flex-basis是flex项目在主轴方向的初始大小，仅对flex容器生效，可被flex-grow/shrink调整；而width/height是通用尺寸属性，在flex布局中不直接作为主轴基准，除...

min-height无效通常因盒模型或布局限制导致，需检查display类型、父容器塌陷、Flex对齐覆盖、CSS优先级及是否脱离文档流。

使用position:absolute易致表单控件脱离文档流而错位或消失；应为父容器设position:relative，慎用百分比定位，优先用transform微调、flex实现对齐，并正确建立堆叠...

兼容性最强的是float+margin方案，支持IE6；现代项目首选flex布局，IE10+支持；grid最简洁但仅限现代浏览器；absolute定位因脱离文档流、维护难、可访问性差而不推荐。

gap已取代grid-gap，是row-gap和column-gap的简写，支持单值（统一行列间距）和双值（分别设行、列间距），且在现代Grid和多行Flex中均适用，语法更简洁、语义更清晰。