本文大部分問題來源：50道CSS基礎面試題（附答案），外加一些面經。 我對問題進行了分類整理，並給了自己的回答。大部分知識點都有專題鏈接（來源於本博客相關文章），用於自己前端CSS部分的查漏補缺。雖作為一個面試資料，但感覺也能幫助前端新手梳理CSS的知識點。 開胃餐-兩道常見考題 盒子模型 樣式與選 ...
本文大部分問題來源：50道CSS基礎面試題（附答案），外加一些面經。
我對問題進行了分類整理，並給了自己的回答。大部分知識點都有專題鏈接（來源於本博客相關文章），用於自己前端CSS部分的查漏補缺。雖作為一個面試資料，但感覺也能幫助前端新手梳理CSS的知識點。
開胃餐-兩道常見考題
盒子模型
樣式與選擇器
CSS3
包含塊
BFC
中插小點
定位position
display與visibility
float
flexbox
overflow
響應式設計
CSS優化
應用
▶開胃餐x2
用純CSS創建一個三角形的原理是什麼？
圖1為border最普遍的用法，border: solid 10px #ffb6b9;。用多了你會不會就覺得border是由四個矩形邊框拼接而成，但其實是錯的。實際上，元素的border是由三角形組合而成，為了說明這個問題，我們繼續看：
圖2，我們為邊框四個方向設置不同顏色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，並加大邊框寬度。
圖3，我們進一步將元素的寬高設為0。我們發現，此時元素由上下左右4個三角形組成。
為了實現一個三角形，那就很簡單了，我們只需將其它border邊的顏色設置為白色或者透明色即可
圖4，border-color: transparent transparent #bbded6;，設置上三角，左右三角為透明，那麼我們就能看到一個圖4的三角形了。
.triangle {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent #bbded6;
}
水平垂直居中
個人常用的水平垂直居中方法，具體的可以戳鏈接我寫的很全，在本文里只提供思路。
水平垂直居中無非分成內聯元素的居中和塊級元素的居中。最簡單的方法就是使用flex佈局，但要註意瀏覽器相容性問題，包括後面提到的transform。
內聯元素的水平和垂直居中分別可以使用text-align: center;和line-height解決
塊級元素的水平和垂直居中又需要考慮這個元素的寬高是否固定，如果固定則定位和margin的auto屬性就能解決。例：
#container{
width: 1000px;
height: 1000px;
position: relative;
}
#center{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
還有一種方法，拿水平居中來舉例：
step1：left:50%; 將子元素定位到父元素1/2寬的位置
step2：margin-left:-1/2自身寬 將子元素向左移動自身寬度的一半
當寬高不固定的時候，也可以使用transform:translateX(-50%)來實現step2。
由於使用了float後，浮動元素脫離了普通文檔流，因此塊級元素常用的margin:auto無效了。改用定位的方法（即上面提到的step1、step2）
好，正文開始。
▶盒子模型
介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
每一個盒子都被劃分為四個區域：內容區、內邊距區、邊框區、外邊區。
樣式設置里with和height指的內容區的寬高。
標準盒子模型：padding、border和margin不會影響content的尺寸，但是會增加元素框的總尺寸。
IE盒子模型：內容區大小包含了padding、border。
box-sizing屬性？
用來控制元素的盒子模型的解析模式，預設值為content-box
context-box：聯想W3C的標準盒子模型。元素盒子的width和height屬性指的是內容盒子，這時候添加邊框和內邊距不會影響內容盒子的大小，但會導致整個元素盒子變大。
border-box：聯想IE傳統盒子模型。width和height屬性的值將會包含padding和border，從視覺上規定了箱子的大小。
▶樣式與選擇器
為什麼要初始化CSS樣式
因為瀏覽器的相容問題，不同瀏覽器對有些標簽的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
CSS 預處理器
用的最多的：Less、Scss、Stylus
CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的相容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
CSS優先順序演算法如何計算？
優先順序：!important > style > id > class、屬性、偽類 > 元素、偽元素
-
!important聲明的樣式優先順序最高，如果衝突再進行計算。
-
如果優先順序相同，則選擇最後出現的樣式。
-
繼承得到的樣式的優先順序最低。
CSS選擇器有哪些？
CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）
CSS那些屬性可以繼承？
可繼承的屬性：visibility、color、cursor、zoom、direction（特殊：<a>標簽的字體顏色不能被繼承）
字體全部都可以繼承：font、font-style、font-variant、font-weight、font-size、font-family、font-stretch
文本除了vertical-align，其它都可繼承：text-align、text-justify、text-indent、line-height、word-wrap等等
文本裝飾：text-underline-position、text-shadow
li相關：list-style、list-style-image、list-style-position、list-style-type
不可繼承的樣式：定位、佈局、尺寸、內邊距、外邊距、背景、邊框相關等等
::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用
:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的首碼使用的是單冒號語法，但隨著Web的進化，在CSS3的規範里，單冒號表示偽類，偽元素的語法被修改成使用雙冒號，成為::before ::after。偽元素並不存在與dom中，只存在於頁面之中。
::after用來創建一個偽元素，作為已選中元素的最後一個子元素。通常會配合content屬性來為該元素添加裝飾內容。這個虛擬元素預設是行內元素。
::before 創建一個偽元素，其將成為匹配選中的元素的第一個子元素。
瀏覽器是怎樣解析CSS選擇器的？
瀏覽器在碰到HTML中指向CSS文件的鏈接時，會獲取並解析CSS文件。CSS文件會被瀏覽器轉為CSS對象模型。不僅是外部CSS，內部style元素或行內style屬性中的CSS也會被解析並添加到這個對象模型中。這個對象模型事宜個樹形結構，包含頁面中樣式的層次結構。
每個CSS選擇符都會匹配一個DOM節點，然後瀏覽器會基於層疊、繼承和特殊性來計算每個DOM節點的最終樣式。
▶CSS3
CSS3新增偽類有那些?
p:first-of-type 選擇屬於其父元素的第一個出現的p
p:last-of-type 選擇屬於其父元素最後一個出現的p
p:only-of-type 選擇屬於其父元素唯一的p元素
p:only-child 選擇屬於其父元素的唯一子元素（沒有任何兄弟元素的p元素）
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制項的禁用狀態。
:checked 單選框或覆選框被選中。
CSS3有哪些新特性？
CSS3參考手冊屬性列表（鏈接中紫色鏈接表示該屬性在CSS3有修改或者增加了新的屬性值；橙色鏈接表示該屬性是CSS3新增屬性 ）
下麵列出容易記的幾個
- 媒體查詢（@media (min-width:600px)）
- 嵌入web字體（@font-face）
- 過渡（transition）與動畫（animation）
- 【陰影】box-shadow
- 【邊框】創建圓角（border-radius）、邊框圖片（border-image）
- 【背景】背景圖片尺寸（background-size）、背景圖片定位（background-origin）、背景裁剪（background-clip）、多重背景（background-image:url(1.jpg),url(2.jpg);）
- 【文字】允許長單詞換行（word-wrap:break-word）、文字陰影（text-shadow）
- 【顏色】rgba和透明度opacity
- 【漸變】線性漸變（gradient）
- 【佈局】flex、grid、多欄佈局
- 【盒模型】box-sizing
▶包含塊
包含塊的確定
確定一個元素的包含塊的過程完全依賴於這個元素的 position 屬性：
-
static、relative、sticky：包含塊可能由它的最近的祖先塊元素的內容區的邊緣組成。也可能會建立格式化上下文(比如說 table container, flex container, grid container, 或者是block container 自身)。
-
absolute： 包含塊就是由它的最近的 position 的值不是 static 的祖先元素的內邊距區的邊緣組成。
❗註意以上兩個，一個是內容區、一個是內容邊距區
- fixed：在連續媒體的情況下包含塊是視窗視圖（viewport）,分頁媒體下的情況下包含塊是分頁區域(page area)。
如果position值是absolute或fixed，包含塊也可能是由滿足以下條件的最近父級元素的內邊距區的邊緣組成的：
註意：根元素()所在的包含塊是一個被稱為初始包含塊的矩形。
元素豎向的百分比設定是相對於容器的高度嗎？
如果某些屬性被賦予一個百分值的話，它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性：
-
height、top、bottom：通過包含塊的 height 的值。如果包含塊的 height 值會根據它的內容變化，而且包含塊的 position 屬性的值被賦予 relative 或 static ，那麼，這些值的計算值為 auto。
-
width、left、right、padding、margin 這些屬性由包含塊的 width 屬性的值來計算它的百分值。
這裡特別強調padding和margin講的是上下左右四個都是根據包含塊的width
▶BFC
對BFC規範(塊級格式化上下文：block formatting context)的理解？
BFC指的是塊級格式化上下文，簡單的來說，BFC就是創建一個div盒子或者給已存在的盒子激活BFC，盒子內部的元素佈局不影響盒子外部的元素。也就是所謂的相互隔絕，互不影響。
常見的創建BFC方式
- float：none以外的屬性值。如：left 、 right
- overflow：visible以外的屬性值。如：hidden、auto 、 scroll
- position屬性值為：absolute、fixed（只有這兩個可以）
- dispaly屬性值為：inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了
BFC應用
詳細解決方案戳上面給的鏈接。
- 解決margin重疊
- 解決使用float時浮動元素和非浮動元素重疊（也是一種清除浮動的方法啦）
- 解決使用float時容器高度塌陷
▶中插小點
你對line-height的理解？
line-height指的是行盒子的總高度，更通俗的叫法是行間距。行盒子的整體行高減去font-size，得到的值平分，就是裡面文本的上下空白位置。
可以給line-height設置像素值、百分比值或em值，但要註意body元素的所有子元素都會繼承line-heoght的計算值，但無單位的值就不會這樣。因此，設置，line-height:1.5，那麼子元素繼承的是一個繫數，永遠與自己的font-size成比例。一般取值在1.2~1.5範圍內。
將行高設置為height的值，可以實現文本的垂直居中。
手動寫動畫，最小時間間隔？
17ms，紅寶書原話：
大多數電腦顯示器的刷新頻率是60HZ，大概相當於每秒重繪60次。大多數瀏覽器都會對重繪操作加以限制，不超過顯示器的重繪頻率，因為即使超過那個頻率用戶體驗也不會有提升。因此，最平滑動畫的最佳迴圈間隔是1000ms/60，大概相當於17ms。以這個迴圈間隔重繪的動畫是最平滑的，因為這個速度是最接近瀏覽器的最高限速。為了適應17ms的迴圈間隔，多重動畫可能需要加以節制，以便不會完成太快。
網頁中應該使用奇數還是偶數的字體?
偶數。
- 相對來說偶數字型大小比較容易和頁面中其他部分的字型大小構成一個比例關係。
- 低版本的瀏覽器ie6會把奇數字體強制轉化為偶數，即13px渲染為14px。
- Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），於是略顯稀疏。
常見的相容性問題
CSDN瀏覽器相容問題，這個人寫的很全。我下麵列幾個我能記住的，
