V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Hoshinokozo
V2EX  ›  前端开发

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

  •  1
     
  •   Hoshinokozo · 2019-03-22 17:52:57 +08:00 · 2746 次点击
    这是一个创建于 2073 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一般设置一个 div 的 width,height 理所当然的会理解为整个 div 盒子的宽高

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

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

    虽然 IE 各种被诟病,但是这一次,我站在 IE 这边
    5 条回复    2019-03-22 19:07:25 +08:00
    changwei
        1
    changwei  
       2019-03-22 18:32:07 +08:00 via Android   ❤️ 1
    终于也有人和我一样想过这个问题了。我也觉得 ie 的才是符合正常人的思维。

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

    css 的各种属性耦合度很高,为非正交控制。也就是修改某个属性,可能会影响其他属性的表现。反正碰到这些问题特别头疼。
    guokeke
        2
    guokeke  
       2019-03-22 18:36:07 +08:00
    box-sizing?
    qwertyyb
        3
    qwertyyb  
       2019-03-22 18:47:22 +08:00 via Android
    同感同感
    kingsleydon
        4
    kingsleydon  
       2019-03-22 19:05:08 +08:00
    @changwei #1 https://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins
    这个解释的不错,想象成「排版」就比较好理解
    runze
        5
    runze  
       2019-03-22 19:07:25 +08:00   ❤️ 1
    同感
    在大多项目里加上

    ```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;
    }
    ```

    没遇到什么问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2715 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 06:38 · PVG 14:38 · LAX 22:38 · JFK 01:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.