CSS盒子模型

盒子塌陷：解决方案，父元素浮动     

盒子模型:在网页中一个模块就是一个盒子模型(大大小小的有无数个)
组成:content(具体的内容)+padding(内填充)+border(边框)+margin(外边距)
盒子模型中唯一一个可以设置负值的属性是margin，为负值时反方向运动
 margin值得设置方式:
方式1:实际开发酌情使用
            margin-top:上外边距
            margin-right:右外边距
            margin-bottom:下外边距
            margin-left:左外边距
方式2:实际开发推荐使用
            margin:10px(上) 20px(右) 30px(下) 40px(左);
            margin:20px(上) 30px(左右) 40px(下);
            margin:30px(上下) 40px(左右);
            margin:40px(上下左右);
            margin:0 600px 0 0;
总结：
   当float:left时，改变margin-left的值时，盒子自己本身移动(往右运动)
                    改变margin-right的值时，盒子相邻的元素移动
    当float:right时，改变margin-right的值时，盒子自己本身移动(往左运动)
                    改变margin-left的值时，盒子相邻的元素移动
    无论左浮动还是右浮动，margin-top都是作用于自己本身，margin-bottom都i是作用于下面相邻的元素
盒子边框（border） 
- 语法：border : border-width || border-style || border-color 
| 属性         |          作用          |
| border-width | 定义边框粗细，单位是px |
| border-style |       边框的样式       |
| border-color |        边框颜色        |
- 边框的样式：
  - none：没有边框即忽略所有边框的宽度（默认值）
  - solid：边框为单实线(最为常用的)
  - dashed：边框为虚线  
  - dotted：边框为点线
  - double：双线
块级盒子水平居中可以让一个块级盒子实现水平居中必须：
  - 盒子必须指定了宽度（width）
  - 然后就给**左右的外边距都设置为auto**，
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
常见的写法，以下下三种都可以。
* margin-left: auto;   margin-right: auto;
* margin: auto;  * margin: 0 auto;