盒模型

所谓的盒模型说白了就是content（实际内容）、border（边框）、padding（内边距）和margin（外边距）

其中标准盒模型为：

 

但是有个神奇的存在：IE

 

当然不用担心因为IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。另外，我们现在应该能理解了，css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

现在去看这篇博客http://www.cnblogs.com/xiayu25/p/6242262.html里面的关于width()的部分，应该更能理解了。

 

1. IE盒模型的本质

 

• 核心特点：在IE盒模型（box-sizing: border-box）中，元素的 width/height 包含了 内容（content）、内边距（padding） 和 边框（border） 的总和。
• 关键区别：
  • 标准盒模型（content-box）：width/height = 内容区域的大小。
  • IE盒模型（border-box）：width/height = 内容 + padding + border。

 

举个栗子🌰： 假设设置 width: 300px，padding: 20px，border: 5px solid：

 

• 标准盒模型：元素总宽度 = 300（内容） + 202（padding） + 52（border） = 350px。
• IE盒模型：元素总宽度直接是 300px（内容区域自动压缩为 300 - 40 - 10 = 250px）。

 

2. 为什么说“都属于Content”是误导？

 

• 内容（content）的明确定义： Content 指的是元素的实际内容区域（如文字、图片），而 padding 和 border 是围绕内容的附加部分。
• IE盒模型中的“width/height”： 它并不是将 padding 和 border 划归为 content，而是将它们包含在 元素的总尺寸（width/height） 中。
  • 内容区域会被压缩：如果元素设置了 padding 或 border，内容区域的实际可用空间会减少。

    举个反例❌： 如果有人说“border 和 padding 属于 content”，可能让人误以为它们的尺寸会撑大内容区域（如 width: 300px 的 content 变成 350px），这是错误的。

    3. 正确表述方式

    • 更严谨的说法： 在IE盒模型中，width/height 的数值范围包含了 content、padding 和 border，而非三者都属于 content。 简而言之：
      • 标准盒模型：width = content
      • IE盒模型：width = content + padding + border

    4. 实际开发中的意义

    • 布局友好性：IE盒模型能避免元素因 padding 或 border 导致的总宽度超出预期。例如，实现一个总宽度固定为 50% 的响应式布局时，无需手动计算内容区域。
    • 推荐用法： 全局设置 box-sizing: border-box 可简化布局逻辑：
      CSS

       

      * { box-sizing: border-box; }

    总结

    错误点：将 padding 和 border 说成“属于 content”混淆了内容区域与元素总尺寸的概念。 正确理解：IE盒模型是让 width/height 包含 content、padding 和 border，而非将它们划归为 content。 记住这个公式：width = content + padding + border（IE盒模型），问题就迎刃而解啦！