css知识总结——盒子模型

什么是盒子模型

当对一个文档进行布局的时候，浏览器的渲染引擎会将所有的元素表示成一个个的矩形盒子。CSS盒模型本质上就是一个盒子，封装周围的HTML元素。它包括四个部分: 边距（margin）， 边框（border），填充（padding），内容（content）。

下面的图片说明了盒子模型（图片来源于网络，侵删） ：

• Margin （外边距）。边框外的部分。用空白区域来扩充边框外的部分。以分开相邻的元素
• Border（边框）。围绕在内边距和内容外的边框
• Padding（内边距）。 扩展自内容区域，填充元素中内容和边框的部分
• Content（内容）。盒子即元素的内容。

盒模型分类

由于历史原因，CSS的盒模型分为两类——W3C标准盒模型和IE盒模型。 这两个盒模型最核心的区别就是在IE的盒子模型其content的部分包含了padding和border。而标准盒子模型content部分即为content部分，不包含其他的部分。

标准盒子模型:

IE盒子模型：

元素的width和height属性

当我们在设置元素的width和height属性的时候，我们设置的是盒模型的content区域的大小。对应到盒模型上就是:

标准盒模型：

width = content的宽度
height = content的高度

IE盒模型：

width = border + padding + content的宽度
height = border + padding + content 的高度

CSS如何设置这两种盒子模型

利用CSS的属性box-sizing可以设置这两个盒子模型

box-sizing: content-box; (标准盒子模型)
box-sizing: border-box; (IE盒子模型）