一、什么是 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)