面试复习题 - CSS垂直水平居中的几种实现使用 Flex 布局实现垂直水平居中：使用绝对定位实现垂直水平居中：使

✊不积跬步，无以至千里；不积小流，无以成江海

两栏布局 - 一栏定宽一栏自适应

1、使用flex布局，这也是目前主流方式。父容器设置display:flex，定宽字元素设置flex-basis或者width，自适应的子元素设置flex: 1，或者flex-grow: 1。

<section>
  <main>main</main>
  <aside>aside</aside>
</section>

<style>
  section { 
    display: flex; 
  }
  aside { 
    width: 200px; 
    background: blue;
  }
  main { 
    flex-grow: 1; 
    order: 1; 
    background: red;
  }
</style>

2、使用grid布局。父容器设置 display: grid，使用grid-template-rows 和 grid-template-columns 设置格子；子项使用grid-column 和 grid-row 设置在格子中的位置。grid布局对浏览器的版本要求比较苛刻，IE基本不支持。

<section>
  <main>main</main>
  <aside>aside</aside>
</section>

<style>
  section { 
    display: grid; 
    /*格子是两列，第一列固定宽度200px，第二列撑满剩余空间*/
    grid-template-columns: 200px 1fr; 
    /*格子是是一行，高度由子项决定*/
    grid-template-rows: auto;
  }
  aside { 
    grid-column: 1/2; /*放在第1和第2根列线内*/
    grid-row: 1/2;    /*放在第1和第2根行线内*/
    background: blue;
  }
  main {  
    grid-column: 2/3;  /*放在第2和第3根列线内*/
    grid-row: 1/2;     /*放在第1和第2根行线内*/
    background: red;
  }
</style>

3、如果需要适配低端IE，可使用下面的传统的浮动布局。如果不但要适配低端IE，在布局时对DOM的结构顺序也有要求，比如对于侧边栏在左侧的布局希望自适应的元素DOM位置更靠前，则可以考虑使用圣杯布局或者双飞翼布局。

简单来讲：

圣杯布局 - 浮动 + 负margin

双飞翼布局 - 自适应宽度 + div

垂直水平居中的几种实现

使用 Flex 布局实现垂直水平居中：

<div class="container">
  <div class="centered">居中的内容</div>
</div>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.centered {
  text-align: center;
}

</style>

使用绝对定位实现垂直水平居中：

<div class="container">
  <div class="centered">居中的内容</div>
</div>
<style>
.container {
  position: relative;
  height: 100vh;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>

使用 table 布局实现垂直水平居中：

<div class="container">
  <div class="table-cell">
    <div class="centered">居中的内容</div>
  </div>
</div>
css
Copy code
.container {
  display: table;
  height: 100vh;
  width: 100%;
}

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

.centered {
  display: inline-block;
}

使用 grid 布局实现垂直水平居中：

<div class="container">
  <div class="centered">居中的内容</div>
</div>
css
Copy code
.container {
  display: grid;
  height: 100vh;
  place-items: center;
}

.centered {
  text-align: center;
}

如何清除浮动

使用 clear 属性

在浮动元素的下方插入一个空元素，然后为该元素添加 clear: both 属性，清除浮动。

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div style="clear: both;"></div>
</div>

使用 overflow 属性

为父容器添加 overflow: auto 或 overflow: hidden 属性，可以清除浮动。

<div class="parent" style="overflow: auto;">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

使用伪元素清除浮动

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在父容器上添加 clearfix 类名即可。

cssCopy code
<div class="parent clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

BFC 是什么?

是什么:

「块级格式化上下文」。BFC的全称是 Block formatting contexts (块级格式化上下文)。block：块级元素， formatting：格式化、规定...的格式， contexts：上下文、环境。翻译过来就是：BFC是规定内部块级元素格式(摆放规则)的一个独立的环境。

摆放规则约束的对象是内部的所有块级元素
这个规则是：一个块级元素占据一整行空间，一个挨一个从上到下排列，盒子间的垂直距离由margin决定。相邻块级盒子的垂直margin会出现折叠。BFC里的盒子左侧边缘不会超出BFC，除非这个盒子自己也变成了一个新的BFC。
“上下文”一般理解为：1. 一个由容器和子项参与构建的、遵循一定规则的、独立的环境；2. 同一上下文中的子项关系是平等的，能相互影响的，即使存在子项嵌套子项的情况；3. 子项可能创建新的上下文，对其潜逃的子项生效，与外层上下文有同样的规则，且新上下文中的子项与外层上下文的子项完全隔离。

产生条件 只需满足以下条件之一：

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

解决了什么问题:

清除浮动(为什么不用.clearfix呢?)
防止margin合并
某些古老的布局方式会用到(已过时)

优点:无。

缺点:有副作用。

怎么解决缺点:使用最新的 display: flow-root 来触发 BFC 就没有副作用了，但是很多人不知道。

移动端元素适配

rem：相对于根元素 em：相对于父元素 vh：相对于视图的高度 vw：相对于试图的宽度