CSS学习随笔

1. 必考：两种盒模型分别说一下。
   IE盒模型border-box和W3C盒模型content-box。区别在于IE的content部分把 border 和 padding计算了进去。box-sizing:border-box; border-box更好用，我平时更喜欢。

2. 必考：如何垂直居中？
   如果父元素height不定，直接子元素padding:10px 0;就垂直居中了
   如果父元素给定height：
   ·table标签自带。
   ·子元素用两个span包起来，子元素和span display:inline-block,vertical-align: middle;，
   span height:100%。
   ·子元素position:absolute;top: 50%;margin-top: -50px;或者用translate(-50%,-50%);
   ·子元素position:absolute;left:0;top:0;margin: auto;
   ·父元素display: flex; justify-content: center;align-items: center;

3. 必考：flex 怎么用，常用属性有哪些？
   ·flex-direction: row左起 | row-reverse右起 | column上起 | column-reverse下起;
   ·flex:无单位值（flex-grow），无单位值（flex-shrink），有效宽度值（flex-basis）后两个
   值可选 flex:auto（0,1,auto）,flex:none（0,0auto）,flex:initial（1,1auto）

4. 必考：BFC 是什么？
   块格式化上下文，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
   会创建BFC：

   1. 浮动元素（元素的 float 不是 none）
   2. 绝对定位元素（元素的 position 为 absolute 或 fixed）
   3. 行内块元素
   4. overflow 值不为 visible 的块元素
   5. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

5. CSS 选择器优先级
   1. 越具体优先级越高
   2. 同样优先级写在后面的覆盖写在前面的
   3. !important 优先级最高，但是要少用

6. 清除浮动说一下

    .clearfix:after{
        content: '';
        display: block; /*或者 table*/
        clear: both;
    }
    .clearfix{
        zoom: 1; /* IE 兼容*/
    }