什么是盒子模型?盒子模型有哪些?怎么转换?
1.网页中所有的元素都可以看成一个盒子,由 content + padding + border + margin组成
2.盒子模型有两种,一种是标准盒子模型,一种是怪异盒子模型(IE盒子模型)
浏览器默认的是标准盒子模型,因为是W3C的盒子模型标准,width = content + padding + border + margin
IE5.5之前使用的是怪异盒模型,width = content(padding和border也算作主体部分) + margin
怪异盒模型的好处:设置padding和border时,不需要计算盒子的大小,主体内容会被缩小,以保持整体大小不变
- box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。