通過從網上看到的面經，總結的一些高頻的前端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 以重新描繪頁面元素。
根據瀏覽器的加載順序：（所以重排一定會引起重繪）
1、構建DOM樹（parse）：渲染引擎解析HTML文檔，首先將標簽轉換成DOM樹中的DOM node（包括js生成的標簽）生成內容樹（Content Tree/DOM Tree）；
2、構建渲染樹（construct）：解析對應的CSS樣式文件信息（包括js生成的樣式和外部css文件），而這些文件信息以及HTML中可見的指令（如），構建渲染樹（Rendering Tree/Frame Tree）；
3、布局渲染樹（reflow/layout）：從根節點遞歸調用，計算每一個元素的大小、位置等，給出每個節點所應該在屏幕上出現的精確坐標；
4、繪制渲染樹（paint/repaint）：遍歷渲染樹，使用UI後端層來繪制每個節點。

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

行內元素：
a、b、small、strong、i、img、input、textarea、span
塊級元素：
標題類h1、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;
}

前端高頻面試題 CSS篇