前端面试题（一）—— 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)