前言
在前端开发中，CSS的使用是前端开发的“三驾马车”之一，剩余的其他两个是JS和HTML。有关CSS使用设置页面布局的时候，重中之重的就是关于盒模型的理解以及使用，而且CSS是比较抽象的，没有JS那样有很强的逻辑性，需要掌握的内容比较多、比较散，所以就算是入行开发多年的前端工程师也会觉得CSS不好驾驭。本篇博文就来分享一下关于CSS盒模型相关的知识点，方便查阅使用，如有不妥之处还请大家指正。
盒模型概念
关于盒模型的概念，比较专业的官方解释是这样说的：所有HTML元素都可看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型实质上是一个盒子，封装周围的HTML元素，其中包括：margin（外边距）、border（边框）、padding（内边距/填充）和content（实际内容）等四要素。
* margin（外边距） —— 清除边框区域。Margin没有背景颜色，是完全透明的。
* border（边框） —— 边框周围的填充和内容。边框会受到盒子的背景颜色影响的。
* padding（内边距/填充） —— 清除内容周围的区域。同样会受到框中填充的背景颜色影响。
* content（实际内容） —— 盒子的实际内容，用来显示文本和图像等内容。注意：在盒模型中，外边距可以设置为负值，而且在很多情况下都会使用负值的外边距操作。
具体的盒模型如下所示：
根据上图可以看到，margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子对应的这三个模块，而content则是HTML元素的内容模块。
盒模型成分组成（常用的）
1、margin
margin-top：上边距 margin-buttom：下边距 margin-left：左边距 margin-right：右边距 也可以直接使用简写属性margin同时设置四条边距的宽度。
2、padding
padding-top：上填充 padding-bottom：下填充 padding-left：左填充 padding-right：右填充 也可以直接使用简写属性padding同时设置四条边距的宽度，与margin的类似。
3、border
border-top：上边界 border-bottom：下边界 border-left：左边界 border-right：右边界
如果border属性的色值不明确指定时，如border: 1px solid，这时边框的颜色和当前元素的字体颜色color一致。
border-width：边界宽度 border-style：边界样式 border-color：边界颜色
盒模型种类
盒模型分为：标准的W3C盒模型 、怪异的IE盒模型。二者的区别：标准的W3C盒模型总宽度= content，怪异的IE盒模型总宽度=content+padding。
当box-sizing：content-box时，这种盒模型为标准的W3C盒模型，当box-sizing: border-box时，这种盒子模型为怪异的IE盒模型。
盒模型使用
盒模型使用的时候，当指定一个CSS元素的宽度和高度属性时，只是设置了内容区域的宽度和高度。但是，完整大小的元素，还必须要添加内边距、边框和外边距。
示例
1、设置一个div的总宽度为250px:
div {
background-color: light;
width: 250px;
border: 50px solid red;
padding: 20px;
margin: 20px;
}2、在一个只有200px的空间里面，设置总宽度为200px的div：
div{
width:170px;
padding:10px;
border:5px solid yellow;
margin:0px;
}·最终元素的总宽度计算公式如下所示：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
·元素的总高度最终计算公式如下所示：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
盒模型兼容性
IE8及以上版本支持该属性，Firefox火狐浏览器需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。
最后
通过上面介绍的关于CSS盒模型的相关知识点，盒模型原理以及使用通过本文内容就可涵盖，在Vue.js开发中的使用就游刃有余了，这也是在开发过程中必用的功能，尤其是对于初中级开发者来说，更应该掌握这些情况的使用，这里不再赘述。以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
