认识CSS中的盒模型

2022-04-07 12:57:00

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

推荐文章

微信咨询

咨询热线

0377-6698 8886

收起
顶部

回到顶部