什么是盒子模型？
一个标签就是一个盒子，可以通过6大属性来设置这个盒子。 有margin，border,padding，widht，height，bg。标签分男标签和女标签。 对于男盒子来说，6大属性都有作用。对于女盒子来说，widht，height不起作用， padding 和 margin在水平方向上有作用，在垂直方向上没有作用。
水平方向占据的总宽度：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
垂直方向上占据的总高度：margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
从6大属性来介绍盒子模型
1.width 盒子内容宽度
使用时一般配合height。
2.height 盒子内容高度
- 对于块元素和行内块元素，表示内容区域。
- 对于行内元素，width和height无效。
3.padding 盒子的内边距（补白）
所表示的区域是边框到内容之间的那块空间。
盒子内容与盒子边框之间的距离，上下左右都有padding
四个方向分别是：
- padding-top
- padding-right
- padding-bottom
- padding-left
具体的写法：
- padding：一个值 四边相同
- padding：两个值 第一个值表示上下的，第二个值表示左右的
- padding：三个值 第一个值表示上的，第二个值表示左右的，第三个值表示下的
- padding：四个值 分别是上、右、下、左。
注意：对于块级元素，padding在垂直方向上影响占据空间的高度。
对于行内元素，padding在垂直方向上不影响占据空间的高度，水平方向上还是影响宽度。
4. margin 盒子的外边距
margin表示边界，外边距。当前元素和另一个元素之间的距离，在border之外的。
盒子边框之外的距离，也分上右下左
margin的设置和padding相似：
- margin：一个值，表示四个外边距都是一样的
- margin：两个值，第一个值表示上下的，第二个值表示左右的
- margin：三个值，第一个值表示上，第二个值表示表示左右的，第三个值表示下
- margin：四个值，分别对应上、右、下、左
注意：margin可以使用百分比，是相对于父元素的width值。有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等。对于行内元素，margin在垂直方向上无效。margin的auto设置。块状元素在垂直方向上有重叠现象。margin可以使用负值。
margin重叠（塌陷）：
2个前提：男标签（块级元素），垂直方向
兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先 解决重叠：
方法1：给男的变成不男不女的
方法2：浮动（浮动元素是不会塌陷的）
父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠 解决重叠：
方法1：给父元素设置border-top 不想要边框，使用transparent
方法2：给父元素设置padding-top
方法3：给男的变成不男不女的 ，margin可以设置负值：
5.border 盒子的边框
盒子的边框也是有上边框，右边框，下边框，左边框
实际上，我们描述一个border有三个方面：
1. 边框的粗细：border-width ： 一般使用具体的像素值，或者是使用粗细的英文，thin， thick，medium
2. 边框的样式：border-style
- solid，实线
- dotted，点画线
- dashed，虚线
- none 没有 ......
3. 边框的颜色：border-color 关于颜色的描述：颜色英文名，rgb函数，十六进制
注意:border在页面上也是占据空间的
案例： 利用border实现小三角
div{
width: 0;
/* border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent; */
/*简化： 两行代码实现一个小三角 */
border: 10px solid transparent;
border-top: 10px solid red;
}
6. background 盒子背景
背景默认情况下会填充内容和padding
background:
background-color:
background-image:
1，默认水平和垂直方向都会平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充border,padding,content background-repeat:
background-attachment
作用：定义背景图片是随元素滚动还是固定
background-position
作用：用来设置背景图片的位置。
格式：background-position :position-x position-y
background-repeat
作用：用来控制背景图片在元素中水平和垂直方向上是否重复
取值有如下四个：
- repeat，也是默认的值
- no-repeat，完全不重复，有且仅有一个
- repeat-x，水平方向上重复
- repeat-y，垂直方向上重复（向下为正）
