什么是盒子模型?标准盒模型、怪异盒模型有哪些区别?

盒子模型分为标准的和怪异的IE模型。

标准模型：仅宽度/高度内容。
IE模型：宽度/高度包含内容+填充+边框。

设置框大小：border-box；转换为 IE 模板。

实用笔记：2 008 年，IE6 仍占据2 5 %的市场份额，标准型号为主导型号。

直接改变盒子的大小。

盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing

嘿，我们来谈谈 CSS 盒子模型。
上周一位顾客问我这个问题。
感觉相当复杂。
我们慢慢过一遍吧。

首先我们来说一下标准盒模型（W3 C），这是标准的。
当您指定宽度和高度时，它们仅算作内容区域。
例如，如果给一个 div 宽度为 1 00px，高度为 2 00px，则整个 div 的实际大小必须加上 padding、border 和 margin。
例如，顶部内边距为1 0px，顶部边框为5 px，顶部边距为1 5 px，那么实际高度为1 5 +1 0+2 00+1 0+5 +1 5 =2 6 5 px。
你明白吗？就是内容大小+三边内边距+三边边距。

但是IE们曾经创建过一个奇怪的盒子模型（IE odd box model），它的宽度和高度包括直接的内容、内边距和边框。
如果将宽度设置为1 00px，则实际宽度为1 00px（内容）+ padding + border。
这样就省去了很多麻烦，但是兼容性问题也挺烦人的，现在基本上已经没有必要了。

然后是保证金崩溃。
这特指块级元素上边距的垂直合并。
如果您想到两个相邻的 div，则顶部的边距为 1 0 像素，底部的边距为 2 0 像素。
通常它们之间有 3 0px 的空间，对吧？但边框折叠会将它们合并到3 0px（取最大值），或者如果下面没有指定边距，则可以只空1 0px。
这也发生在父元素和子元素之间。
例如，父元素有上边距，子元素也有上边距，而父元素没有边框，也没有固定的高度。
那么子元素的上边距会覆盖父元素的上边距，计算时会直接基于子元素。
浮动和绝对定位的元素不会遭受边界崩溃。

负值效应也很有趣。
您可以为边距和填充输入负值。
例如，如果将 div 的上边距设置为 -2 0px，它就会向上“说话”并覆盖上面元素的内容。
这在一些特殊设置中很有用。
还有负内边距，可用于调整元素内内容的位置或隐藏边框。
我记得有一个旧的解决方案，使用负填充来重叠表格边缘以隐藏外边缘。

最后我们来谈谈盒子大小属性。
它只允许您手动切换盒模型的计算方法。
标准为内容盒（标准型号）。
如果将宽度设置为1 00px，则实际宽度为content+padding+border。
如果将其更改为 border-box，则宽度 1 00px 是实际内容宽度，并且 padding 和 border 将包含在这 1 00px 中。
这个属性在响应式设计中非常有用。
可以防止调整padding或border时元素大小突然改变，造成布局混乱。
尝试将框大小设置为 border-box。
你会发现无论你如何改变padding和border，元素的显示宽度和高度都不会改变。

无论如何，这些都是CSS布局的核心。
只有了解了它们，我们才能更好地安排布局。
如果您有任何疑问，请随时问我。