CSS学习随笔

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

必考：如何垂直居中？
如果父元素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;

必考：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）

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

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

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

清除浮动说一下

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