摘要：背景想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇道基礎(chǔ)面試題附答案文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)顯然，肯定是因?yàn)檫@樣我才打算寫的。繼承得到的樣式的優(yōu)先級(jí)最低。

想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇《50道CSS基礎(chǔ)面試題（附答案）》文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)？顯然，肯定是因?yàn)檫@樣我才打算寫的。而且還有就是，我的公眾號(hào)也很久沒有更新了，微信說長(zhǎng)期不更新會(huì)關(guān)掉公眾號(hào)的，怕……

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

根據(jù)這篇文章的題目以及答案，再結(jié)合自己的一些經(jīng)歷以及想法，稍微理一理，不對(duì)的請(qǐng)噴，畢竟我所考慮的點(diǎn)還是很有限的。

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

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin

首先拋開所謂的標(biāo)準(zhǔn)不說，因?yàn)檫@個(gè)標(biāo)準(zhǔn)是 W3C 那邊制定后跟各大廠商溝通去做統(tǒng)一的。在這個(gè)答案中，如果按照嚴(yán)格來說，首先會(huì)問基本怎么計(jì)算，就像上面這個(gè)答案，不過需要注意一下順序。

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

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

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

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

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

根據(jù)以上可以再問一下，當(dāng) width: 0; padding: 0 100px; border: 10px solid red; margin: 0 50px; 的時(shí)候，這個(gè)盒子里有內(nèi)容跟沒內(nèi)容，在標(biāo)準(zhǔn)盒模型和怪異模式的盒模型中有什么區(qū)別？

根據(jù) box-sizng 改變的盒模型的計(jì)算方式，跟這個(gè)標(biāo)準(zhǔn)盒模型以及怪異模式的盒模型的計(jì)算方式有什么區(qū)別？

用來控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬

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

當(dāng)我們了解一個(gè)元素的盒模型之后，其實(shí)對(duì)于這個(gè)的理解就簡(jiǎn)單很多了，比如我們可以這樣理解，然后延伸來說明：

content-box：一個(gè)標(biāo)準(zhǔn)模式下的盒模型的計(jì)算方式

border-box：一個(gè)怪異模式下的盒模型的計(jì)算方式

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

在現(xiàn)在移動(dòng)端中，很多時(shí)候?yàn)榱吮阌诤凶拥挠?jì)算，我們會(huì)使用 box-sizing: border-box; 來操作，把 padding 和 border 的值計(jì)算在一個(gè)整體的寬度內(nèi)，當(dāng)然了，如果有 margin 的話，還是會(huì)額外去考慮的。

注：省略部分原文的答案

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

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

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

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

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

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

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

input 系列的控件元素，是直接有瀏覽器默認(rèn)文字大小，并且是 px 作為單位的（這個(gè)又是因?yàn)橐呀?jīng)被定義過了屬性，但實(shí)際上應(yīng)該算是繼承了吧，只是權(quán)重值不夠高，無(wú)法覆蓋了 body 的 font-size）

在這個(gè)問題中，提到了一個(gè)優(yōu)先級(jí)：

優(yōu)先級(jí)（就近原則）：!important > [ id > class > tag ]

不知道是不是跟下一個(gè)問題搞混了，但是這里應(yīng)該是少了一個(gè) style 屬性吧。

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

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

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標(biāo)簽：1000

這個(gè)我覺得吧，并沒有任何問題，不過在面試的時(shí)候，提到了這個(gè)之后，可能會(huì)被問其他相關(guān)的問題。

有 11 個(gè)元素選擇符的優(yōu)先級(jí)跟 1 個(gè) class 選擇符優(yōu)先級(jí)哪個(gè)高呢？

如果有 256 個(gè) class 選擇符，比如 .class001.......class256 {} 那么這個(gè)時(shí)候是否會(huì)大于 一個(gè) id 選擇符呢？

!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算。
如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低。

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

眾所周知，!important 的優(yōu)先級(jí)是最高，那么如果可能會(huì)延伸的問題會(huì)有：

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

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

隔行換色的實(shí)現(xiàn)方式；

:nth-child(an+b) 可以做的 XXX 事情，我們應(yīng)該怎么實(shí)現(xiàn)（具體可能會(huì)根據(jù)不同面試官給出不同的題目而定）；

::after 和 :after 一個(gè)冒號(hào)和兩個(gè)冒號(hào)有什么區(qū)別；

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

看到這個(gè)問題，我能想到的是，果然水平垂直居中的題目會(huì)出現(xiàn)啊。

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

在原文答案中提到了：

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

這里的關(guān)鍵點(diǎn)是 width 和 margin，當(dāng)一個(gè) display: block 的塊級(jí)元素有了寬度之后，就可以使用 margin: 0 auto; 的方式讓其水平居中。

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

display: inline;

display: inline-block;

display: table-cell;

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

接著就可以通過這個(gè)問題延伸出第二個(gè)問題：如何居中一個(gè)浮動(dòng)元素。

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

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

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

.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... 這里，這個(gè)方法在幾年前還是用的比較多的，尤其是在水平居中的一個(gè)分頁(yè)數(shù)控件。

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

這個(gè)問題我就沒看明白跟上面那個(gè)浮動(dòng)元素中使用了絕對(duì)定位方式居中有什么區(qū)別了。無(wú)非就是 margin 或者 transform 的方式來操作。

對(duì)于水平垂直居中的方法，網(wǎng)絡(luò)上有很多很多的文章了，不同的方式會(huì)帶來不同的效果情況。在日常使用的過程中，我們是會(huì)根據(jù)頁(yè)面的實(shí)際需求情況而采用不同的居中方式，原理都差不多，只是實(shí)現(xiàn)的方式不同。對(duì)于這個(gè)題目，總而言之一句話就是：如何做好一個(gè)元素的居中。

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

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

而且說實(shí)在的，目前這個(gè)寫的的內(nèi)容其實(shí)也很籠統(tǒng)，并不全面。