挑戰一輪大廠後的面試總結 - css 篇

   戳藍字「前端技術優選」關注我們哦！

在去年底開始換工作，直到現在算是告了一個段落，斷斷續續的也面試了不少公司，現在回想起來，那段時間經歷了被面試官手撕，被筆試題狂懟，悲傷的時候差點留下沒技術的淚水。

這篇文章我打算把我找工作遇到的各種面試題（每次面試完我都會總結）和我自己複習遇到比較有意思的題目，做一份匯總，年後是跳槽高峰期，也許能幫到一些小夥伴。

先說下這些題目難度，大部分都是基礎題，因為這段經歷給我的感覺就是，不管你面試的是高級還是初級，基礎的知識一定會問到，甚至會有一定的深度，所以基礎還是非常重要的。

這篇文章是對 css 相關的題目做總結，歡迎朋友們先收藏再看。

先看看目錄

目錄BFC - 塊級格式化上下文

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

又多了一個名詞，可以先不用糾結 BFC 的概念，先看看它能解決什麼問題

清除浮動

在 flex 布局還沒流行的時候，我們常常會用到浮動 float ，浮動元素脫離的文檔流，帶來直接的一個問題就是父級高度塌陷。

清除浮動常用的方法有， clear 屬性，還有就是構建 BFC ，看個小慄子

.con{
    border: 1px solid;
    width: 300px;
}
.float{
    float: left;
    height: 100px;
    background-color: sandybrown;
}
<div class="con">
    <div class="float">xxxxxxxx</div>
    <p>dsfsdfwefesfhjkhjkhuhjk</p>
</div>

黃色 div 是個浮動元素，定了 100px 高度，父級不定高，很明顯父級高度沒有被撐開。

float

給父級 con 加上 overflow: auto; 效果如下

float1

這時候父級div就是一個 BFC

外邊距摺疊

在CSS中，兩個或多個毗鄰的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會發生疊加，這種形成的外邊距稱之為外邊距疊加。

形成外邊距摺疊有幾個關鍵要素：毗鄰、兩個及以上、垂直方向、正常流

毗鄰：對於父子元素，他們自己是緊挨著的，子元素沒有被父元素 border padding 給隔開，這樣他們就是毗鄰的；對於兄弟元素，他們的盒模型是挨著一起的就是毗鄰的。

正常流：除去浮動定位、絕對定位，也就是正常的文檔流。

這是個非常常見的問題。解決方案也挺多的，無外乎打破三要素中的一個即可，比如採用浮動、絕對定位、inline-block、添加空白的flex元素、還有就是我們接下來要說的構建 BFC

.con {
    width: 300px;
    background-color: antiquewhite;
}

.one {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: seagreen;
}

.two {
    height: 100px;
    margin-top: 10px;
    background-color: slateblue;
}
<div class="con">
    <div class="one"></div>
    <div class="two"></div>
</div>

float2

div one 的 margin-top: 10px; 導致父級向下移動 10px，這是父子元素的外邊距摺疊，我們用構建 BFC 的方式解決。

.con {
    width: 300px;
    background-color: antiquewhite;
    overflow: auto; /* 構建BFC */
}

效果如下：

float3

那麼對於毗鄰的兄弟節點，方法也是一樣，把一個節點構建成 BFC 即可

<div class="con">
    <div class="one"></div>
    <div style="overflow: auto;">
        <div class="two"></div>
    </div>
</div>

float4如何創建

方法很多，可根據實際情況選擇

根元素(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 可以清除浮動，可以解決外邊距摺疊兩問題。

BFC 可通俗理解成是構建一個獨立的區域，可包含區域內的所有元素，包括浮動元素，與外界互不打擾的一個空間。

參考文檔：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

https://tech.youzan.com/css-margin-collapse/

https://www.cnblogs.com/libin-1/p/7098468.html

absolute 是相對哪個元素定位的

元素定位在 css 算是基礎中的基礎了，網上有很多介紹的文章，但我覺得 mdn 的講解就已經非常清晰 position - CSS（層疊樣式表） | MDN

position 屬性取值有 relative, absolute, fixed 或 sticky，元素設置了其中之一的就是定位元素。（換句話說，除static以外的任何東西）。

目前定位類型有四類：

相對定位元素（relatively positioned element）是計算後位置屬性為 relative 的元素。

絕對定位元素（absolutely positioned element）是計算後位置屬性為 absolute 或 fixed 的元素。

粘性定位元素（stickily positioned element）是計算後位置屬性為 sticky 的元素。用於滑動中固定某一元素，這個目前有些兼容性問題。

相對定位

position: relative;  元素按照文檔流的布局放置元素，它的用處是可以在不改變布局方式的前提下調整元素位置，使用 top bottom left right

絕對定位

position: absolute;  絕對定位的元素脫離了文檔流，不會佔據文檔流的空間，感覺就像在文檔流的上一層。

絕對定位的元素可以使用 top bottom left right 調整布局位置，在沒有設置這幾個值的時候，絕對定位元素顯示還是保持在當前的位置。如果設置了值，那麼這個元素就需要找到一個錨點，因為已經脫離文檔流，所以需要找到一個參考點，這參考點就是 最近的非 static 祖先元素 ，可以是 relative, absolute, fixed，一直往上到 body 元素。

所以常常會採用 relative + absolute 的組合布局方式，當然也可以利用絕對定位元素在當前位置顯示的特性結合 margin 來使用。

絕對定位還有個用處，就是避免觸發回流，因為脫離正常的文檔流，因此對於頻繁回流的元素可以採用絕對定位。

z-index

在說一個跟定位常一起使用的 z-index ，這個值表示創建一個新的顯示層級，值大的在最上層。

多個絕對定位元素會按照後一個覆蓋前一個的顯示方式，而且絕對定位元素會覆蓋文檔流中的元素，那麼只有在元素位置不當便調整順序的時候才只用，正常情況下不建議設置值，畢竟多使用一個元素，就容易出現詭異的問題。

DPR

先看看幾個概念

像素

是圖像顯示的基本單位，類似於米是長度的一個單位一樣。

1像素是顯示的最小區域。

物理像素

設備的物理像素，每個設備的物理像素都是廠家固定好的，

css像素

這個主要用於我們編碼用的，約定好的在顯示層上的單位，screen.width 可獲取到邏輯編碼中的窗口最大像素。

再看看 DPR

在 iphone 沒有搞事之前，物理像素和邏輯像素是相等的，但如今高清屏已經快成標配，可顯示的像素點越多越清晰，導致設備上每英寸可顯示的像素點（PPI）越來越多，這樣一來，屏幕的大小沒變，css的邏輯像素沒變，可物理像素卻變多了，一個邏輯像素要對於多個物理像素，這兩者的比例就是 DPR

DPR = 物理像素/css邏輯像素

可通過 window.devicePixelRatio 獲取設備的 DPR

參考文檔：
https://www.cnblogs.com/xiaohuochai/p/5494624.html

1px 問題了解麼？有什麼解決方案？

在高清屏中 DPR 可能會是 2 或者 3 ，那麼原先 1px 像素的線在高清屏下就佔了2個或者3個物理像素，導致線看著比較粗。

解決：

使用偽類，設置 border 1px scale(0.5)

設置 meta initial-scale 根據DPR設置初始值

偽類 + transform: scaleY(0.5);

/* 偽類 + transform: scaleY(0.5); */
.px1 {
    position: relative;
}

.px1:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border: 1px solid black;
    color: black;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
}

link 和 @import 的區別

看到這個問題我沒反應過來，import 不是js裡的東西嗎？回來查了資料才明白 css 還可以這麼玩。

@import 根據字面意思就知道是用於導入其他樣式文件的，兩者的區別如下：

從屬關係區別

link:是 html 提供的標籤，不僅可以加載css樣式表，還可以定義 RSS、rel 連接屬性等。

@import:是 css 提供的語法規則，用於導入樣式表。

加載順序區別

link：文件是同時加載。

@import 引入的 CSS 將在頁面加載完畢後被加載。

兼容性問題

link 不存在兼容性問題；@import 可能會有兼容性問題

display:none與visibility：hidden的區別？

效果都是隱藏元素

display:none 在文檔布局中不在分配空間（節點），值變化會導致回流和重繪

visibility：hidden 保留渲染樹中的節點，佔用空間，會導致重繪

inline-block block 的區別

這兩個分別是：行內塊級元素和塊級元素，順帶介紹下行內元素

塊級元素

塊級元素的特點：元素總是在新的一行開始，盒模型的屬性均可以控制，div p ul ol ... 等元素默認就是塊級元素，也可以通過 display: block; 設置為塊級元素。

行內元素

行內元素的特點：和其他元素在同一行，元素不可以設置高度和寬度，取決於內容的寬高度，默認的行內元素有 span a lable input img ...，也可通過 display: inline; 設置為行內元素。

行內塊級元素

名字看上去就是上面兩者的結合，同時具備了兩個的特性。通過 display: inline-block; 設置。

但是兩個相鄰的 inline-block 元素中間有空格就會出現間隙，解決辦法可以粗暴的移除空格和換行，還有設置字體大小為 0 ， 因空格也是字符，所以可給父級設置 font-size:0、letter-spacing:-3px

rem em vh vw 的區別

這幾個單位常用於自適應布局

rem em

rem : css3 新增，相對於根節點的字體大小的一個單位，eg: 1rem * font-size:20px = 20px

在開發前先制定好一個基準，比如說以 375 寬的設計稿作為規範，設定這個寬度下的字體大小為 375/10 = 37.5 ,那設計稿下 60px 的寬對應的 rem 就是：60px = (60/37.5)rem

若使用css預處理，可以寫一個轉換函數

@function px2rem($px) {
    @return ($px/37.5) + rem;
}

em : 與rem類似，但是相對於父級元素的字體大小。

vw vh

相對於視口寬高的百分比值

vw : 1vw 等於視口寬度的1%

vh : 1vh 等於視口高度的1%

vmin : 選取 vw 和 vh 中最小的那個

vmax : 選取 vw 和 vh 中最大的那個

//iPhone 6尺寸作為設計稿基準
$vm_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

單行、多行文本居中

單行：

設置 line-height 跟 height 相同

flex 布局，設置交叉軸對齊方式

多行：

flex 布局 display: flex;align-items: center;

table 布局 ，外層使用 display: table; 內層使用 vertical-align: middle;display: table-cell; table-cell 可以將元素表現與單元格 td 類似，在對單元格設置居中，不過會破壞其他屬性，比如浮動、margin 等

.text{
    background-color: sandybrown;
    width: 200px;
    height: 300px;
    display: table;
}
.cell{
    vertical-align: middle;
}
<div class="text">
    <div class="cell">
        今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.
    </div>
</div>

設置外層 line-height 等於外層高度，文本一行的高度就等於容器的高度，內層使用 display: inline-block;vertical-align: middle;line-height: 17px; 內層設定為行內塊級元素，設置行內元素的對齊方式是 middle，在對元素重新設定行高

.text {
    background-color: sandybrown;
    width: 200px;
    height: 300px;
    line-height: 300px;
}
.cell {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}
<div class="text">
    <div class="cell">
        今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.今天天氣很好，好想出去玩.
    </div>
</div>

css 選擇器和優先級

id選擇器(#myid)、類選擇器(.myclassname)、標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child），簡單介紹下面幾個：

a > b :子類選擇器，只有直接的子類才生效

a + b:毗鄰選擇器，只有毗鄰的下一個元素才生效

a ~ b :後續選擇器，a元素之後的所有同級的b元素

[attribute] :屬性選擇器,含有這個屬性的元素才生效

:first-of-type : 選擇器匹配元素其父級是特定類型的第一個子元素

選擇器權重

優先級排序：!important > 行內樣式 > ID > 類、偽類、屬性 > 標籤名 > 通配符 > 繼承

權重值如下，每個都是相差一個量級

元素和偽元素選擇器：1

class選擇符：10

id選擇符：100

內聯樣式：1000

英文換行哪些屬性可以繼承

元素外觀相關的屬性可以繼承，比如字體相關的屬性、文本系列的屬性。布局相關的屬性不可以繼承，具體屬性名就不列舉了。

flex 常見有屬性

問這種屬性名稱的真是尷尬，平常都是自動補全的，哪記得住呀…

容器上的屬性

flex-direction : 主軸方向

flex-wrap : 換行的方式

flex-flow ：上面兩個的簡寫

justify-content : 主軸的對其方式

align-items : 交叉軸的對齊方式

align-content : 多根主軸的對齊方式

元素上的屬性

order : 排序值，數值越小越靠前

flex-grow : 項目放大的比例，默認為 0 不放大

flex-shrink : 項目縮小的比例，默認 1

flex-basis : 屬性定義了在分配多餘空間之前，項目佔據的主軸空間，如果元素定義了寬，那麼寬度將無效 默認 auto

flex ：以上三個的簡稱

小結

css 相關的問的相對比較少些，一般會以一個具體場景作為前提展開問。

覺得有幫助的小夥伴，求求點個讚呀~~