盒子居中的方法

1. 使用margin

2. 利用CSS的position属性，父盒子设置position:relative,要居中的盒子设置margin-left:-xxpx;margin-top:-xpx;position:absolute;top:50%;left:50%

3. 还是使用定位的思想：position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

4. 利用CSS3的新增属性table-cell、vertical-align:middle

   div1{
     width: 100px;
     height: 100px;
     background: #ccc;
     display: table-cell;
     vertical-align: middle;
   }
   div2{
     margin: auto;
   }
   

5. 利用flexbox布局

   div1{
     display: flex;
     justify-content: center;
     aligin-items: center;
   }
   

6. 利用transform

   div1{
     width: 100px;
     height: 100px;
     position: relative;
   }
   div2{
     position: absolute;
     left: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
   }
   

盒模型

盒模型的组成：又里向外content、padding、border、margin

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width值的是content部分的宽度。

box-sizing: content-box;    // /*w3c盒子模型*/
box-sizing: border-box; // /*IE盒子模型*/

清楚浮动的集中方式

1. 方式一：利用overflow创建BFC

   给父盒子添加overflow:hiddle

2. 方式二：额外标签法

   在浮动的盒子之下在放一个标签，在这个标签中使用clear:both来清楚浮动对页面的影响。

3. 方式三：after伪元素

   /*定义给父级别*/ 
   .clearfix::after{
      display:block;
      clear:both;
      content:"";
      visibility:hidden;
      height:0
   }
   .clearfix{*zoom:1}   /*IE*/
   

4. 方式四：双伪元素

   /*定义给父级别*/ 
   .clearfix::after,.clearfix::before{
      content:"";
      display:table;
   }
   .clearfix::after{
     clear:both;
   }
   .clearfloat{*zoom:1} /*IE*/