HTML5 布局需正确应用盒子模型：标准盒模型中 width/height 仅含内容，border-box 使宽高包含 padding 和 border；flexbox 实现一维弹性布局；grid 构建二维网格；margin 折叠需注意。
如果您在 HTML5 中尝试构建页面布局，但发现元素位置错乱或尺寸不符合预期，则可能是由于对盒子模型的理解和应用存在偏差。以下是使用 HTML5 盒子模型进行布局的多种实战方法：
一、使用标准盒模型设置宽高
标准盒模型下，元素的 width 和 height 仅指内容区域尺寸，padding 和 border 会额外增加元素总尺寸。需通过 CSS 明确声明 box-sizing 以确保行为可控。
1、在 CSS 中为需要精确控制尺寸的容器添加box-sizing: content-box（默认值）。
2、为该容器设置 width: 300px 与padding: 20px。
立即学习 “ 前端免费学习笔记（深入）”；
3、此时元素实际占用宽度为300px + 20px × 2 + border 宽度 × 2。
二、启用 border-box 盒模型统一计算
border-box 模式使 width 和 height 包含 content、padding 与 border，更符合直观布局需求，是现代布局的常用基础设定。
1、在全局重置样式中添加* {box-sizing: border-box;}。
2、为一个 div 设置width: 100%; padding: 16px; border: 1px solid #ccc;。
3、该 div 将严格占据父容器全部宽度，内边距与边框不再导致溢出。
三、利用 flexbox 实现弹性盒子布局
Flexbox 提供一维布局能力，可自动分配空间、对齐子项并响应容器尺寸变化，无需浮动或定位即可完成常见布局结构。
1、将父容器的 display 属性设为flex。
2、设置 flex-direction: row 实现水平 排列 ，或column 实现垂直排列。
3、对子元素使用 flex: 1 使其等分剩余空间，任意子项增减均不影响其他项比例关系。
四、采用 grid 布局 构建二维网格系统
CSS Grid 允许定义行、列轨道及区域，支持显式定位与隐式网格生成，适合复杂多区域页面结构。
1、为容器设置 display: grid 并定义列宽grid-template-columns: 1fr 2fr 1fr。
2、通过 grid-template-rows: auto 1fr auto 划分页眉、主体、页脚高度。
3、用 grid-area 为子元素指定区域名称，实现语义化且可复用的模块定位。
五、结合 margin 与 padding 控制盒间关系
外边距（margin）用于控制盒子之间的间距，内边距（padding）用于扩展内容与边框的距离，二者协同决定视觉留白与层级感知。
1、为相邻两个块级元素分别设置 margin-bottom: 24px 与margin-top: 24px。
2、观察到实际间距为24px 而非 48px，因垂直方向 margin 会发生折叠。
3、若需避免折叠，可对其中一个元素添加 overflow: hidden 或使用 padding 替代部分 margin。
