2020前端面试，CSS会问你这些

CSS往往是我们前端开发者不太看重的一环，而且现在重构岗也越来越少，不像前几年前端领域还分为js岗和重构岗。注重基础的面试官，在CSS基础回答不上时，印象分就会有所下降。下面整理一些常问到的CSS的知识点，欢迎指正，整理不易，点个赞再走吧。。。

首先我们以一道面试题为考察点

如何实现三栏布局？

三列布局，其中一列宽度自适应，其他两列固定
首先我们来看最终实现效果，对于下方几种实现方式，可以先自己试试，再往下看

首先对样式进行reset

<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        min-height: 100px;
    }
    h2, h4 {
        text-align: center;
    }
    .left, .right {
        width: 300px;
        background: rgba(0, 0, 0, 0.3);
    }
    .center {
        background: rgba(0, 0, 0, 0.2);
    }
    .layout {
        margin: 10px 0;
    }
</style>

浮动布局

<div class="layout float">
    <style media="screen">
        .float .left {
            float: left;
        }

        .float .right {
            float: right;
        }
    </style>
    <section class="float-layout">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h4>浮动三栏布局</h4>
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
        </div>
    </section>
</div>

绝对定位布局

<div class="layout absolute">
    <style>
        .absolute div {
            position: absolute;
        }

        .absolute .left {
            left: 0;
            width: 300px;
        }

        .absolute .center {
            left: 300px;
            right: 300px;
        }

        .absolute .right {
            right: 0;
            width: 300px;
        }
    </style>
    <section class="absolute-layout">
        <div class="left"></div>
        <div class="center">
            <h4>绝对定位解决方案</h4>
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </section>
</div>

flex布局

<div class="layout flexbox">
    <style>
        .flexbox .flex-layout {
            display: flex;
        }

        .flexbox .left {
            width: 300px;
        }

        .flexbox .center {
            flex: 1;
        }

        .flexbox .right {
            width: 300px;
        }
    </style>
    <section class="flex-layout">
        <div class="left"></div>
        <div class="center">
            <h4>flexbox解决方案</h4>
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </section>
</div>

table布局

<div class="layout table">
    <style>
        .layout.table .table-layout {
            width: 100%;
            height: 100px;
            display: table;
        }

        .layout.table .table-layout>div {
            display: table-cell;
        }
    </style>
    <section class="table-layout">
        <div class="left"></div>
        <div class="center">
            <h4>表格布局解决方案</h4>
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </section>
</div>

grid布局

<div class="layout grid">
    <style>
        .grid .grid-layout {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }    
        .grid .left {
            width: 300px;
        }
    </style>
    <section class="grid-layout">
        <div class="left"></div>
        <div class="center">
            <h4>网格布局解决方案</h4>
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
            这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </section>
</div>

还有许多相似的问题，比如水平垂直居中、品字布局的实现方式等，都是同一个原理，主要的考察点：

1、为什么要进行reset？

2、对于float、postion的理解

3、对于flex伸缩盒的掌握

4、对于不常用的table布局有没有掌握

5、对于兼容性不好的grid新型布局是有所了解，我觉得这是一个加分项

为什么要进行样式reset？

各个浏览器的默认展示样式不一致，CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准。
例如暴力的

* {
    margin: 0;
    padding: 0;
}

后来我们也出现了reset.css
和Normalize.css比较官方的解决方式，当然我比较推荐Normalize.css。

那如何清除浮动？

一般我们会有两种解决方法：

使用clear属性进行清除浮动；
使父容器形成BFC。例如在父容器加上overflow: hidden属性是我们常用的操作；

什么是BFC？

BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，也就是说它是一个独立渲染的区域，它规定了内部的Block-level Box去如何进行布局，与外部无关。比如清除浮动，外边距塌陷等都是可以通过BFC来进行解决。
关于定义MDN说的比较清楚了。BFC链接

下列方式会创建块格式化上下文：

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

position属性

position的面试点应该就是在absolute的理解吧，position的定位是相对于最近的非static定位祖先元素的便宜，强调一下是非static，而不是只有relative

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

flex弹性盒前，我们说下什么是盒子模型？

盒子模型包括content、padding、border、margin这几块内容

W3C 标准盒模型：width和height只包含content，不包含padding和border。通过box-sizing: content-box来进行设置
IE盒子模型：width和height包含content+border+padding。box-sizing: border-box来设置，为了计算方便，似乎更倾向于这种设置方式

<div class="box">
    <style>
        .box div {
            width: 200px;
            margin: 10px auto;
        }
        .content-box {
            box-sizing: content-box;
            width: 100%;
            border: solid rgba(0, 0, 0, 0.2) 10px;
            padding: 5px;
        }
        .border-box {
            box-sizing: border-box;
            width: 100%;
            border: solid rgba(0, 0, 0, 0.3) 10px;
            padding: 5px;
        }
    </style>
    <h4>盒子模型</h4>
    <div class="border-box"></div>
    <div class="content-box"></div>
</div>

flex伸缩盒

伸缩盒可以让响应式设计，表单的对齐，固定布局等可以很简单的实现

用法：

{
    display:flex;
    flex-direction: row | row-reverse | column | column-reverse; 排列方向
    flex-wrap: nowrap | wrap | wrap-reverse;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
    align-item: center; 垂直方向对齐方式
    justify-content: center; 水平方向对齐方式
}

想深入了解的同学可以看看
flex布局对性能的影响主要体现在哪方面？

以上是我个人理解这个题目的考察点，下面还有部分常问的CSS知识

如何计算CSS的优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级规则

最近的祖先样式比其他祖先样式优先级高

<div style="color: red">
    <div style="color: blue">
        <div class="son"></div> // blue
    </div>
</div>

"直接样式"比"祖先样式"优先级高

<div style="color: red">
    <div class="son" style="color: blue"></div> // blue
</div>

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

<div class="content-class" id="content-id" style="color: black"></div> // black

#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}

内联样式表的权值最高 1000；ID 选择器的权值为 100； class 类选择器的权值为 10；html 标签选择器的权值为 1。这个只是个人理解

<div id="con-id">
    <span class="con-span"></span> // red 
</div>

// CSS
#con-id span {
    color: red; // 值为100 + 1
}
div .con-span {
    color: blue; // 值为 1 + 10
}

inline-block元素之间的间隙如何去除？

因为习惯于父子dom的编写会换行，而且换行符会占用一定的宽度，所以导致元素之间会有间隙
解决：

父元素font-size设置为0；
元素设置float浮动；
使用注释将元素连接起来；

<div class="box parent">
    <div class="children"></div><!--
    --><div class="children"></div><!--
    --><div class="children"></div>
</div>

CSS三角形

三角形的原理是因为border并不是和我们盒模型一样是一个矩形，当设置一个div的border都是5px时，每条border都是一个梯形。

<div class="border"></div>
<style>
   .border{
       width:100px;  
       height: 100px;  
       border: 40px solid;  
       border-color: #ff0000 #0000ff #ff0000 #0000ff;
       margin: 0 auto;
   } 
</style>

当我们把height和width都设置为0

最终我们就可以设置一些border-color: transparent;达到这个效果

<div class="border"></div>
<style>
   .border{
       width: 0;  
       height: 0;  
       border: 40px solid transparent;
       border-bottom: 80px solid #ff0000;
   } 
</style>

最后，希望大家都能够找到自己满意的工作。关注我的公众号：前端30K，后续会持续更新。。。

2020前端面试，CSS会问你这些

如何实现三栏布局？

为什么要进行样式reset？

那如何清除浮动？

什么是BFC？

position属性

flex弹性盒前，我们说下什么是盒子模型？

flex伸缩盒

如何计算CSS的优先级

inline-block元素之间的间隙如何去除？

CSS三角形

Toby

引用和评论

3月前端资源分享

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合