摘要：背景想想自己為什么要寫這個，難道不是因為這篇道基礎面試題附答案文章最近被轉載的多，比較多而湊熱鬧蹭熱點顯然，肯定是因為這樣我才打算寫的。繼承得到的樣式的優先級最低。

想想自己為什么要寫這個，難道不是因為這篇《50道CSS基礎面試題（附答案）》文章最近被轉載的多，比較多而湊熱鬧蹭熱點？顯然，肯定是因為這樣我才打算寫的。而且還有就是，我的公眾號也很久沒有更新了，微信說長期不更新會關掉公眾號的，怕……

對于 CSS 方面的工作以及跟 CSS 有關的東西，我已經有一些時間沒有接觸了，自從離開上家公司到了目前所在的公司，處理小程序方面的事情以后，有關 CSS 的內容我都只是大概瞄一下，沒去過多思考。看了這篇文章后，發覺自己再不思考，真的是要廢了。

根據這篇文章的題目以及答案，再結合自己的一些經歷以及想法，稍微理一理，不對的請噴，畢竟我所考慮的點還是很有限的。

問題直接復制過來，那篇文章的答案引用部分，在引用的答案下面附帶我個人的一些看法。

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

首先拋開所謂的標準不說，因為這個標準是 W3C 那邊制定后跟各大廠商溝通去做統一的。在這個答案中，如果按照嚴格來說，首先會問基本怎么計算，就像上面這個答案，不過需要注意一下順序。

標準盒模型的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right，這樣寫可能會顯得比較長，按照上面的答案來說的話，或許 width + padding + border + margin 就好了，附帶說一下除了 width 以外是有左右兩邊的。

怪異模式的盒模型寬度 = （width + padding + border） + margin 整體來說跟標準盒模型是相類似的，主要是 width + padding + border 這三者算在一起了。

標準的盒模型是基于 doctype 正確書寫的情況下，并且是高于 IE6 的瀏覽器才會有的，如果是低于 IE6 的瀏覽器，就算是正確的 doctype 的書寫情況下也是進入怪異模式的；在 IE 瀏覽器中如果寫錯了 doctype 或者是 doctype 之前有其他字符，那么可能就讓 IE 進入怪異模式，從而導致瀏覽器解析元素盒模型出現問題，比如：

這種情況下就會讓低版本的 IE 進入怪異模式，導致的可能不僅僅只是盒模型計算問題，還有可能是其他的一些情況，早年之前有不少公司直接利用這種方式對低版本和高版本的瀏覽器做樣式上的區別操作對待。

附帶一條 URL：DOCTYPE 與瀏覽器模式分析 http://www.w3help.org/zh-cn/casestudies/002 供參考學習。

根據以上可以再問一下，當 width: 0; padding: 0 100px; border: 10px solid red; margin: 0 50px; 的時候，這個盒子里有內容跟沒內容，在標準盒模型和怪異模式的盒模型中有什么區別？

根據 box-sizng 改變的盒模型的計算方式，跟這個標準盒模型以及怪異模式的盒模型的計算方式有什么區別？

用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

box-sizing 主要是用來計算一個元素中的寬度和高度的總和的值，而具體的計算方式將會根據 box-sizing 的屬性值來決定，共有兩個屬性值：content-box 和 border-box。

當我們了解一個元素的盒模型之后，其實對于這個的理解就簡單很多了，比如我們可以這樣理解，然后延伸來說明：

content-box：一個標準模式下的盒模型的計算方式

border-box：一個怪異模式下的盒模型的計算方式

目前來說，低版本的 IE 已經逐漸淡出了大家的視線了，所以，怪異模式和標準模式已經不再有太多人去關注，而且 doctype 也基本上會在各種編輯器中自動添加為 了，但這不代表我們不會在意盒模型的計算，只是不在意怪異模式和標準模式的瀏覽器解析方式。

在現在移動端中，很多時候為了便于盒子的計算，我們會使用 box-sizing: border-box; 來操作，把 padding 和 border 的值計算在一個整體的寬度內，當然了，如果有 margin 的話，還是會額外去考慮的。

注：省略部分原文的答案

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）...

這個問題應該來說是兩個問題，分別是選擇器和屬性的問題，或許可能是考核一個人對 CSS 選擇器的了解程序以及對 CSS 屬性的掌握程度吧。對于這個問題，個人覺得并不會要求把所有的都回答出來，要真都回答出來了，那就可能是背課文了。

這是早之前我整理的一份有關選擇符的圖，大家可以感受一下。

這圖已經好久沒有更新了，可能有一些新的草案沒增加，不過無所謂拉，這么多東西，目前我們能使用到也就那么幾個，也就是原文中所提供的答案。

那么對于哪些屬性可以繼承這個問題，這又是一個很大的話題了，可能需要對 CSS 的所有屬性都進行一次歸整才會有一個相對比較完整的結果。這里我就提一個在原文答案中提到的可繼承屬性中的 font-size 這個屬性。

font-size 的確是可繼承的，但并不是所有的 HTML 元素都會在 body 定義了 font-size 后，把這個文字大小作用在自身標簽上，比如 h1、h2 等一系列標題元素的標簽，還有 input 以及 button 之類的控件元素。

h1 系列的標題元素標簽在瀏覽器默認樣式中是使用了 em 作為單位的，會根據父級的 font-size 而改變（講真，這到底算不算繼承呢，?）

input 系列的控件元素，是直接有瀏覽器默認文字大小，并且是 px 作為單位的（這個又是因為已經被定義過了屬性，但實際上應該算是繼承了吧，只是權重值不夠高，無法覆蓋了 body 的 font-size）

在這個問題中，提到了一個優先級：

優先級（就近原則）：!important > [ id > class > tag ]

不知道是不是跟下一個問題搞混了，但是這里應該是少了一個 style 屬性吧。

!important > style 屬性 > id > class > tag

并且我沒看懂為什么原文的答案這里有一個中括號，是想說代表這個是可選的呢，還是怎么樣呢。

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標簽：1000

這個我覺得吧，并沒有任何問題，不過在面試的時候，提到了這個之后，可能會被問其他相關的問題。

有 11 個元素選擇符的優先級跟 1 個 class 選擇符優先級哪個高呢？

如果有 256 個 class 選擇符，比如 .class001.......class256 {} 那么這個時候是否會大于 一個 id 選擇符呢？

!important聲明的樣式優先級最高，如果沖突再進行計算。
如果優先級相同，則選擇最后出現的樣式。
繼承得到的樣式的優先級最低。

這三點概括的并不是十分全面吧，在面試的過程中，如果面試官提到了有關選擇符優先級的問題，那么可能會給幾個 demo 來讓你想一下哪個文字是什么顏色之類的，最后再問原理。

眾所周知，!important 的優先級是最高，那么如果可能會延伸的問題會有：

p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。

這個可以說的內容其實也挺多的，還是可以參考之前那張圖，具體的哪些是偽元素選擇符哪些是偽類選擇符，根據圖中的所列的情況可以一目了然看到。

隔行換色的實現方式；

:nth-child(an+b) 可以做的 XXX 事情，我們應該怎么實現（具體可能會根據不同面試官給出不同的題目而定）；

::after 和 :after 一個冒號和兩個冒號有什么區別；

諸如此類的問題很多，在 CSS3 中對于選擇符可以玩的情況太多了，就看怎么去想這個問題，但只要掌握了原理，無論面試官怎么去改變，最終原理是差不多的，萬變不離其宗嘛，對吧。

看到這個問題，我能想到的是，果然水平垂直居中的題目會出現啊。

一個 div 元素的居中，這里并沒有提到說這個 div 標簽使用的是什么類型的 display 值，那么對于我們來說可以拓展的方式就非常非常多了。

在原文答案中提到了：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

這里的關鍵點是 width 和 margin，當一個 display: block 的塊級元素有了寬度之后，就可以使用 margin: 0 auto; 的方式讓其水平居中。

那么這里提到的是塊級元素，那么我們可以假設一下，如果我們把 display: block; 換成了：

display: inline;

display: inline-block;

display: table-cell;

在不同的 display 屬性存在的時候，我們還是用 margin: 0 auto; 的方式來居中嗎？

接著就可以通過這個問題延伸出第二個問題：如何居中一個浮動元素。

這里提到的一個點是，居中一個浮動元素，并沒有說是水平居中還是垂直居中，或者是兩者并存，也并沒有說這個浮動元素是否有子元素或者是父元素，那么可操作的方式又有很多了。

如果只是水平居中的話，前提是浮動了，當設置了 float 之后，使用 margin: 0 auto; 方式居中是不可能的了，如果只有一個元素的話，那就只能通過原文答案中提到的通過 position: absolute 和 margin 的結合來處理，當然，這里的 margin 可以換成 transform，當如果換成 transform 的話，可能又會被面試官提到另外一個問題了——性能的問題。

不過呢，僅僅只是水平居中的一個浮動元素的話，如果存在父級元素，可以考慮使用“float: center;”，嗯，這里是加引號的，并不是真的有這個屬性值。

.float_center {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.float_center > .child {
  position: relative;
  left: 50%;
}

部分代碼是這樣的，具體的可以看 https://codepen.io/alexandred... 這里，這個方法在幾年前還是用的比較多的，尤其是在水平居中的一個分頁數控件。

反正不管怎么樣，這個是帶有浮動屬性的元素，進行了居中的操作了。如果有垂直居中的話，就按照原文答案的方式來操作就可以了，畢竟浮動了之后 display 的屬性值是 block，不會改變的。

這個問題我就沒看明白跟上面那個浮動元素中使用了絕對定位方式居中有什么區別了。無非就是 margin 或者 transform 的方式來操作。

對于水平垂直居中的方法，網絡上有很多很多的文章了，不同的方式會帶來不同的效果情況。在日常使用的過程中，我們是會根據頁面的實際需求情況而采用不同的居中方式，原理都差不多，只是實現的方式不同。對于這個題目，總而言之一句話就是：如何做好一個元素的居中。

-----------============ 我是分割線 ============-----------

小小的結束一下，嗯，不是小小的總結，是小小的結束，寫這些東西真累，偷懶花一點時間寫一下，回頭一看，原來才寫 7 點，后面還有那么多，先這樣吧，后面看情況再說了。

而且說實在的，目前這個寫的的內容其實也很籠統，并不全面。