CSS盒模型是怎样工作的

时间：2014-3-10

  根据CSS,可以给四个区(内容,内边距,边框和外边距)中的每个区指定值,这些值是附加的,把内容,内边距和边框的值加起来,就是例子的总宽度,如果内容宽度是400px,内边距每边是50px,边框的每边是2px,那么总宽度是504px.
  CSS不在处你选什么值作为主要值,也不在科你选 什么样的值来组合和匹配,例如,在显示页面时,你可以指定内容值为访问者浏览器窗口的67%,内边距为5em,边框为1px,总和怎么算呢,很难计算,这将取决于访问者浏览器窗口的宽度和文档的默认尺寸.
  关于盒模型还有更多需要解释的,一方面是:垂直相邻元素的上外边距和不外边距相互叠加(形成加深或是加强效果)
  另一个方面是:当盒为空时,尺寸值没有意义,如果你指定空盒占据页面高和宽的100%,而实际它只占0%,原因是盒里没有元素,这与HTML框架的作用方式不同,也与在4.0浏览器上的表格而已作用方式不同,如果你企图用背景颜色填充两个块级元素的方法来实现颜色效果,这种方法在框架和4.0浏览器上的表格而已里是,但在CSS里不起作用,从这个意义上说,你很难把外观和结构区分开来,因为不存在数据也就不存在外观.