CSS基础面试题（三）

本文整理了 CSS 面试相关问题，包括 flex 的作用和 flex 布局相关属性 flex:1 的含义，line-height 继承规则

flex 布局

flex 是 flexible box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

布局方向

通过设置 flex-direction 可以配置子元素的排列方向，可以是横向（row）或者纵向（column）。

垂直水平居中

当 flex-direction: row 时， align-items: center 可以让子元素垂直居中，justify-content: center 可以让子元素水平居中。

当 flex-direction: column 时， align-items: center 可以让子元素水平居中，justify-content: center 可以让子元素垂直居中。

flex: 1 是什么意思

flex: 1 可以让子元素如何占据父元素的剩余空间，可以是一个数字，也可以是 auto，表示子元素占据剩余空间的比例。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写。

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex: 1 相当于 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0%。

• flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不填满。设置为 1  代表会填满。
• flex-shrink: 1 ：该属性默认为 1 ，如果空间不足，元素缩小比例 1。
• flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项目本身大小。设置为 0%  之后，因为有 flex-grow  和 flex-shrink  的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis  设为 auto  的话，其本身大小将会是 0 。​

line-height 如何继承？

• 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。

• 父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。

• 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 fontSize * 200% 计算出来的值。

如何创建新的层叠上下文

• 根元素（HTML）
• 绝对或相对定位且  z-index  值不为  auto
• 一个伸缩项目  Flex Item，且  z-index  值不为  auto，即父元素  display: flex|inline-flex;
• 元素的  opacity  属性值小于 1
• 元素的  transform  属性值不为  none
• 元素的  mix-blend-mode  属性值不为  normal
• 元素的  filter  属性值不为  normal
• 元素的  isolation  属性值为  isolate
• position: fixed
• will-change  中指定了上述任意属性，即便你没有直接定义这些属性
• 元素的  -webkit-overflow-scrolling  属性值为  touch

px、em、rem的区别

• px ： 一个固定像素单位。

• em ： em 作为 font-size 的单位时，其代表父元素的字体大小按比例计算值，em 作为其他属性单位时，代表相对自身字体大小按比例计算值。

.parent {
  font-size: 32px;
}
/** child字体为16px **/
.child {
  font-size: 0.5em;
  width: 2em; /* 32 * 0.5 * 2 */
}

• rem ： 相对于根元素字体大小按比例计算值；rem 作用于根元素字体大小时，相对于其出初始字体大小（16px）。

html {
  font-size: 20px;
}
/* 作用于非根元素，相对于根元素字体大小，所以为40px */
p {
  font-size: 2rem;
}