CSS面试题.md

01. 盒模型

盒模型分为标准盒模型和怪异盒模型

• 标准盒模型：实际宽度由 宽度 + padding + border 组成(box-sizing: content-box)
• 怪异盒模型：内容宽度为 定义的宽度 - padding - border(box-sizing: border-box)

02. 什么是文档流

文档流是元素在 web 页面上的一种呈现方式，按照出现的先后顺序进行排列

03. 什么是 BFC

BFC 即 Block Formatting Contexts(块级格式上下文)。它是页面中的一块区域，它决定了子元素将如何定位，以及和其他元素的关系和相互作用。

具有 BFC 特性的元素可以看做是隔离的容器，它的子元素在布局上不会影响到外面的元素

04. 触发 BFC 的条件

• float 不为 none
• position 的值不是 static 或 relative
• overflow 的值不是 visible
• display 的值是 inline-block / table-cell / flex / inline-flex / table-caption

05. BFC 的作用

• 解决 margin-top 向上传递的问题
• 解决 margin 上下叠加的问题
• 清除浮动

06. 清除浮动的方式

同一层级的元素：另外的元素设置样式 clear: both;

子元素清除父元素的浮动：

• clear 属性
• BFC
• 空元素
• 给父元素设置 .clearfix::after{}

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

07. 盒子里的文字上下居中

.box {
  height: 100px;
  line-height: 100px;
}

.box {
  display: table-cell;
  vertical-align: middle;
}

.box {
  display: flex;
  align-items: center;
}

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

08. 盒子里的盒子上下左右居中

.container {
  position: relative;
}
.box {
  display: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

.container {
  display: flex;
  /* display: inline-flex; */
}
.box {
  margin: 0 auto;
}

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.container {
  display: table-cell;
  vertical-align: middle;
}
.box {
  margin: 0 auto;
}

09. rem 和 em 的区别

• rem 是相对于根元素(html)的 font-size 的，1rem = 根元素的 font-size
• em 如果元素自身定义了 font-size，1em = 元素自身的 font-size，如果元素自身没有定义 font-size，那么 1em = 元素的父元素(设置了 font-size 的父元素)的 font-size
• 如果元素自身的 font-size 设置的就是 em，那么元素自身的 font-size 就根据父元素的 font-size 计算得到

10. vm 和 vh

• 1vw 屏幕宽度的 1%
• 1vh 屏幕高度的 1%
• vmin 是两者的最小值，vmax 是两者中的最大值