重温前端之css面试部分

盒子模型

标准盒子模型

width = content

IE盒子模型

width = content + border + padding

居中布局

flex

/* 方案1 */
.out {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 方案2 */
.out {
  display: flex;
}
.in {
  margin: auto;
}

transform

.out {
  height: xx;
}
.in {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

绝对定位

/* 方案1 */
.out {
  height: xx;
  position: relative;
}
.in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/* 方案2 */
.out {
  height: xx;
  position: relative;
}
.in {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

bfc

定义

css 加载完后，会根据特定的规则，格式化上下文进行渲染，其中块级元素，采用的就是块级格式化上下文，也叫 bfc

产生

1. 根元素
2. float 属性不为none
3. position 属性不为static``relative
4. overflow 属性不为visible
5. display 属性为line-block``line-flex``flex``table-cell

清除元素浮动

1. 给父元素设定 overflow: hidden
2. 在最后添加一个子元素，设定 clear: both
3. 添加前后伪元素，令其 clear: both