块级元素、行内块元素居中；塌陷处理；清除浮动

1.外边距margin应用

• 块级元素的居中

  • 水平居中条件：盒子必须指定了宽度（width），盒子左右的外边距都设置为auto

  • 常见写法：

    • margin-left:auto;margin-right:auto;

    • margin:auto;

    • margin:0 auto;(常用)（意为上下0，左右auto）

• 行内元素或行内块元素的居中

  • 给其父元素添加text-align:center即可

• 嵌套块元素外边距合并导致的塌陷

  • 定义：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

  • 三个解决方案：

    • 为父元素定义上边框（透明的） border:1px solid transparent;

    • 为父元素定义上内边距 padding：1px;

    • 为父元素添加overflow:hidden;（常用）

2.清除浮动

• 本质：清除浮动元素脱离标准流造成的影响。（如果父盒子本身有高度就不需要清除浮动）清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流

• 三个方法：

  1. 给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll。常用overflow:hidden;（缺点：无法显示溢出部分）

  2. 给父级元素添加after伪元素。

     .clearfix:after{
         content:"";
         display:block;
         height:0;
         clear:both;
         visibility:hidden;
     }
     .clearfix{
         /*IE6、7专有*/
         *zoom:1;
     }

  3. 给父元素添加双伪元素

     .clearfix:before,
     .clearfix:after{
         content:"";
         display:table;
     }
     .clearfix:after{
        clear:both;
     }
     .clearfix{
         *zoom:1;
     }