【面试宝典】高频前端面试题之CSS篇本文已参与「新人创作礼」活动，一起开启掘金创作之路。引言本文对JS中一些重要的原

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

引言

本文对CSS中一些重要问题进行整理汇总。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读。希望读者读完本文，有一定的启发思考，也能对自己的CSS掌握程度有一定的认识，对缺漏之处进行弥补，对CSS有更好的掌握。

笔者也会站在面试者的角度对下述问题进行回答，并加以适当的分析。

1. 谈谈CSS盒模型有哪几种

CSS盒模型主要分为标准盒子模型和IE盒子模型，两种盒模型的内容宽度是不同的：

标准盒子模型：内容宽度 = content

IE盒子模型：内容宽度= content + border + paddin

2. 谈谈CSS选择器的优先级顺序

带!important 标记的样式属性优先级最高；样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

3.谈谈你对BFC的理解

BFC直译为块级格式化上下文，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

形成BFC的条件

只要元素满足下面任一条件即可触发BFC特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC常见作用

清除浮动
去除边距重叠现象

4.隐藏页面中某个元素的方法

1.visibility：hidden不会改变页面布局，在文档布局中仍保留原来的空间会引起重绘

2.display：none会改变页面布局，在文档布局中不再分配空间会引起回流+重绘

3.opacity：0该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的

5.谈谈你对重排和重绘的理解

重排：一般来讲修改元素的宽度，高度等影响元素位置的几何属性均会引起重排
重绘：一般来讲如果修改元素的颜色或者背景颜色均会引发重绘

通常使用以下两种方式减少重排和重绘，以达到性能优化的目的：

最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。

6. 谈谈如何用纯CSS画一条0.5px的直线

<div class="half"></div>

<style>
    .half {
        width: 300px;
        background-color: #000;
        height: 1px; transform: scaleY(0.5); /* 延Y轴缩小1倍 */ 
        transform-origin: 50% 100%; /* 改变元素变形的原点 *
    }
</style>

7. 谈谈如何用纯CSS创建一个三角形

<div class="content"></div>

<style>
    .content {
        width: 0;
        height: 0;
        border: 20px solid;
        border-color: transparent transparent transparent pink;  // 对应上右下左，此处为 左 粉色
    }
</style>

8. 谈谈如何使用CSS垂直居中

使用绝对定位和transform(适用于不知道内盒子宽高)

<div id="box">
    <div id="child"/>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用绝对定位和margin(适用于知道内盒子宽高)

<div id="box">
    <div id="child"/>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 300px;
    height: 300px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

使用flex布局(适用于任何情况)

<div id="box">
    <div id="child"/>
</div>

#box {
    display: flex;
    background: #ddd;
}
#child {
    align-items: center;
    justify-content: center;
    background: orange;
}

9. 实现两栏布局

利用浮动

<div id="outer">
  <div id="left">左侧</div>
  <div id="right">右侧</div>
</div>

#outer {
  height: 100px;
}
#left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
#right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}

利用 `flex` 布局

<div id="outer">
  <div id="left">左侧</div>
  <div id="right">右侧</div>
</div>

#outer {
  display: flex;
  height: 100px;
}
#left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
#right {
  flex: 1;
  height: 100%;
  background: lightseagreen;
}

利用绝对定位

<div id="outer">
  <div id="left">左侧</div>
  <div id="right">右侧</div>
</div>

#outer {
  position: relative;
  height: 100px;
}
#left {
  position: absolute;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
#right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}
复制代码

10. 实现圣杯布局和双飞翼布局（三分栏布局）

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
两侧内容固定，中间内容随着宽度自适应。

圣杯布局

<div id="container" class="clearfix">
  <p class="center"></p>
  <p class="left"></p>
  <p class="right"></p>
</div>

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: lightcyan;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

双飞翼布局

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}

结语

本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力。

【面试宝典】高频前端面试题之CSS篇

引言