一.BFC是什么

块级格式化上下文

触发条件：

浮动元素(元素的float不是none)
绝对定位元素(元素的position为absolute或fixed)
行内块 inline block元素
overflow 值不为visible 的块元素
弹性元素 (display为 flex 或inline-flex元素的直接子元素)

解决了什么问题

清除浮动(为什么不用 .clearfix)
防止margin 合并

优点：无
缺点：有
解决缺点：使用 display：flow-root 来触发BFC就没有副作用

二.如何实现垂直居中

如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；如果 .parent 的 height 写死了，就很难把 .child 居中，以下是如何实现x垂直居中的方法。忠告：能不写 height 就千万别写 height。

table自带功能

<table class="parent">
  <tr>
    <td class="child">x</td>
  </tr>
</table>

100%的高度的after before 加上 inline block

<div class="parent">
    <div class="child">
      x
    </div>
</div>
css
.parent{
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent:after{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div 装成table

<div class="table">
    <div class="td">
        <div class="child">
          x
        </div>
    </div>
</div>
css
div.table{
  display: table;
  border: 1px solid red;
  height: 600px;
}

div.tr{
  display: table-row;
  border: 1px solid green;
}

div.td{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
  border: 10px solid black;
}

margin-top 50%

<div class="parent">
    <div class="child">
      x
    </div>
</div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}

translate -50%

<div class="parent">
    <div class="child">
      x
    </div>
</div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

absolute margin auto

<div class="parent">
    <div class="child">
      x
    </div>
</div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

flex

<div class="parent">
    <div class="child">
      x
    </div>
</div>
.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}

三.CSS选择器优先级如何确定

选择器优先级

!important
内联样式
选择器设置样式
浏览器默认样式
来自继承的样式

如果优先级完全相同，后面的覆盖前面的

标签a 浏览器默认颜色为蓝色

优先级计算

千位：如果声明在 style 的属性（内联样式）则该位得一分
百位：选择器中包含ID选择器则该位得一分
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分
个位：选择器中包含标签选择器、伪元素选择器则该位得一分

选择器	百位	十位	个位	权重
h1	?	?	?	001
#box p	?	?	?	101
#logo a:hover	?	?	?	111
h1 + p::before	?	?	?	003

通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级

只有被直接选中才能计算比较 继承的样式权重最低

四.如何清除浮动

方法一：给父元素加上 .clearfix

.clearfix::after{
    content: '';
    display: block; /*或者 table*/
    clear: both;
}

方法二: 给父元素加上overflow:hidden

五.两种盒模型的区别

第一种盒模型是content-box,即width指定的是content区域宽度，而不是实际宽度
实际宽度= width + padding + border
第二种盒模型是border-box，即width指定的是左右边框外侧的距离
实际宽度= width
相同点是都是用来指定宽度的，不同点是border-box更好用

CSS-面试

一.BFC是什么

二.如何实现垂直居中

三.CSS选择器优先级如何确定

四.如何清除浮动

五.两种盒模型的区别