CSS必知必会

一、实现垂直居中

父元素的高度不写：子元素只需设置padding：10px 0（或任意想要的数值）就能垂直居中。

父元素有高度：

1. table自带垂直居中属性
2. div用display：table，里面div用display：table-cell（就是变成td）和vertical-align:middle
3. margin-top: -50%
4. translate(-50%)
5. position:absolute; margin:auto
6. flex

二、选择器优先级/权重如何确定

1. 选择器越具体，其优先级更高
2. 相同优先级，出现在后面的，覆盖前面的
3. 属性后面加!important的优先级最高，少用（水涨船高）

三、清除浮动

1. .clearfix

.clearfix:after{
    content:';
    display:block;
    clear:both;
}

2. 给父元素加上overflow：hidden（或任意一个触发BFC的方法）

四、两种盒模型的区别

1. 概念： 一、content-box，即width指定的是内容区域宽度，而不是实际宽度，公式为

实际宽度 = width + padding + border

二、border-box, 即width指定的是左右两侧外边框（border）之间的距离，公式为

实际宽度 = width

2. 相同点：都是用来指定宽度的
3. 不同点：border-box更好用

五、BFC是什么

1. 概念：BFC（Block Formatting Contexts）是块级格式化上下文。
2. 实现方法：

   • 浮动元素（float）

   • 绝对定位元素（元素的position为absolute或fixed）

   • 行内块inline-block元素

   • overflow值不为visible的块元素

   • 弹性元素（display为flex或inline-flex的直接子元素）