盒子模型总结

无人久伴 提交于 2020-03-02 21:53:55

盒子模型
盒子模型分为标准盒子模型和IE盒子模型
标准盒子模型:
在这里插入图片描述
标准盒子模型分为margin,border,padding,content,其中content部分不包含其他部分对应图片height部分

IE盒子模型:

在这里插入图片描述
IE盒子模型包含margin,border,padding,和content,**其中content包含border和padding,**对应图片height部分

IE5.5几更早的版本使用的是IE盒子模型,IE几期以上的版本在标砖兼容模式下使用的为W3C的盒子模型标准。因此这就意味着此盒子模型问题知乎在IE5.5及其更早的版本中出现。只要为文档设置一个DOCTYPE,就会使得IE准寻标准兼容方式工作。
另外,CSS3中的box-size属性给了开发者选择盒子模型的方式,W3C盒子模型被称为content-box,IE被称为border-box,使用box-size:content-box;就是为了在设置padding和border的时候不会把宽度撑开

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!