赞
踩
css盒子模型就是用来装页面上的匀速的矩形区域,CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
标准W3C盒子模型:包括 margin、border、padding、content组成,并且content部分不包含其他部分
IE盒子模型:包括 margin、border、padding、content组成,和标准的W3C盒子模型不同的是,IE盒模型的content部分包含了border和padding。
从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width值content的部分宽度。在IE盒子模型中,width表示 content+padding+border这三个部分的宽度,故这使得在计算盒子模型整个盒子宽度的时候存在着差异;
计算方法:
1、标准盒子模型的宽度计算:左右border+左右padding+width
2、IE盒子模型的宽度计算:width
例子:当一个最初的盒子宽度为500px,高度为500px
1、在标准盒子模型中,设置左右padding为100px,此时盒子大小会变为600px*600px
2、在IE盒子模型中,盒子的宽度和高度还是500px,内容区域缩小
在CSS中对相应的div盒子进行box-sizing属性的设置,就可以让盒模型在标准和怪异中进行转换。
1、box-sizing:content-box; 盒模型设置为w3c标准盒子模型
2、 box-sizing:border-box; 盒模型设置为怪异(IE)盒子模型 。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。