目前有:标准盒子模型和IE盒子模型 2种盒模型。他们各自长这样:
根据上图可以看出他们的不同:
标准盒模型:元素的width和height = content
IE盒模型:元素的width和height =( content+border+padding )
因为存在这样的差异,所以要满足跨浏览器的时候就会比较麻烦。当然两种方式肯定是标准盒模型比较好,这里有一个解决跨浏览器的方案:
在网页顶部增加DOCTYPE的声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这样会使所有浏览器按照W3C标准盒模型去解析页面元素,就满足了跨浏览器的要求了。
上面还提到了盒子模型是有空间的,主要表现在组成盒子的各个部分的层次不同。他们从上到下的顺序是
border----->content、padding----->background-image----->background-color----->margin 如下图
所以在处理页面元素的样式时还需要注意到这点。