今天小编要给大家讲的盒模型是面试中经常遇到的问题之一，童靴们要好好理解一下。

CSS盒模型概念

CSS 盒模型 也叫框模型 (Box Model) ，包含了元素内容（content）、内边距（padding，也叫填充）、边框（border）、外边距（margin）几个属性。

橘色content是元素的内容，绿色padding是元素的内填充，黑线border是元素的边框线，蓝色margin是元素的外边距。

我们在开发过程中经常会用到浏览器的调试工具，也能清楚的看到盒模型。按下F12打开调试界面，

注意：我们设置的元素背景是应用在内容，填充和边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{

margin:0;

padding:0;

}

计算一个元素实际的宽高，

宽度=width+padding+border；

高度 =height+padding+border；

举个栗子，下面的一个div元素：

给它设置宽度50px，高度50px，内边距5px,边框线为1px黑色，外边距10px:

在浏览器中查看：

浏览器中显示的元素

F12打开调试界面,按左边的箭头，鼠标移到元素可以看到他的宽高，如下图元素下边的黑色区域62x62分别是元素的宽度和高度。

那么他是怎么计算的呢，我们可以点击元素看一下它的盒模型：

宽度=50px(width)+5px(左填充)+5px（右填充）+1px(左边框线)+1px(右边框线)

高度=50px(height)+5px(上填充)+5px（下填充）+1px(上边框线)+1px(下边框线)

童靴们会疑惑，为啥margin没有计算进去呢？小编告诉大家，margin是一个元素和它相邻元素之间的距离。如果宽度或者高度加上margin则是元素的总占用宽度或者高度。所以margin不计算在元素的实际宽度或者高度中。

童靴们明白了吗，不理解的话一定把文章多看几遍。下篇文章，我们详细的给大家讲解盒模型有关的样式。

爱学习的孩子运气都不会差哦~

关注小白前端，持续收到文章推送！