前端面试中，会考到一些基础布局的实现方法，比如如何画一个三角形，如何实现一个两栏布局等。
以下对常见的问题进行总结，并提供了源码供下载，祝愿大家都能收获理想的 offer🍗
⬜ 矩形
矩形是最简单的了，一个 <div>，设置宽高，加个背景就行了。
CSS
HTML
div {
width: 100px;
height: 100px;
background: #FF9900;
/* 居中 */
margin: auto;
}
⚪ 圆
机械行业有个名词叫「圆角」，当圆角半径为上面正方形边长的一半时，也就是说把上面的正方形的四个角「磨圆」了，就成了一个圆。
因此我们只需向前面的 CSS 代码中添加一行 border-radius: 50px; 即可。
CSS
HTML
div {
width: 100px;
height: 100px;
background: #FF9900;
border-radius: 50px;
/* 居中 */
margin: auto;
}
🙄 半圆
看到半圆我「啪」就站起来了，很快啊！！
后来一想，把前面的圆切一半不就成了半圆了吗，于是我瞬间只保留了左上和右上的圆角：
CSS
border-radius: 50px 50px 0 0;
我一看，噢，原来还需要将 高度设置为宽度的一半，最终代码是这样的：
CSS
HTML
.semi-circle {
width: 100px;
height: 50px;
background: #FF9900;
border-radius: 50px 50px 0 0;
margin: auto;
}
三角形
HTML
CSS
<div class="triangle"></div>🎲三点骰子
常用语法：
flex-directionjustify-content: space-between;两端对齐align-itemsflex-wrap单行还是多行align-self: center
HTML
CSS
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>实现两列布局，左边自适应，右边固定（高频考点）
flex: 1 相当于：
flex-grow：1flex-shrink：1flex-basis：0%
HTML
CSS
<div id="flex-container">
<div class="box-left">left</div>
<div class="box-right">right</div>
</div>圣杯布局
面试回答要点：
- 使用 float 布局
- 两侧使用 margin 负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用 padding，一个用 margin
HTML
CSS
<div id="header">this is header</div>
<div id="container">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>双飞翼布局
HTML
CSS
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>评论 (7)
