「寒冬」三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之CSS篇

前言

不管是寒冬仍是暖冬，找工做以前都須要作好充足的準備，面試的時候才能作到遊刃有餘。此文是把我最近找工做準備的以及筆試面試中涉及到的手寫題作一個總結。給本身，也給須要的同窗。

CSS是前端必需要掌握的技能之一。通常面試也都會從CSS開始。因此CSS問題答的好壞會直接影響你在面試官心中的形象。

本文主要介紹面試中常會遇到的CSS問題及給出建議性的答案。

---

往期

1. 「寒冬」三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）
2. "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之手寫題（一）
3. "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之手寫題（二）
4. "寒冬"三年經驗前端面試總結（含頭條、百度、餓了麼、滴滴等）之手寫題（promise篇）

---

盒模型

盒模型感受是剛學前端的時候就會接觸到的問題。元素都是按照盒模型的規則佈局在頁面中的。盒模型由 margin + border + padding + content 四個屬性組成，分爲兩種：W3C的標準盒模型和IE盒模型。

W3C的標準盒模型

width = content，不包含 border + padding

IE盒模型

width = border + padding + content

相互轉換

兩者之間能夠經過CSS3的 box-sizing 屬性來轉換。

box-sizing: content-box 是W3C盒模型

box-sizing: border-box 是IE盒模型

垂直居中的方法

垂直居中的方法，若是全寫出來，有10多種。面試的時候通常都會說比較經常使用的幾種。flex、position + transform、position + 負margin是最多見的三種狀況。

<div class="outer">
    <div class="inner"></div>
</div>

方法一：flex

.outer{
    display: flex;
    justify-content: center;
    align-items: center
}

方法二： position + transform, inner寬高未知

.outer{
    position:relative;
}
.inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

方法三：position + 負margin, inner寬高已知

.outer{
    position: relative;
}
.inner{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

方法四：設置各個方向的距離都是0，再將margin設爲auto，也能夠實現，前提是inner寬高已知

.outer {
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

三欄佈局

三欄佈局是很常見的一種頁面佈局方式。左右固定，中間自適應。實現方式有不少種方法。

第一種：flex

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
.container{
    display: flex;
}
.left{
    flex-basis:200px;
    background: green;
}
.main{
    flex: 1;
    background: red;
}
.right{
    flex-basis:200px;
    background: green;
}

第二種：position + margin

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>
body,html{
    padding: 0;
    margin: 0;
}
.left,.right{
    position: absolute;
    top: 0;
    background: red;
}
.left{
    left: 0;
    width: 200px;
}
.right{
    right: 0;
    width: 200px;
}
.main{
    margin: 0 200px ;
    background: green;
}

第三種：float + margin

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>
body,html{
    padding:0;
    margin: 0;
}
.left{
    float:left;
    width:200px;
    background:red;
}
.main{
    margin:0 200px;
    background: green;
}
.right{
    float:right;
    width:200px;
    background:red;
}

CSS權重計算方式

CSS基本選擇器包含ID選擇器、類選擇器、標籤選擇器、通配符選擇器。
正常狀況下，通常都能答出!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤選擇器 > 通配符選擇器。

但若是這幾種選擇器同時做用於一個元素時，該元素最後應用哪一個樣式呢？這就涉及到權重計算的問題。
關於權重計算，有兩種不一樣的計算方式：一種是以二進制的規則計算，一種是以1,10,100,1000這種的計算方式。我更傾向於二進制的這種方式。

各選擇器權值：

• 內聯樣式，權值爲1000
• ID選擇器，權值爲0100
• 類，僞類和屬性選擇器，權值爲0010
• 標籤選擇器和僞元素選擇器，權值爲0001
• 通配符、子選擇器、相鄰選擇器等，權值爲0000
• 繼承的樣式沒有權值

比較方式：

若是層級相同，繼續日後比較，若是層級不一樣，層級高的權重大，不論低層級有多少個選擇器。

BFC

BFC的全稱爲 Block Formatting Context，也就是塊級格式化上下文的意思。

如下方式都會建立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）。

BFC佈局規則：

1. 內部的box會在垂直方向，一個接一個的放置。
2. box垂直方向的距離有margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊。3. 每一個元素的左外邊距與包含塊的左邊界相接觸，即便浮動元素也是如此。
3. BFC的區域不會與float的元素區域重疊。
4. 計算BFC的高度時，浮動子元素也參與計算。
5. BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。

BFC能解決的問題：

1. 父元素塌陷
2. 外邊距重疊
3. 清除浮動

清除浮動的方法

清除浮動主要是爲了防止父元素塌陷。清除浮動的方法有不少，經常使用的是 clearfix 僞類。

方法一：clearfix

<div class="outer clearfix">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
}
.inner{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

方法二：額外加一個div，clear:both

<div class="container">
    <div class="inner"></div>
    <div class="clear"></div>
</div>
.container{
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear{
    clear:both;
}

方法三：觸發父盒子BFC，overflow:hidden

<div class="outer">
    <div class="inner">inner</div>
</div>
.outer{
    background: blue;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}

flex佈局

flex 佈局如今已經很普及的在用了。垂直居中用 flex 實現起來很簡單。關於 flex 的屬性也不是不少，父容器和子容器各6個，一共12個，比較好記。

下面是我複習flex屬性時的一張導圖。

position屬性

position屬性的重要性應該沒啥可說的了。想必誰都回答的上來。

• absolute 絕對定位，相對於 static 定位之外的第一個父元素進行定位。
• relative 相對定位，相對於其自身正常位置進行定位。
• fixed 固定定位，相對於瀏覽器窗口進行定位。
• static 默認值。沒有定位，元素出如今正常的流中。
• inherit 規定應該從父元素繼承 position 屬性的值。

可是要注意一個問題，absolute 是相對於父元素的哪一個屬性進行定位的？經過下面的例子咱們來看一看。

.container{
    position: relative;
    width: 30px;
    height: 30px;
    margin: 20px;
    border: 10px solid red;
    padding: 10px;
    background: blue;
}
.inner {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background: pink;
}

從上圖能夠看出，是相對於 static 定位之外的第一個父元素的 padding 來定位的。

CSS3中新增了一個 position:sticky 屬性，該屬性的做用相似 position:relative 和 position:fixed的結合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。必須指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。但 sticky 尚在實驗性階段。

如何實現一個自適應的正方形

方法1：利用CSS3的vw單位

vw 會把視口的寬度平均分爲100份

.square {
    width: 10vw;
    height: 10vw;
    background: red;
}

方法2：利用margin或者padding的百分比計算是參照父元素的width屬性

.square {
    width: 10%;
    padding-bottom: 10%; 
    height: 0; // 防止內容撐開多餘的高度
    background: red;
}

如何用css實現一個三角形

方法1： 利用border屬性

利用盒模型的 border 屬性上下左右邊框交界處會呈現出平滑的斜線這個特色，經過設置不一樣的上下左右邊框寬度或者顏色便可獲得三角形或者梯形。

.triangle {
    height:0;
    width:0;
    border-color:red blue green pink;
    border-style:solid;
    border-width:30px;
}

若是想實現其中的任一個三角形，把其餘方向上的 border-color 都設置成透明便可。

.triangle {
    height:0;
    width:0;
    border-color:red transparent transparent transparent;
    border-style:solid;
    border-width:30px;
}

方法二： 利用CSS3的clip-path屬性

不瞭解 clip-path 屬性的能夠先看看 MDN 上的介紹：chip-path

.triangle {
    width: 30px;
    height: 30px;
    background: red;
    clip-path: polygon(0px 0px, 0px 30px, 30px 0px); // 將座標(0,0),(0,30),(30,0)連成一個三角形
    transform: rotate(225deg); // 旋轉225，變成下三角
}

寫在最後

有錯誤之處還請小夥伴們及時指出，以避免誤人子弟。想看往期內容，翻到頁面最上面有連接~