为啥我感觉 IE 的盒子模型才是正统呢？

This topic created in 2645 days ago, the information mentioned may be changed or developed.

一般设置一个 div 的 width，height 理所当然的会理解为整个 div 盒子的宽高

而 W3C 却反其道行之弄出个反人类的 content-box，还把他当做正统

反倒是 IE 的 border-box 跟人的思维模式相符，却落得个“怪异盒子”的骂名

虽然 IE 各种被诟病，但是这一次，我站在 IE 这边

盒子

div

正统

W3C

5 replies • 2019-03-22 19:07:25 +08:00

changwei

Mar 22, 2019 via Android

终于也有人和我一样想过这个问题了。我也觉得 ie 的才是符合正常人的思维。

而且我还觉得 css box 模型有些其他方面莫名其妙的规则：例如上下两个 div 的 margin 只取最大的那个，按道理现实生活中两个盒子叠放在一起，高度难道不是做加法运算吗？怎么成了做 max()运算了，搞得每次开发，复用别的地方的样式，还要重写一下 margin。

css 的各种属性耦合度很高，为非正交控制。也就是修改某个属性，可能会影响其他属性的表现。反正碰到这些问题特别头疼。

guokeke

Mar 22, 2019

box-sizing?

qwertyyb

Mar 22, 2019 via Android

同感同感

kingsleydon

Mar 22, 2019

@changwei #1 https://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins
这个解释的不错，想象成「排版」就比较好理解

runze

Mar 22, 2019

同感
在大多项目里加上

```css
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
```

没遇到什么问题