盒模子是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计划带来了一些艰苦.
更新时间：2015-01-29
