1 前言

今天被杭州有讚的前端面試官面了,很多問題一知半解。主要原因還是因為我這幾個月大多數時間都在寫專案,平常學習也是主要以框架為主,很多基礎知識都遺忘了。

從這篇文章開始,我會記錄、學習和研究面試中遇到的問題。當然,一般都是關於前端開發的。

第一篇文章是講盒子模型的。

2 盒子模型的基本要素

以下圖中的button為例

這裡寫圖片描述

在chrome瀏覽器中檢視這個元素,結果是這樣的:

這裡寫圖片描述

藍色部分(28 x 32 )是button的content,綠色的是padding,黃色的是border, 深黃色是margin。

對的,盒子模型很簡單,其實就這個4個概念。

3 IE盒子模型和W3C盒子模型

盒子模型分為上述兩種,W3C盒子模型也就是W3C的標準。
這兩個模型的唯一區別是計算width和height時,IE盒子模型包含padding和border, W3C盒子模型則不包括。

以下兩張圖很清晰地闡述這兩個模型的差別:

這裡寫圖片描述

這裡寫圖片描述

4 標準模式與怪異模式

為了使頁面在不同瀏覽器下呈現相同的效果,必須統一盒子模型,因為設定width或者height一般是必須用到的。

那麼必須設定瀏覽器的渲染模式是標準模式,在標準模式下,IE6+和其他現代瀏覽器會以W3C盒子模型渲染。(在怪異模式下,IE中只有IE9+會用W3C盒子模型。

5 CSS3指定盒子模型種類

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

box-sizing屬性可以指定盒子模型種類,content-box指定盒子模型為W3C,後者為IE盒子模型。

這是CSS3屬性,IE8+和其他現代瀏覽器支援,詳見文件。