分享｜「前端面试」CSS 编程题目总结

腐烂的橘子

9682

2020.11.17

2020.12.06

发布于未知归属地

求职面试前端我要上推荐 JavaScript 腐烂的橘子技术交流

前端面试中，会考到一些基础布局的实现方法，比如如何画一个三角形，如何实现一个两栏布局等。

以下对常见的问题进行总结，并提供了源码供下载，祝愿大家都能收获理想的 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-direction
justify-content: space-between; 两端对齐
align-items
flex-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：1
flex-shrink：1
flex-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)