CSS盒子模型攻略

一、盒子模型的分类

1.标准盒子模型

2.怪异盒子模型

3.弹性盒子模型

二、标准盒子模型的组成（content-box）

1. Margin(外边距) - 清除边框外的区域，外边距是透明的

   div{
     margin-top:100px;
     margin-bottom:100px;
     margin-right:50px;
     margin-left:50px;
   }
   

   取值：auto（左右居中） 或者   数值

   div{
       margin:100px auto;
   }
   

   margin:25px 50px 75px 100px; // 顺序：上 右 下 左
   margin:25px 50px 75px; // 顺序：上 (左右) 下
   margin:25px 50px; // 顺序：上下 左右
   margin:25px; // 顺序：所有方向
   

   margin需要注意的问题

   外边距合并问题

   垂直方向上外边距相撞时，取较大值

2. Border(边框) - 围绕在内边距和内容外的边框

   1.border-style	solid（实线）   double（双实线）  dashed（虚线） dotted（电线）
   2.border-width	p{border-width:5px;}
   3.border-color	p{border-color:red;}