前端高頻面試題 CSS篇

經過從網上看到的面經，總結的一些高頻的前端CSS面試題，有不少不會，因而找資料，並經過代碼實現，本身提供了一些參考答案。

目錄

1.怎樣會產生浮動？
2.如何清除浮動？
3.盒子模型，以及IE和其餘瀏覽器的卻別？
4.CSS3新特性有哪些？
5.em 和 rem 的區別？
6.重排和重繪？
7.行元素和塊元素？
8.border-box 和 content-box 的區別？
9.僞元素和僞類？
10.unset?
11.CSS選擇器優先級？
12.水平垂直居中佈局？
13.兩列等高佈局？

1.怎樣會產生浮動？

某一個元素的float屬性設置爲left或者right，這個元素就會脫離文檔流，左右浮動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。

2.如何清除浮動？

方法比較多，這裏介紹三種典型的方法：
a.在與浮動元素的同級元素中加一個空的div，並將其css屬性設置爲

.clear1 {
   clear: both;
}

優勢：通俗易懂，容易掌握
缺點：添加了太多空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅定不能忍受的，因此你看了這篇文章以後仍是建議不要用了吧。
b.父元素css屬性設置爲

.ovef2 {
   overflow: auto; 
   zoom:1;
}

優勢：不存在結構和語義化問題，代碼量極少
缺點：overflow爲hidden時內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；overflow爲auto時會產生firefox和IE的兼容性問題。
c.父元素使用:after 僞元素

.clear-fix3 {
    zoom:1
}
.clear-fix3::after {
    display: block;
    visibility: hidden;
    clear:both;
    height:0;
    content:''
}

優勢：簡潔，沒有其餘問題
缺點：代碼量看似略大

3.盒子模型，以及IE和其餘瀏覽器的區別？

盒子模型由內往外分別包括：
content、padding、border、margin

上圖爲標準W3C盒子模型示意圖，它的
width = content的寬度
height = content的高度
而IE盒子模型的
width = (content + padding + border) 的寬度
height = (content + padding + border) 的高度

4.CSS3新特性有哪些？

這個題答案就比較多了，建議你們回答一些比較經常使用的特別是本身用過的新特性，下面我簡單介紹一些：
a.css選擇器
(1）E:last-child 匹配父元素的最後一個子元素E。
(2）E:nth-child(n)匹配父元素的第n個子元素E。
(3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。
b.加載字體
@font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

@font-face {   
    font-family: Runic;   
    src:url(RUNICMT0.eot);   
}

c.圓角
設置border-radius屬性
d.設置陰影
box-shadow / text shadow
屬性值：水平移動距離 垂直移動距離 陰影距離 顏色

.shadow {
    box-shadow: 2px 2px 2px black;
    text-shadow: 2px 2px 2px black;
}

e.多列布局
column-count 列數
column-gap 列之間的間隔大小
column-rule 列之間的分隔線

.column-container {
    column-count: 3;
    column-gap: 35px;
    column-rule: 1px solid gray;
}

f.背景顏色漸變效果
linear-gradient(方向，初始顏色，結束顏色)

.gradient_bg {
    background-image : linear-gradient(to top, red, yellow);
}

g.彈性盒子模型
即flex佈局，這裏不詳細說明了，有興趣的能夠看：runboo上面的教程
h.過渡動畫效果
transition:過渡屬性 動畫時間 動畫類型 動畫延遲時間

.transition-demo {
    transition:border-color .5s ease-in .1s;
}

i.動畫效果
animation:動畫名稱 動畫時間 動畫類型 動畫延遲時間
@keyframes 動畫名稱 { 中間狀態 }

.animation-demo {
    animation:mymove .5s ease-in .1s;
}
@keyframes mymove {
    0% { opacity : 0 }
    100% { opacity : 1 } 
}

5.em 和 rem 的區別？

em的值並非固定的， em會繼承父級元素的字體大小。看一下例子：

<style>
    .font-father {
      font-size: 1.5em; /* 實際爲24px */
    }
    .font-son {
      font-size: 1.5em; /* 實際爲36px */
    }
</style>
<div class='font-father' >
    <a>hello </a>
    <span class='font-son' >boy</span>
</div>

而rem只會繼承根元素root的字體大小，因此把上例中em都改爲rem，就成了下圖：

6.重排和重繪？

重繪：當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知 render 從新描繪相應的元素。
重排：當變化涉及元素佈局 (如 width), 瀏覽器則拋棄原有屬性, 從新計算並把結果傳遞給 render 以從新描繪頁面元素。
根據瀏覽器的加載順序：（因此重排必定會引發重繪）
一、構建DOM樹（parse）：渲染引擎解析HTML文檔，首先將標籤轉換成DOM樹中的DOM node（包括js生成的標籤）生成內容樹（Content Tree/DOM Tree）；
二、構建渲染樹（construct）：解析對應的CSS樣式文件信息（包括js生成的樣式和外部css文件），而這些文件信息以及HTML中可見的指令（如），構建渲染樹（Rendering Tree/Frame Tree）；
三、佈局渲染樹（reflow/layout）：從根節點遞歸調用，計算每個元素的大小、位置等，給出每一個節點所應該在屏幕上出現的精確座標；
四、繪製渲染樹（paint/repaint）：遍歷渲染樹，使用UI後端層來繪製每一個節點。

7.行內元素(內聯元素)和塊級元素有哪些，區別是什麼？

行內元素：
a、b、small、strong、i、img、input、textarea、span
塊級元素：
標題類h一、h2...，列表類ul、ol、li，表格類table、tbody、thead、th...，段落p、div
區別:
a.位置佔據上不一樣
行內元素會在一條直線上排列，都是同一行的，水平方向排列
塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。
b.包含關係不一樣
塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。
c.盒模型屬性上不一樣
行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效
進一步提問：img是行內元素爲什麼能夠設置寬高？
由於img是置換元素，瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。例如瀏覽器會根據標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看HTML代碼，則看不到圖片的實際內容；又例如根據標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。(這些元素擁有內在尺寸 內置寬高 他們能夠設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。)

8.border-box 和 content-box 的區別？

這兩個值是CSS3中新增長了box-sizing屬性的取值，簡單來講border-box表明IE盒子模型，content-box表明W3C盒子模型

9.僞元素和僞類？

僞元素：
在不增長dom結構的基礎上添加的一個元素，在用法上跟真正的dom無本質區別。普通元素能實現的效果，僞元素均可以。有些用僞元素效果更好，代碼更精簡。常見的僞元素選擇器包括：
:first-letter 選擇元素文本的第一個字（母）。
:first-line 選擇元素文本的第一行。
:before 在元素內容的最前面添加新內容。
:after 在元素內容的最後面添加新內容。
僞類分爲兩類：
狀態僞類：
基於元素當前狀態進行選擇的。在與用戶的交互過程當中元素的狀態是動態變化的，所以該元素會根據其狀態呈現不一樣的樣式。當元素處於某狀態時會呈現該樣式，而進入另外一狀態後，該樣式也會失去。常見的狀態僞類主要包括：
:link 應用於未被訪問過的連接；
:hover 應用於鼠標懸停到的元素；
:active 應用於被激活的元素；
:visited 應用於被訪問過的連接，與:link互斥。
:focus 應用於擁有鍵盤輸入焦點的元素。
結構性僞類：
利用dom樹進行元素過濾，經過文檔結構的互相關係來匹配元素，可以減小class和id屬性的定義，使文檔結構更簡潔。常見的包括：
:first-child 選擇某個元素做爲第一個子元素；
:last-child 選擇某個元素做爲最後一個子元素；
:nth-child() 選擇某個元素做爲一個或多個特定的子元素；
:nth-last-child() 選擇某個元素做爲一個或多個特定的子元素，從這個元素的最後一個子元素開始算；

10.unset?

若是該屬性是默認繼承屬性，該值等同於 inherit
若是該屬性是非繼承屬性，該值等同於 initial
如下是默認繼承屬性：
全部元素可繼承：visibility 和 cursor
內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
表格元素可繼承：border-collapse

11.CSS選擇器優先級？

!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
同一優先級的選擇器，後寫的會覆蓋以前的。

12.水平垂直居中佈局？

方案一：flex佈局

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

方案二：position transform

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

13.兩列等高佈局？

方案一：flex佈局

.equalHeight-flex {
    display: flex;
}

方案二：浮動佈局

.equalHeight-float-father {
    overflow: hidden;
}
.equalHeight-float-son {
    float: left;
    width: 300px;
    margin-bottom:-2000px;
    padding-bottom:2000px;
}