【再学前端】Css盒模型

[Samgao0312]

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型 和 标准 w3c 盒子模型 。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型。

一、标准 W3c 盒模型

从上图可以看到，标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

w3c中的盒子模型的宽: 包括 margin + border + padding + width;

• width: margin2 + border2 + padding*2 + width;
• height: margin2 + border2 + padding*2 + height;

二、IE盒模型

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

IE中的盒子模型的width: 也包括 margin + border + padding + width;

三、举个栗子

例如一个盒子模型如下：

div {
  margin: 20px;
  border: 10px; 
  padding: 10px;
  width: 200px;
  height: 50px;
}

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2 + 10*2 + 10*2 + 200 = 280px;
高度：20*2 + 10*2 + 20*2 + 50 = 130px;
盒子的实际宽度大小为: 10*2 + 10*2 + 200 = 240px;
实际高度：10*2 + 10*2 + 50 = 90px;

用ie的盒子模型解释 ：

盒子在网页中占据的大小为: 20*2 + 200 = 240px;
高：20*2 + 50 = 90px;
盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型