父元素高度塌陷源于子元素设display:flex后脱离文档流且父容器无明确高度；应设min-height（如100vh、400px或fit-content）或height，确保html/body有height:100%，并检查overflow、position及子项flex基础尺寸。

浮动元素的margin不叠加而并存，同向浮动元素间距取较大值；反向浮动易致换行混乱；父容器塌陷需BFC或清除浮动解决；推荐用flex/grid替代浮动。

设为border-box后width/height包含padding和border，避免嵌套时尺寸累加出错；默认content-box下宽高仅指内容区，实际占用为宽高+2内边距+2边框；全局用*{box-sizing:border-box;}最便捷。

图片左对齐可通过五种方法实现：一、父容器设text-align:left；二、图片设display:block且margin:0；三、图片设float:left；四、父容器用flex布局并justify-content:flex-start；五、父容器用grid布局并justify-content:start。

HTML5页面正文水平居中可通过五种CSS方法实现：一、margin:0auto配固定宽度；二、text-align:center配inline-block；三、Flexbox的justify-content:center；四、Grid的place-items:center；五、绝对定位加transform平移。

搜索框水平居中可通过六种方法实现：一、父容器text-align:center配合input为inline-block；二、flex布局设justify-content:center；三、margin:0auto配合display:block和固定宽度；四、grid布局用place-items:center；五、绝对定...

HTML5布局需正确应用盒子模型：标准盒模型中width/height仅含内容，border-box使宽高包含padding和border；flexbox实现一维弹性布局；grid构建二维网格；margin折叠需注意。

新手学CSS应先掌握布局和文本两大核心：布局聚焦盒子模型（display、width/height、margin/padding、position、flex）、文本侧重可读性控制（color、font-family、font-size/line-height、text-align等），配合实用技巧与动手实践。

HTML盒子水平垂直居中需依定位方式与兼容性选方案：一、绝对定位+transform（IE9+）；二、Flexbox（IE11+）；三、Grid（IE10+）；四、绝对定位+margin（仅固定尺寸，IE6+）；五、table-cell（IE8+）。

HTML5盒子模型由内容区、内边距、边框和外边距构成，width/height默认仅指内容尺寸；可通过box-sizing:border-box切换为包含内边距和边框的计算方式；display属性控制盒子类型（block/inline/inline-block/flex/grid），Flexbox实现一维弹性布局，Gr...

HTML5标题居中可通过五种CSS方法实现：一、text-align:center；二、margin:0auto配合宽度；三、Flexbox的justify-content:center；四、Grid的place-items:center；五、绝对定位加transform偏移。

HTML5表格默认左对齐，需用CSS实现居中：一、margin:0auto+display:block；二、父容器text-align:center+表格display:inline-block；三、Flexbox的justify-content/align-items:center；四、Grid的place-item...