css盒模型

CSS 盒模型

概念

所有的HTML元素都可以看作是一个盒子，盒子由内容（content），内边距（padding），边框（border），外边距（margin）组成。

分类

css盒模型有两种类型，一种是w3c标准的标准盒模型，另一种是IE标准的怪异盒模型

标准盒模型

标准盒模型在指定width，height时，设置的是内容区域（content）的宽度和高度

标准盒模型的大小 = content + padding + border + margin

怪异盒模型

怪异盒模型在指定width，height时，设置的是内容区域以及内边距和边框的宽度和高度的总和

怪异模型的大小 = content （content + padding + border） + margin

设置盒模型

1. 默认情况下

在标准模式下会用标准盒模型
混杂模式下会使用怪异盒模型

2. 手动设置

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定

• content-box: 设置为标准盒模型
• border-box: 设置为怪异盒模型