挑戰一輪大廠後的面試總結 (含六個方向) - css 篇

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

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

先說下這些題目難度，大部分都是基礎題，由於這段經歷給個人感受就是，無論你面試的是高級仍是初級，基礎的知識必定會問到，甚至會有必定的深度，因此基礎仍是很是重要的。html

我將根據類型分爲幾篇文章來寫：vue

面試總結：javascript 面試點彙總(已完成) 強烈你們看看這篇，面試中 js 是大頭java

面試總結：nodejs 面試點彙總(已完成)node

面試總結：瀏覽器相關面試點彙總(已完成)css3

面試總結：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 高度，父級不定高，很明顯父級高度沒有被撐開。

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

這時候父級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>
複製代碼

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

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

效果以下：

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

<div class="con">
    <div class="one"></div>
    <div style="overflow: auto;">
        <div class="two"></div>
    </div>
</div>
複製代碼

如何建立

方法不少，可根據實際狀況選擇

根元素(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 可通俗理解成是構建一個獨立的區域，可包含區域內的全部元素，包括浮動元素，與外界互不打擾的一個空間。

參考文檔：

developer.mozilla.org/zh-CN/docs/…

tech.youzan.com/css-margin-…

www.cnblogs.com/libin-1/p/7…

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

參考文檔： www.cnblogs.com/xiaohuochai…

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

英文換行

word-break: break-all 對字符起做用，斷開單詞，下個字母自動到下一行。主要解決了長串英文的問題。
word-wrap:break-word 只對英文起做用，以單詞做爲換行依據

哪些屬性能夠繼承

元素外觀相關的屬性能夠繼承，好比字體相關的屬性、文本系列的屬性。佈局相關的屬性不能夠繼承，具體屬性名就不列舉了。

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 相關的問的相對比較少些，通常會以一個具體場景做爲前提展開問。

以爲有幫助的小夥伴，求求點個贊呀~~

最後仍是要在給你們推薦我吐血整理的面試總結：javascript 面試點彙總強烈你們看看這篇，面試中 js 是大頭。