什么是盒模型？

什么是盒模型？
盒模型是规定了网页元素如何显示，元素间的相互关系。
盒模型的组成为分为以下几个部分：
content（内容区）：元素的宽和高；
border（边框区）：盒子的边缘；
padding（填充区）：为了使页面布局看起来美观大方，盒子里的内容区会用padding来解决父元素和子元素的位置关系；
margin（外边界区）：控制同辈元素之间的位置关系。

如上图所示，padding和margin的作用都是用来改变元素的位置，使页面看起来舒适，它们的特点鲜明。
padding的特点：
1.使用padding来控制位置时，要知道它的值会把元素原有的值撑大，若内容区设置了宽高，想要让元素的大小不变，则要在元素的宽高上减去后加的padding值。
2.padding属性对背景图片是不起作用的。
3.背景色会延展到padding区域。
注：可以通过3这一特点，给元素添加背景色，观察padding撑大了哪里。
margin的特点：
1.margin增加元素所占区域，但不会影响元素的实际宽高。
注：margin可以写负值，padding不可以。
2.上下两个元素之间的margin值会重叠显示，谁的值大，显示谁。
3.当父元素里的第一个子元素（块元素），添加margin-top时，会错误地把margin-top添加给父元素。（建立在当前元素没有添加边框和浮动的前提下）
解决方法：给父元素添加overflow:hidden;
给父元素和子元素添加浮动属性；
给父元素添加边框；
把margin改成padding。
盒模型的重点就在于控制元素的位置关系，标准盒模型的所占位置组成：content（宽高）+padding+border+margin
元素的宽度实际占有的位置大小：宽+左右padding+左右border+左右margin
元素的高度实际占有的位置大小：高+上下padding+上下border+上下margin
注：如果设置了宽高，加上padding值一定要减去padding值，举个栗子

↑ 初始样子

↑ 给黄色部分加了padding:5px;上下左右都加了5像素，接下来给宽高分别减去5*2像素，就还原到上面的图片了。

↑ 给绿色部分添加了margin:5px;只改变位置关系

↑ div下面的文本也好标签p也好，都是它的子元素，div是它们的父元素。