6.1 盒子模型基础
每个元素对应生成一个盒子。display: none的元素不生成盒子。
术语说明。本篇大多场景使用“盒子”替代“元素”术语，因为每个元素对应生成一个盒子，页面显示是基于盒子进行显示。后续经常混用元素与盒子这两个概念：元素侧重于元素结构的表达，例如“两个span元素都是最末级元素，html元素是最顶层元素”；盒子侧重于渲染（显示）的表达，例如“这两个span盒子的宽度与高度在渲染显示时根据字体属性计算”。
6.1.1 盒子的基本组成
盒子由4部分组成：内容区content、内边距padding、边框border、外边距margin。
（1）内容区content包括宽度width、高度height。
（2）padding表示内边距，即内容区与边框的空白间距。
（3）border表示边框，可设置宽度、线条的类型、线条颜色。
（4）marging表示外边距，即边框与外部元素的空白间距，用于实现元素之间的外部间距。
padding、border、margin都分4个方向：上top、右right、下bottom、左left。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 0;
}
div {
width: 220px;
height: 30px;
padding: 20px;
border: 5px solid #0aaa76;
margin: 10px;
}
</style>
</head>
<body>
<div>小步教程 xiaobuteach.com</div>
</body>
</html>
padding 设置4个方向的内边距都是20px；border 设置4个方向的边框：宽度5px、线型是实线、绿色；margin 设置4个方向的外边距都是10px。padding与margin只需指定1个大小值，因为它表示距离；border除了距离还要表示框线的类型与颜色，所以有3个值。
运行效果
6.1.2 开发者工具调试盒子模型
盒子模型的调试包括三种类型：查看盒子模型、查看盒子的页面显示、查看属性的页面显示。
类型1：计算样式面板直接查看盒子模型的各原子属性值。
其中有14个值，与代码设置值一致。
类型2：查看盒子的页面显示。元素面板将鼠标悬停在元素上，各区域标记不同颜色，宽度270（px）。
270px包含content（内容宽度）、padding与border，但不包含margin值，高度同理。
220+(20+5)*2=270
类型3：查看属性的页面显示。样式面板将鼠标悬停在CSS属性上，页面只标记该区域。
页面只标记padding区域。
6.1.3 盒子模型的4个宽度
宽度包括4个宽度：内容宽度、含内边距宽度、含边框宽度（同时也包含内边距）、含外边距的总宽度（同时也包含内边距与边框）。通过内容宽度计算各宽度的公式。
含内边距宽度=内容宽度 + padding-left + padding-right
含边框宽度=内容宽度 + padding-left + padding-right + border-left + border-right
总宽度=内容宽度 + padding-left + padding-right + border-left + border-right + margin-left + margin-right
上述示例各宽度计算。内容宽度220px，因为标签p默认box-sizing值border-box，指width值表示内容宽度；含内边距宽度220+20*2=260px；含边框宽度220+（20+5）*2=270px；总宽度220+（20+5+10）*2=290px。
盒子总高度同理。
总高度=内容高度 + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
6.1.4 显示缩放设置与尺寸工具测量
Windows查看与调整分放率与缩放比例的方法：桌面—显示设置—缩放与布局。
当前显示器很多使用高清屏。如果使用最大分辨率会导致字体非常小，具体设置如上述“设置1”所示，显示器分辨率1920*1080，缩放比例100%，即没有缩放；所以通常结合字体缩放将字体放大来同时保证显示的清晰度与文本大小，具体设置如上述“设置2”所示，显示器分辨率1920*1080，缩放比例150%，进行缩放；如果进行缩放存在另一个问题，导致使用尺寸测量工具（如QQ截图工具）测量宽度也会相应缩放，与设置值不相等。
QQ快捷键Ctrl+Alt+A调出截图工具，选中区域时，会显示区域的宽高，下图为测量尺寸。
这里选取包含border区域的宽度，测量值是405px，开发者工具显示值是270px。因为显示设置缩放1.5倍，270*1.5=405px。所以存在工具测量宽度与设置值不相等。
建议。如果开发者经常使用尺寸测量工具，为保证测试值与设置值相等，建议采用稍低分辨率与不缩放的方式，具体设置如上述“设置3”所示，显示器分辨率1366*768，缩放比例100%，不缩放，主要保证字体大小、测试与编码尺寸一致，可能会牺牲一定清晰度。
