HTML5的盒子模型是页面元素布局的核心规则，每个HTML元素都可以看作是一个矩形盒子，这个盒子由内容区、内边距、边框、外边距四个部分组成，不同的盒子模型类型会影响元素最终占据的页面空间大小，掌握其使用方法是前端开发的基础能力。
HTML5盒子模型的两种类型
标准盒子模型
标准盒子模型是浏览器默认的盒子模型，元素的width和height属性仅设置内容区的宽度和高度，元素最终占据的总宽度需要加上左右内边距、左右边框、左右外边距，总高度同理计算。
计算规则如下：
- 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
IE盒子模型（怪异盒子模型）
IE盒子模型下，元素的width和height属性设置的是内容区、内边距、边框的总和，元素最终占据的总宽度和高度只需要加上对应的外边距即可。
计算规则如下：
- 总宽度 = width + margin-left + margin-right
- 总高度 = height + margin-top + margin-bottom
可以通过box-sizing属性切换盒子模型类型，content-box对应标准盒子模型，border-box对应IE盒子模型。
/* 设置为标准盒子模型，默认值 */
.box-standard {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}
/* 设置为IE盒子模型 */
.box-border {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}
HTML5盒子模型的实际应用技巧
统一设置盒子模型避免尺寸计算混乱
实际开发中，为了避免不同元素之间盒子模型类型不一致导致的尺寸计算问题，通常会全局设置所有元素使用IE盒子模型，这样可以让width和height的设置更符合直观预期，减少尺寸调试的时间。
/* 全局重置盒子模型为IE盒子模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
用内边距实现内容区域留白
当需要让元素内容和元素边框之间产生间距时，可以使用padding属性，比如按钮内部文字和按钮边框的间距，就可以用内边距实现，不需要额外添加嵌套元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>按钮内边距示例</title>
<style>
.btn {
box-sizing: border-box;
width: 120px;
height: 40px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
/* 上下内边距10px，左右内边距20px，让文字居中且有留白 */
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">点击按钮</button>
</body>
</html>
用外边距实现元素之间的间距
当需要在多个同级元素之间产生间距时，可以使用margin属性，比如横向排列的卡片之间的间距，就可以给每个卡片设置右侧或底部外边距实现。
.card-container {
display: flex;
flex-wrap: wrap;
}
.card {
box-sizing: border-box;
width: 300px;
height: 200px;
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
/* 每个卡片右侧和底部留20px间距 */
margin-right: 20px;
margin-bottom: 20px;
}
利用外边距实现块级元素水平居中
对于宽度固定的块级元素，可以设置margin-left和margin-right为auto，实现元素在父容器中的水平居中，这是常用的居中技巧之一。
.center-box {
box-sizing: border-box;
width: 800px;
height: 300px;
background-color: #f5f5f5;
/* 左右外边距自动，实现水平居中 */
margin: 0 auto;
padding: 20px;
}
边框结合盒子模型实现特殊样式效果
可以利用边框的样式和盒子模型的尺寸计算，实现一些特殊的效果，比如用边框制作三角形，或者给元素添加内边框效果。
/* 用边框制作向下的三角形 */
.triangle {
width: 0;
height: 0;
/* 上边框设置颜色，其他边框透明 */
border-top: 10px solid #333;
border-right: 10px solid transparent;
border-bottom: 0 solid transparent;
border-left: 10px solid transparent;
}
/* 内边框效果，不增加元素总尺寸 */
.inner-border {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: #fff;
/* 用内边距和边框模拟内边框 */
padding: 5px;
border: 5px solid #1890ff;
}
盒子模型使用的注意事项
首先是外边距重叠问题，当两个垂直排列的块级元素，上面的元素设置下外边距，下面的元素设置上外边距时，两者的间距会取较大的那个值，而不是两个值的和，这是外边距重叠现象，可以通过触发元素的BFC（块级格式化上下文）来避免这个问题。
其次是行内元素的盒子模型特性，行内元素的上下外边距和上下内边距不会影响行高，也不会改变元素垂直方向的位置，如果要设置行内元素的垂直间距，建议将其设置为行内块元素display: inline-block或者块级元素。
最后是box-sizing属性的继承问题，box-sizing属性本身不会继承，但是可以通过全局设置让所有元素都应用统一的盒子模型类型，避免后续开发中出现尺寸计算不一致的问题。