前端面試題（一）—— CSS 盒模型

一、什麼是 CSS 盒模型

CSS 盒模型是指在網頁中，每個元素都被看作是一個矩形的盒子，這個盒子包含了元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）。

 二、標準盒模型與怪異盒模型

1、box-sizing

兩個常用參數：

• content-box：默認值。標準盒模型
• border-box：怪異盒模型

2、標準盒模型

如下圖，width(100) = content width(100)

 

3、怪異盒模型

如下圖，width(100) = border(10 * 2) + padding(20 * 2) + content width(40)