认识CSS中的盒模型

时间：2014-2-7

  盒模型是CSS中的重要概念之一,它是所有布局控制的基础,在1996年CSS1刚刚推出时,就推荐把所有的HTML元素都旋转在一个盒子中,然后通过对这个盒子的外观控制来实现整个页面的外观控制,这就是所谓的盒模型.
  在CSS标准中,一个盒模型包括4个区,分别是:内容,内边距,边框和外边距,在指定的一个元素的大小时,就是根据盒模型中各个部分的大小来决定的.例如:
  div#div1
{
  width:100px;
  border-width:2px;
  padding:5px;
  margin:5px;
}
  这里,width指定内容的宽度,border-width指定边框的宽度,padding指定内边距的宽度,margin指定外边距的宽度,整个div#div1的宽度应该为:100px+2px+2px+5px+5px=114px.这是根据CSS标准计算出来的宽度,但事实上,不同浏览器的表现会有所不同,例如firefox是准确按上述标准来计算的,而IE中则把width认为是整个盒模型的宽度,因此在IE中,实际内容的宽度应该为:100px-2px-2px-5px-5px=86px.这被认为是IE的一个Bug,正是由于它对盒模型的这种解析,给使用CSS设计带来了一些困难.