前端高频面试题之CSS篇（二）

1、如何实现两栏布局？

两栏布局指的是左边宽度固定，右边宽度自适应。

DOM 结构如下：

1<body>
2  <div class="box">
3    <div class="left"></div>
4    <div class="right"></div>
5  </div>
6</body>
7

1.1 利用 flex 布局实现

实现思路：将父元素设为 flex 布局，左边元素宽度固定，右边元素设为 flex: 1，即自适应。

1.box {
2  display: flex;
3  width: 500px;
4  height: 100px;
5}
6.left {
7  width: 200px;
8  background: yellow;
9}
10.right {
11  flex: 1;
12  background: green;
13}
14

优点：布局灵活、响应式布局。

缺点：IE9 及以下不支持。

1.2 利用 float 布局实现

实现思路：将左边元素设置为浮动元素 float: left，右边元素用 margin-left，这样能让右边元素占据父元素剩余宽度。

1.box {
2  width: 500px;
3  height: 100px;
4}
5
6.left {
7  float: left;
8  width: 200px;
9  height: 100%;
10  background: yellow;
11}
12
13.right {
14  margin-left: 200px;
15  height: 100%;
16  background: green;
17}
18

优点：简单、支持 IE。

缺点：浮动易导致问题（如高度塌陷），不适合复杂布局。

1.3 利用 Grid 布局实现

实现思路：将父元素设为 grid 布局，并设置 grid-template-columns: 200px 1fr 即可。

1.box {
2  display: grid;
3  grid-template-columns: 200px 1fr;
4  width: 500px;
5  height: 100px;
6}
7
8.left {
9  background: yellow;
10}
11
12.right {
13  background: green;
14}
15

优点：二维布局强大，实现多栏布局十分方便。

缺点：IE9 及以下不支持，不适合一维布局。

1.4 利用 position 绝对定位实现

实现思路：父级为相对定位，右边子元素为绝对定位，并同时设置 left、right、top、bottom 值，以实现宽高的自动拉伸。

1.box {
2  position: relative;
3  width: 500px;
4  height: 100px;
5}
6
7.left {
8  width: 200px;
9  height: 100px;
10  background: yellow;
11}
12
13.right {
14  position: absolute;
15  left: 200px;
16  right: 0;
17  top: 0;
18  bottom: 0;
19  background: green;
20}
21

优点：可以精确控制位置。

缺点：脱离文档流，响应式差。

2、如何实现三栏布局？

三栏布局指的是页面分为三栏，左侧和右侧固定宽度，中间自适应。

DOM 结构如下：

1<body>
2  <div class="box">
3    <div class="left"></div>
4    <div class="center"></div>
5    <div class="right"></div>
6  </div>
7</body>
8

2.1 利用 flex 布局实现

1.box {
2  display: flex;
3  width: 500px;
4  height: 100px;
5}
6
7.left {
8  width: 100px;
9  background: yellow;
10}
11
12.center {
13  flex: 1;
14  background: pink;
15}
16
17.right {
18  width: 100px;
19  background: green;
20}
21

2.2 利用 float 布局实现

1.box {
2  width: 500px;
3  height: 100px;
4}
5
6.left {
7  float: left;
8  width: 100px;
9  height: 100px;
10  background: yellow;
11}
12
13.center {
14  height: 100px;
15  margin: 0 100px;
16  background: pink;
17}
18
19.right {
20  float: right;
21  width: 100px;
22  height: 100px;
23  background: green;
24}
25

这里需要注意，中间栏的 DOM 需要放在最后，以避免浮动元素影响，所以其 DOM 结构如下：

1<div class="box">
2  <div class="left"></div>
3  <div class="right"></div>
4  <div class="center"></div>
5</div>
6

2.3 利用 grid 布局实现

1.box {
2  display: grid;
3  grid-template-columns: 100px 1fr 100px;
4  width: 500px;
5  height: 100px;
6}
7
8.left {
9  background: yellow;
10}
11
12.center {
13  background: pink;
14}
15
16.right {
17  background: green;
18}
19

2.4 利用 position 绝对定位实现

1.box {
2  position: relative;
3  width: 500px;
4  height: 100px;
5}
6
7.left {
8  position: absolute;
9  left: 0;
10  width: 100px;
11  height: 100px;
12  background: yellow;
13}
14
15.center {
16  margin: 0 100px;
17  height: 100px;
18  background: pink;
19}
20
21.right {
22  position: absolute;
23  right: 0;
24  top: 0;
25  width: 100px;
26  height: 100px;
27  background: green;
28}
29

2.5 经典三栏布局之圣杯布局

圣杯布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过相对定位和负边距来实现侧边栏的定位。

1<style>
2  .box {
3    padding: 0 150px 0 200px;
4  }
5
6  .wrapper::after {
7    display: table;
8    content: '';
9    clear: both;
10  }
11
12  .column {
13    float: left;
14    height: 200px;
15  }
16
17  .left {
18    width: 200px;
19    position: relative;
20    margin-left: -100%;
21    right: 200px;
22    background-color: aqua;
23  }
24
25  .center {
26    width: 100%;
27    background-color: red;
28  }
29
30  .right {
31    width: 150px;
32    margin-right: -150px;
33    background-color: green;
34  }
35</style>
36<body>
37  <div class="box">
38    <!-- 中间列 center 放第一个是为了在文档流中优先渲染，因为 DOM 是从上往下依次渲染的-->
39    <div class="center column">center</div>
40    <div class="left column">left</div>
41    <div class="right column">right</div>
42  </div>
43</body>
44

2.6 经典三栏布局之双飞翼布局

双飞翼布局实现三列布局左右列固定宽度、中间列自适应，其原理是通过使用嵌套的 div 元素来实现侧边栏的定位，以及使用负外边距将主内容区域撑开。

1<style>
2  .box {
3    background-color: red;
4    width: 100%;
5  }
6
7  .column {
8    float: left;
9    height: 200px;
10  }
11
12  .center {
13    margin: 0 150px 0 200px;
14  }
15
16  .left {
17    width: 200px;
18    background-color: aqua;
19    margin-left: -100%;
20  }
21
22  .right {
23    width: 150px;
24    background-color: green;
25    margin-left: -150px;
26  }
27</style>
28<body>
29  <div class="box column">
30    <div class="center">center</div>
31  </div>
32  <div class="left column">left</div>
33  <div class="right column">right</div>
34</body>
35

3、如何实现水平垂直居中？

3.1 文本类可以使用 `line-height` 和 `text-align`

1.box {
2  width: 100px;
3  height: 100px;
4  line-height: 100px;
5  text-align: center;
6}
7

3.2 使用 flex 布局

1.box {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6

3.3 使用绝对定位 postion + transform/负 margin

1.parent {
2  position: relative;
3}
4.child {
5  position: absolute;
6  left: 50%;
7  top: 50%;
8  transform: translate(-50%, -50%);
9}
10

当元素固定宽度时，也可以用 负 margin 替代 transform。

1.parent {
2  position: relative;
3  width: 200px;
4  height: 200px;
5  background-color: red;
6}
7
8.child {
9  width: 50px;
10  height: 50px;
11  position: absolute;
12  left: 50%;
13  top: 50%;
14  margin-top: -25px; /* 自身容器高度的一半 */
15  margin-left: -25px; /* 自身容器宽度的一半 */
16  background-color: green;
17}
18

3.4 使用 absolute + margin: auto

1.box {
2  position: absolute; 
3  inset: 0; 
4  margin: auto
5}
6
7

3.5 使用 Grid 布局

1.box {
2 display: grid; 
3 place-items: center;
4}
5
6

3.6 使用 table 布局

1.box {
2 display: table-cell;
3 vertical-align: middle;
4}
5
6

4、实现一个三角形

4.1 利用 border

在 CSS 中，实现三角形最常见的方法是利用元素的**边框（border）**属性。通过设置元素的宽度和高度为 0，然后调整边框的宽度和颜色，可以形成各种方向的三角形。

1.triangle {
2  width: 0;
3  height: 0;
4  border-left: 10px solid transparent;  /* 左透明 */
5  border-right: 10px solid transparent; /* 右透明 */
6  border-bottom: 30px solid red;       /* 底有颜色，形成向上三角 */
7}
8
9

4.2 使用 clip-path

1.triangle {
2  width: 100px;
3  height: 100px;
4  background: purple;
5  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /* 向上三角 */
6}
7

5、实现一个扇形

在上面画三角形的基础上，再增加样式 border-radius: 100%;即可实现一个扇形。

1.sector {
2  width: 0;
3  height: 0;
4  border-left: 10px solid transparent;
5  border-right: 10px solid transparent;
6  border-bottom: 30px solid red;
7  border-radius: 100%; /* 增加 border-radius */
8}
9

6、实现一个梯形

1.box {
2  width: 200px;
3  height: 60px;
4  position: relative;
5  margin: 32px auto;
6  font-size: 60px;
7  text-align: center;
8}
9
10.box::before {
11  content: '';
12  position: absolute;
13  top: 0;
14  right: 0;
15  bottom: 0;
16  left: 0;
17  background: red;
18  transform: perspective(.5em) rotateX(5deg);
19}
20

7、画一条 0.5px 的线

对于大部分普通屏幕来说，像素是最小的显示单位，因此定义 0.5px 是没有意义的，浏览器遇到小于 1px 时会向上取整渲染 1px，这个是浏览器渲染的局限性。

但是在一些高分辨率屏幕（如 Retina 屏幕）上，1 物理像素点可以被分成多个虚拟像素（比如 2x 屏幕将每个物理像素分为 4 个虚拟像素）。这样的话，1px 的物流像素就等于 2 个虚拟像素，所以 0.5px 也能被渲染出来。

所以对于普通屏幕来说，我们需要做一些兼容方案来渲染出 0.5px 的效果。

我们可以使用 CSS transform 缩放法 来实现 0.5px 的线，代码如下：

1.line {
2  height: 1px;
3  background-color: red;
4  transform: scaleY(0.5); /* 对高度进行垂直方向的缩放 */
5}
6
7

小结

上面是整理的前端面试关于 CSS 高频考察的布局和图形，如有错误或者可以优化的地方欢迎评论区指正。

《前端高频面试题之CSS篇（二）》是转载文章，点击查看原文。