前端面試題及答案 - CSS篇

這篇文章並非最全的前端面試題（沒有最全，只有更全），只是針對本身面試過程當中遇到的一些難題、容易忽略的題作一個簡單的筆記，方便後面有面試須要的小夥伴們借鑑，後續內容會不定時更新，有錯誤之處但願你們不吝指出。

一、CSS3的新特性

• 實現圓角（border-radius）
• 陰影（box-shadow）
• 文字加特效（text-shadow）
• 線性漸變（gradient）
• 旋轉（transform）
• 媒體查詢，多欄佈局

具體
二、CSS中 link 和@import 的區別

• link屬於HTML標籤，而@import是CSS提供的;
• 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
• import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
• link方式的樣式的權重 高於@import的權重.

三、介紹一下CSS的盒子模型

經過css3新增的屬性 box-sizing: content-box | border-box分別設置盒模型爲標準模型（content-box）和IE模型（border-box）詳細介紹

• 兩種盒模型：標準W3C盒模型、IE盒模型。

• 區別對比：(注意藍色背景區域大小)

  1. 標準盒模型元素寬度width=content=100px，高度計算相同
     
  2. IE模型元素寬度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。
     

四、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

• 選擇符

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li:nth-child）

• 繼承

1. 可繼承的樣式： font-size font-family color, text-indent;
2. 不可繼承的樣式：border padding margin width height;

• 新增僞類

p:first-of-type 選擇屬於其父元素的首個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

• 優先級算法規則:優先級就近原則，同權重狀況下樣式定義最近者爲準;

!important >  id > class > tag  
important 比 內聯優先級高,但內聯比 id 要高

五、爲何要清除浮動？如何清除？
引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法：
一、利用clear清除浮動

.son {
        clear: left | right | both | auto
    }

二、在父元素後面額外添加標籤

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>

三、父元素上使用after僞類

#parent:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
}

四、利用overflow清除浮動

#parent {
    overflow: auto;
    display: inline-block;
}

六、實現垂直居中的幾種方法

<div class="parent">
    <div class="son"></div>
</div>

• margin: auto

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absoulte;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}

• margin-left、margin-top負值法(需知道子元素width、height)

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absolute;
        width: 100px;
        height: 160px;
        left: 50%;
        top: 50%;
        //margin-top: translateY(-50%);
        //margin-left: translateX(-50%);
        margin-top: -80px;
        margin-left: -50px;
    }
}

• flex

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

• table-cell(未脫離文檔流)

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

• 前端面試題及答案 - 瀏覽器篇
• 前端面試題及答案 - HTML篇
• 前端面試題及答案 - JS篇
• 前端面試題及答案 - 性能優化篇