盒模型
box:盒子，每个元素在平面中都会生成一个举行区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行，块盒独占一行。 不应该叫行级元素，块级元素，因为显示是css决定的。所以应该叫行盒或者块盒。
display的默认值是inline
浏览器默认样式表设置的块盒：容器元素，h1 ~h6，p
常见的行盒：span, a ,img ,video, audio
盒子的组成部分
无论是行盒，还是块盒，都有下面几个部分组成，从内到外分别是:
-
内容 content width, height 设置的盒子的内容的宽高 内容部分通常叫做整个盒子的 **内容盒 content-box **
-
填充 padding 盒子边框到盒子内容的距离 padding-left, padding-right,padding-top,padding-bottom
padding:简写属性
padding：上右下左
padding: 简写属性
padding: 上 右 下 左
填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style 边框宽度：border-width 边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
