盒模型

#盒模型
每个元素在页面中都会生成一个盒子（矩形区域）
##盒子的类型
一、行盒
不独占一行，浏览器默认样式设置了display为inline，常见的行盒有：a、img、span、video、audio
二、块盒
独占一行，浏览器默认样式设置了display为block，常见的块盒有：div、h1~6、p、header、nav、section、footer等容器元素。
##盒子的组成部分

1.内容 content
一般我们设置的width、height就是设置的盒子宽度和高度，这是内容和区域，即conten-box
2.填充/内边框 padding，也就是盒子边框到盒子内容的距离；这个可以设置四个方向的距离，默认方向是上右下左；
填充去+内容=填充盒 padding-box
3.边框 border 边框可以设置边框样式（border-style）（实线、虚线等）、边框宽度（border-width）、边框颜色（border-color）
边框颜色如不设置，就和字体一样的颜色
边框+填充区+内容=边框盒 border-box
4.外边距 margin 也就是边框到其他盒子的距离 同样也可以分为四个方向，上右下左：margin-top、margin-right、margin-bottom、margin-left。
那么一个标准和模型，box-sizing，一个元素在网页中所占的位置如何计算呢？
实际的宽度=width+padding-left+padding-right+border-left+border-right；
实际的高度=height+padding-top+padding-bottom+border-top+border-bottom。
如果需要重新定制元素盒模型，那么它的计算模式为：
content-box：这个是默认值，内边距，边框会累加到元素的尺寸中；
borde-box：元素的尺寸会包含边框和内边距。