标签：box 盒子 border 模型 30 height content IE

相关知识点

有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）

盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

• IE盒模型：属性width、height包含content、border和padding
• W3C标准盒模型：属性width、height只包含内容content，不包含border和padding

在IE8+浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box ，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是IE盒模型。如果在IE6，7，8中 DOCTYPE 缺失会将盒子模型解释为IE盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为W3C盒模型。

回答

盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content

标准盒模型和IE盒模型的区别在于设置 width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的 box-sizing 属性来改变元素的盒模型。

详细资料还可参考：《CSS盒模型详解》

摘抄自：Github，作者：CavsZhouyou
链接：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

标签：box,盒子,border,模型,30,height,content,IE
来源： https://blog.csdn.net/qq_40988677/article/details/118353908

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。