盒子模型
2017-02-28 21:24
148 查看
盒子模型（box-sizing）有border-box、content-box和 inherit；
标准盒子模型中，width和height是设置的content的宽度和高度；
而在IE盒子模型中。width和height设置的是content+padding+border的宽度和高度。
content-box为我们常用的w3c盒子模型，增加padding和margin border盒子被扩充开，最后元素总的尺寸的计算方式为：
[b]宽=width+padding-left+padding-right+border-left-width+border-right-width+margin-left+margin-right；[/b]
[b]高=height+padding-top+padding-bottom+border-top-width+border-bottom-width+margin-top+margin-bottom；[/b]
border-box是IE的传统盒子模型，该模型下元素的宽度和高度为定义的width和height，其中内容的尺寸计算方式为：
宽度=width- [b]padding-left
- padding-right - border-left-width
- border-right-width- margin-left
- margin-right；[/b]
高度=height- [b]padding-top
- padding-bottom - border-top-width
- border-bottom-width [/b]
标准盒子模型中，width和height是设置的content的宽度和高度；
而在IE盒子模型中。width和height设置的是content+padding+border的宽度和高度。
content-box为我们常用的w3c盒子模型，增加padding和margin border盒子被扩充开，最后元素总的尺寸的计算方式为：
[b]宽=width+padding-left+padding-right+border-left-width+border-right-width+margin-left+margin-right；[/b]
[b]高=height+padding-top+padding-bottom+border-top-width+border-bottom-width+margin-top+margin-bottom；[/b]
border-box是IE的传统盒子模型，该模型下元素的宽度和高度为定义的width和height，其中内容的尺寸计算方式为：
宽度=width- [b]padding-left
- padding-right - border-left-width
- border-right-width- margin-left
- margin-right；[/b]
高度=height- [b]padding-top
- padding-bottom - border-top-width
- border-bottom-width [/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 