什么是盒模型？

盒模型概念：
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。用来控制元素和元素之间，或者元素和内容之间的位置关系。

盒模型的组成：
内容区（content）+填充区（padding）+边框区（border）+margin（外边界区）。

1、内容区（content）：
①内容区指的是盒子里面放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区内的。

②可以通过元素的宽（width）和高（height）两个属性来设置内容区的大小。

③（width）和（height）属性只适用于块元素。

2、填充区（padding）：
①填充区又叫内边距指的是盒子和内容区之间的空白区，补白或者叫内填充。

②用来控制父元素和子元素之间的位置关系，也用来控制元素和内容之间的位置关系。

③添加了padding值之后，padding值会把元素原有的大小撑大，想要让原本大小不变的话，需要在原来的宽高上减去所加的padding值大小。

④padding：5px 10px； 表示上下的padding为5px，左右的padding为10px。
padding：5px 10px 15px； 表示上的padding为5px，左右的padding为10px，下的padding为15px。
padding：5px 10px 15px 20px；表示上的padding为5px，右的padding为10px，下的padding为15px，左的padding为20px。

⑤css中padding-top、padding-right、padding-left、padding-bottom分别用来指定四个方向的内边距。

3、边框区（border）
①边框区指的是盒子的边缘或者叫边缘厚度。

②可以使用border属性来设置盒子的边框。

③border：1px solid #000；分别表示边框的宽度、线型、颜色。

④使用border-top、border-bottom、border-left、border-right分别来指定上下左右四个边框的方向。

⑤border-none 没有边框
border-dotted 点线
border-dashed 虚线
border-solid 实线
border-double 双线

4、margin（外边界区）：
①外边界区指的是显示在盒子以外的空白区，也就是元素边框与周围元素相距的空间。

②使用margin-top、margin-bottom、margin-left、margin-right分别来设定元素上下左右四个方向。

③实现元素水平居中的方法：margin：0 auto；margin-left：auto；margin-right：auto；。

④margin是可以写负值得，padding是不可以写负值的。

⑤margin的bug：1）上下的两个元素之间的margin值会重叠显示，谁的值大就以谁的margin值来显示 。（BFC解决）
2）当父元素里的第一个子元素（块元素）添加margin-top的时候会错误的把margin-top值添加给父元素。（建立在当前的元素没有添加边框和浮动的前提下。）

 解决方法：BFC 1) 给父元素添加overflow：hidden；（推荐使用）  
               2）给父元素和子元素添加浮动属性。
               3）可以给父元素添加边框。
               4）把margin改成padding。