什么是盒模型
盒模型（Box Model） 是网页布局的核心概念，每个 HTML 元素在页面中都被视为一个矩形盒子，由以下四部分组成：
1. 盒模型的组成部分
内容区域（Content）
-
显示元素的文本、图像等内容。
-
通过
width和height属性设置大小。
内边距（Padding）
-
内容与边框之间的透明区域。
-
通过
padding属性设置，可分别控制四个方向（上、右、下、左）。
边框（Border）
-
围绕内容和内边距的可见线条。
-
通过
border属性设置样式、宽度和颜色。
外边距（Margin）
-
盒子与其他元素之间的透明间距。
-
通过
margin属性设置，相邻元素的外边距可能合并（Margin Collapsing）。
2. 盒模型的两种模式
通过 box-sizing 属性控制盒模型的尺寸计算方式：
(1) 标准盒模型（content-box，默认）
- 特点：
width和height仅定义内容区域的大小。
总宽度 =width+padding+border+margin
总高度 =height+padding+border+margin
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
box-sizing: content-box; /* 默认值 */
}
-
内容宽度 = 200px
-
总宽度 = 200 + 10_2 + 5_2 + 20*2 = 270px
(2) 边框盒模型（border-box）
- 特点：
width和height包含内容、内边距和边框的尺寸。
总宽度 =width+margin
总高度 =height+margin
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
box-sizing: border-box;
}
-
内容宽度 = 200 - 10_2 - 5_2 = 170px
-
总宽度 = 200 + 20*2 = 240px
3. 外边距合并（Margin Collapsing）
- 现象：相邻垂直方向的外边距会合并为较大的那个值。
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
-
实际间距 =
max(30px, 20px)= 30px -
触发条件：
-
块级元素在垂直方向相邻。
-
没有边框、内边距或内容隔开。
-
4. 兼容性与实践建议
-
IE 怪异模式：旧版 IE 默认使用类似
border-box的盒模型，可通过<!DOCTYPE html>声明触发标准模式。 -
最佳实践：
- 全局设置
box-sizing: border-box以简化布局：
- 全局设置
* {
box-sizing: border-box;
}
- 使用 CSS Reset 或 Normalize.css 统一不同浏览器的默认样式。
总结
-
盒模型是网页布局的基石，由内容、内边距、边框和外边距组成。
-
box-sizing控制尺寸计算方式，推荐使用border-box简化开发。 -
外边距合并需特别注意，合理利用可优化布局间距。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
