您的位置:首页 > Web前端 > CSS

盒子模型

2016-03-07 23:03 1726 查看

    盒子模型是css的核心,也是网页设计的核心内容,基本上所有的网页都有用到盒子模型。每个盒子都有border,margin,padding和content四个属性,但是盒子模型有两种不同的解释:标准W3C盒子模型和IE6盒子模型。

标准W3C盒子模型

    在标准的W3C盒子模型中,盒子的宽和高指的是内容区的宽和高,即你在里面放了多少内容,这些内容所占据的宽和高就是盒子的宽和高。

IE6盒子模型

  在IE6盒子模型中,盒子的宽和高指的是盒子最外层的DIV的宽和高,即你在最外层的DIV定义时的长度,即使盒子为空,其宽和高也是不变的。

 

    两种解释方法虽然都有自己的考量,但是相对来说IE6模型更加符合实际开发情况。而W3C在CSS3中也新增添了一个box-sizing的属性,它可以定义计算盒子模型的算法,border-box或者content-box。当box-sizing的值为border-box时,采用的是IE6盒子模型,而当box-sizing的值为content-box时,采用的是标准W3C盒子模型。这也从侧面说明IE6盒子模型更加符合实际。

(adsbygoogle = window.adsbygoogle || []).push({});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css 盒子模型