浅谈对css模型的理解

1、什么是css模型？

可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + padding + content 的宽度相加。
css的盒模型有两种：标准盒模型和IE盒模型。分别如下图所示：

2、两种盒模型的区别

由上图可以看出：在标准盒模型中height,width值是content部分；而IE盒模型中，我们设置的height,width值包含：(content)+填充(padding)+边框(border) 这三个部分。

3、如何设置两种盒模型

通常情况下，在不设置box-sizing时，默认box-sizing:content-box;

box-sizing:content-box;//标准盒模型
box-sizing:border-box;//IE盒子模型