《50道CSS基礎面試題（附答案）》中的答案真的就只是答案嗎？

時間 2019-11-05

標籤 css 基礎面試答案只是欄目 CSS 简体版

原文原文鏈接

背景

想一想本身爲何要寫這個，難道不是由於這篇《50道CSS基礎面試題（附答案）》文章最近被轉載的多，比較多而湊熱鬧蹭熱點？顯然，確定是由於這樣我纔打算寫的。並且還有就是，個人公衆號也好久沒有更新了，微信說長期不更新會關掉公衆號的，怕……html

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

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

正文部分

問題直接複製過來，那篇文章的答案引用部分，在引用的答案下面附帶我我的的一些見解。小程序

一、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不一樣的？

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

首先拋開所謂的標準不說，由於這個標準是 W3C 那邊制定後跟各大廠商溝通去作統一的。在這個答案中，若是按照嚴格來講，首先會問基本怎麼計算，就像上面這個答案，不過須要注意一下順序。segmentfault

標準盒模型的寬度 = 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 進入怪異模式，從而致使瀏覽器解析元素盒模型出現問題，好比：瀏覽器

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

這種狀況下就會讓低版本的 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 改變的盒模型的計算方式，跟這個標準盒模型以及怪異模式的盒模型的計算方式有什麼區別？

二、box-sizing屬性？

用來控制元素的盒子模型的解析模式，默認爲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 也基本上會在各類編輯器中自動添加爲 <!doctype html> 了，但這不表明咱們不會在乎盒模型的計算，只是不在乎怪異模式和標準模式的瀏覽器解析方式。

在如今移動端中，不少時候爲了便於盒子的計算，咱們會使用 box-sizing: border-box; 來操做，把 padding 和 border 的值計算在一個總體的寬度內，固然了，若是有 margin 的話，仍是會額外去考慮的。

三、CSS選擇器有哪些？哪些屬性能夠繼承？

注：省略部分原文的答案

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

而且我沒看懂爲何原文的答案這裏有一箇中括號，是想說表明這個是可選的呢，仍是怎麼樣呢。

四、CSS優先級算法如何計算？

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

這個我以爲吧，並無任何問題，不過在面試的時候，提到了這個以後，可能會被問其餘相關的問題。

選擇符優先級的拓展問題：

有 11 個元素選擇符的優先級跟 1 個 class 選擇符優先級哪一個高呢？
若是有 256 個 class 選擇符，好比 .class001.......class256 {} 那麼這個時候是否會大於一個 id 選擇符呢？

!important聲明的樣式優先級最高，若是衝突再進行計算。

若是優先級相同，則選擇最後出現的樣式。

繼承獲得的樣式的優先級最低。

這三點歸納的並非十分全面吧，在面試的過程當中，若是面試官提到了有關選擇符優先級的問題，那麼可能會給幾個 demo 來讓你想一下哪一個文字是什麼顏色之類的，最後再問原理。

衆所周知，!important 的優先級是最高，那麼若是可能會延伸的問題會有：<div style="width: 100px !important;"></div> 這裏的這個 width 樣式如何去覆蓋。

五、CSS3新增僞類有那些?

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居中？

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

如何居中div？

一個 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，不會改變的。