2020前端面試，CSS會問你這些

時間 2020-03-27

原文原文鏈接

CSS每每是咱們前端開發者不太看重的一環，並且如今重構崗也愈來愈少，不像前幾年前端領域還分爲js崗和重構崗。注重基礎的面試官，在CSS基礎回答不上時，印象分就會有所降低。下面整理一些常問到的CSS的知識點，歡迎指正，整理不易，點個贊再走吧。。。

首先咱們以一道面試題爲考察點css

如何實現三欄佈局？

三列布局，其中一列寬度自適應，其餘兩列固定
首先咱們來看最終實現效果，對於下方几種實現方式，能夠先本身試試，再往下看html

首先對樣式進行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>

還有許多類似的問題，好比水平垂直居中、品字佈局的實現方式等，都是同一個原理，主要的考察點：前端

一、爲何要進行reset？git

二、對於float、postion的理解github

三、對於flex伸縮盒的掌握web

四、對於不經常使用的table佈局有沒有掌握面試

五、對於兼容性很差的grid新型佈局是有所瞭解，我以爲這是一個加分項瀏覽器

爲何要進行樣式reset？

各個瀏覽器的默認展現樣式不一致，CSS reset的做用是讓各個瀏覽器的CSS樣式有一個統一的基準。
例如暴力的dom

* {
    margin: 0;
    padding: 0;
}

後來咱們也出現了reset.css
和Normalize.css比較官方的解決方式，固然我比較推薦Normalize.css。ide

那如何清除浮動？

通常咱們會有兩種解決方法：

使用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>