盒子的分类
不同元素产生不同的盒子类型可能不同，一个元素产生什么样的盒子取决于css的display属性
- 属性：display
- 是否能继承：否
- 默认值：inline
盒子的组成
- margin：外边距（与其他的盒子的距离）
- border：边距
- padding：内边距（边框与内容之间的距离）
- cotent：内容（内容的宽度与高度）
margin
表示边框和相邻盒子的距离分为上（top）右（right）下（bottom）左（left）四个方向
>
> div{
> margin-top : 10px ;
> }
margin-top 上外边距 / 不可继承 / 默认值：0px
- margin有1个数值：上下左右
- margin有2个数值：上下 / 左右
- margin有3个数值：上 / 左右 / 下
- margin有4个数值：上 / 右 / 左 / 下
border 边框
分割内部和外部的界限，上（top）右（right）下（bottom）左（left）。
- 上边框的样式
> border-top-style
> 不可继承 ；默认none
> solid 实线 / dashed 虚线 / dotted 点阵 / double 双实线
- 上边框的厚度
> border-top-width
> 默认值 medium / 一般用px ；em
- 上边框的颜色
> border-top-color
缩写 ：border-top (厚度 样式 颜色)
padding
表示边框和内容盒子的距离分为上（top）右（right）下（bottom）左（left）四个方向
>
> div{
> padding-top : 10px ;
> }
padding-top 上外边距 / 不可继承 / 默认值：0px
- padding有1个数值：上下左右
- padding有2个数值：上下 / 左右
- padding有3个数值：上 / 左右 / 下
- padding有4个数值：上 / 右 / 左 / 下
content
width
height
子盒子
边框盒 border-box 由border，padding，content 组成
1. 浏览器调试时，页面中显示的页面尺寸
2. 元素的背景，默认覆盖边框盒（元素的背景色，从边框盒开始渲染）
3. background-clip 设置背景色的渲染区域
填充盒子 由padding ，content 组成
1. 溢出overflow 指填充盒的溢出
内容盒子 由content组成
outline 不占像素，但无样式。