认识CSS中的盒模型

盒模型是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规划带来了一些艰难.