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篇（二）》 是转载文章，点击查看原文。
