[分享]css中 这什么区别

在我们学习CSS样式表语言的时候，经常会遇到类似"margin"、"padding"、"border"、"outline"等一系列的属性。这些属性我们通常称之为"盒子模型属性"。在CSS中有两种不同的盒模型，分别是W3C模型和IE模型。
W3C盒模型和IE盒模型的区别在于它们计算盒子宽高的方式不同，也就导致在进行计算盒子宽度和高度的时候，得出的结果不一样。
W3C盒模型将元素的内容(content)、填充(padding)、边框(border)、外边框(margin)都计算入内，所以，盒子的宽度和高度是包括了padding和border的。IE盒模型只将元素的内容(content)的宽和高计算入内，所以盒子的宽度和高度不包括padding和border。
下面我们来看一下代码示例：

.box {
   width: 200px;
   height: 200px;
   padding: 20px;
   border: solid 1px #000;
   margin: 20px;
   background-color: #ccc;
} 

在使用W3C盒模型的情况下，实际盒子的宽度和高度应该是240px（200+20+20），在IE盒模型中，实际盒子的宽度和高度应该是200px。这也就是为什么当使用IE盒模型的时候，我们会发现设置padding和border属性值对盒子的宽度和高度没有影响。
我们可以通过在CSS中设置'box-sizing'属性来指定应该使用哪种盒模型。默认值是content-box，它使用W3C盒模型。如果我们想使用IE盒模型，可以将这个属性值设置为"border-box"，代码如下：

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: solid 1px #000;
  margin: 20px;
  background-color: #ccc;
  box-sizing: border-box;
} 

在设置了这个属性值之后，无论使用W3C盒模型还是IE盒模型，我们设置的盒子的宽度和高度就是一样的，不会像没有设置'box-sizing'属性时那样出现问题了。
通过学习W3C盒模型和IE盒模型的不同，我们可以更好地完成我们的页面布局和设计。我们可以灵活使用CSS样式来控制页面盒子的尺寸大小，达到我们想要的效果。