欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

为什么W3C要制定content-box盒子模型?IE5.5之前的IE盒子模型放在今天来看也是极好的啊

程序员文章站 2022-05-01 18:49:42
...
并且CSS3新出的box-sizing可以修改盒子模型,算不算是对W3C自己的错误进行的打脸行为?

回复内容:

泻药……

这种陈年往事儿谁知道去啊。

========== 以下全是猜 ==========

先说为啥俩不一样的事儿,这玩意只能看看相关时间来想了:
  • Hakon Wium Lie CSS 创始人(之一) 1994 年提出 CSS 概念。
  • IE 3.0 1996年8月13日 发布,开始(部分)支持 CSS
  • W3C 上可查到的 CSS 1 最早稿 Cascading Style Sheets, level 1 是在 1996年12月17日 号的
  • IE 4.0 1997年9月-10月 发布
根据以上猜测,最开始(部分)支持 CSS 的 IE 3.0 在开发期间(起码比1996年8月要早),W3C 还没有可参照的(定稿)规范。于是按自己的理解实现了IE 盒模型。

之后最早的 CSS 1 规范出现,估计处于 IE 4.0 开发前期。

但是 IE 3.0 发布首周,下载次数就突破100万次。大量的用户,兴许让微软顾忌后续兼容问题,就没理盒模型差异。或者巨大的市场占有率对比下的 W3C 已经不重要,让当时的微软无视了盒模型差异。

至于为啥 W3C 要整这种盒模型,也就更不得而知了。
同样得靠猜。


兴许是这样一种设计思路:
  • 前提 content-width border padding 都是不能负值的,否则也没法绘制了。可以想象 负值 边框要显示么?还是不显示。
  • 在 border-box 模型思路下,如果 border padding 的宽度总和已经大于了width,那么实际的 content-width 是如何的?
    • 直接0? 那么 width 会比设定的值宽。这不是老IE的内容过宽撑开的另种节奏么。
    • 负值?content width 为负也太不合理了,而且怎么绘制呢?
  • 在 content-box 模型思路下, content-width border padding 都是正值,不存在 border-box 下 content-width 值是由减法得到的情况。一切都可以通过加运算得到正值。布局计算就相对简单很多,实现起来连带的坑也少。
但是,这样一种模型是违背正常思路的。
W3C 兴许是吸收了 IE border-box 模型对以上问题的解决方式经验后,推出 box-sizing 来兼容两者。

=========== 碎碎念 ==============

看有说排版和布局的。
这俩玩意什么区别呢,都没人说过。

个人理解的补充下:

版,片反,片为小木板,就是两片相对的小木板
有印刷后,版即为两个相对的文字,一边为模具一边为印刷后结果。
所谓排版,就是说排列这些文字。(在印刷中,文字可以说是最基本的个体单位了)

局,尺下口,尺为规矩法度,口为言语可引申为宏观。
局即为用规矩约束的宏观内容。
布局即为设置一些宏观的约束。

所以布局意为调整宏观结构,排版为排布个体位置。

虽然盒模型不符合正常思维,但对于最初的 CSS 规范来说,考虑到细部个体排布才是符合规范变编写正常思维的。出现这样个盒模型设定也就不足为奇了。 首先,“恶心”这个这么主观的词不应随便用。恶心可能是吃屎,也可能是因为怀孕,盒模型对题主来说不知道是前者还是后者。


说正经的,标准盒模型为啥是这样的,今年1月的css conf会后我也问过Bert Bos(和Hakon Wium Lie共同发明了CSS),虽然他的答案也不是完全令人满意(具体这里不展开了),不过基本的原因还是可以得到的:

就是我们一直说的,CSS当初是主要为文字排版需求而设计,而不是为GUI布局而设计的。


至于说IE为什么预见到了GUI布局需求?太高估IE团队了,他们只是这样实现方便而已。 (伪)历史著名打脸事件:box-sizing: border-box;
谁用谁点赞。 其实我一直不能理解,W3C就是画了几个相当于小学生水平的图型和一堆莫名其妙的文字,而IE是正儿八经的实现了一个符合人类理解的盒子模型,偏偏有人认为前者是正统,后者是异端。


为什么W3C要制定content-box盒子模型?IE5.5之前的IE盒子模型放在今天来看也是极好的啊
别说我黑它,这个图的来源是:
w3.org/TR/WD-CSS2-97110


最后回答一下问题吧,这个事情只能猜。

W3C认为CSS盒模型是用来控制排版的,所以规定宽高都是内容的宽高。IE则以为CSS盒模型是用来控制布局的,所以和表格的宽高定义一样。

其实我一直觉得,用盒模型来做布局本来就是很别扭的。表格才是最适合布局的,虽然有些副作用和麻烦。当然,最新的Flexible Box是神器,大家都用Flexible Box就不会有那么多奇技淫巧怎么把li横着摆,垂直居中神马的了。


如果单纯从盒模型最初的设计目的来看(定义块元素的大小和边距),W3C的规范是更合理的,毕竟我们设置图片的高宽的时候,难道是考虑图片边框的高宽吗?我们设置段落宽度的时候也不会考虑padding。问题在于当盒模型用于布局的时候,就显然不如IE的规范合理了,所以,问题是为什么非要把盒模型用于布局呢? 其实么,W3C的标准最开始就是用来黑微软的。 感觉微软的盒是设计师思维,w3c的是工程师思维 10年开始接触Web,当时看到的资料都是介绍w3c模型,一直很痛恨ie,:-),难道不是w3c是正统么