为什么W3C要制定content-box盒子模型?IE5.5之前的IE盒子模型放在今天来看也是极好的啊
程序员文章站
2022-05-01 18:49:42
...
并且CSS3新出的box-sizing可以修改盒子模型,算不算是对W3C自己的错误进行的打脸行为?
这种陈年往事儿谁知道去啊。
========== 以下全是猜 ==========
先说为啥俩不一样的事儿,这玩意只能看看相关时间来猜想了:
之后最早的 CSS 1 规范出现,估计处于 IE 4.0 开发前期。
但是 IE 3.0 发布首周,下载次数就突破100万次。大量的用户,兴许让微软顾忌后续兼容问题,就没理盒模型差异。或者巨大的市场占有率对比下的 W3C 已经不重要,让当时的微软无视了盒模型差异。
至于为啥 W3C 要整这种盒模型,也就更不得而知了。
同样得靠猜。
兴许是这样一种设计思路:
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是正儿八经的实现了一个符合人类理解的盒子模型,偏偏有人认为前者是正统,后者是异端。
别说我黑它,这个图的来源是:
http://www.w3.org/TR/WD-CSS2-971104/images/boxdim.gif
最后回答一下问题吧,这个事情只能猜。
W3C认为CSS盒模型是用来控制排版的,所以规定宽高都是内容的宽高。IE则以为CSS盒模型是用来控制布局的,所以和表格的宽高定义一样。
其实我一直觉得,用盒模型来做布局本来就是很别扭的。表格才是最适合布局的,虽然有些副作用和麻烦。当然,最新的Flexible Box是神器,大家都用Flexible Box就不会有那么多奇技淫巧怎么把li横着摆,垂直居中神马的了。
如果单纯从盒模型最初的设计目的来看(定义块元素的大小和边距),W3C的规范是更合理的,毕竟我们设置图片的高宽的时候,难道是考虑图片边框的高宽吗?我们设置段落宽度的时候也不会考虑padding。问题在于当盒模型用于布局的时候,就显然不如IE的规范合理了,所以,问题是为什么非要把盒模型用于布局呢? 其实么,W3C的标准最开始就是用来黑微软的。 感觉微软的盒是设计师思维,w3c的是工程师思维 10年开始接触Web,当时看到的资料都是介绍w3c模型,一直很痛恨ie,:-),难道不是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 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是正儿八经的实现了一个符合人类理解的盒子模型,偏偏有人认为前者是正统,后者是异端。
别说我黑它,这个图的来源是:
http://www.w3.org/TR/WD-CSS2-971104/images/boxdim.gif
最后回答一下问题吧,这个事情只能猜。
W3C认为CSS盒模型是用来控制排版的,所以规定宽高都是内容的宽高。IE则以为CSS盒模型是用来控制布局的,所以和表格的宽高定义一样。
其实我一直觉得,用盒模型来做布局本来就是很别扭的。表格才是最适合布局的,虽然有些副作用和麻烦。当然,最新的Flexible Box是神器,大家都用Flexible Box就不会有那么多奇技淫巧怎么把li横着摆,垂直居中神马的了。
如果单纯从盒模型最初的设计目的来看(定义块元素的大小和边距),W3C的规范是更合理的,毕竟我们设置图片的高宽的时候,难道是考虑图片边框的高宽吗?我们设置段落宽度的时候也不会考虑padding。问题在于当盒模型用于布局的时候,就显然不如IE的规范合理了,所以,问题是为什么非要把盒模型用于布局呢? 其实么,W3C的标准最开始就是用来黑微软的。 感觉微软的盒是设计师思维,w3c的是工程师思维 10年开始接触Web,当时看到的资料都是介绍w3c模型,一直很痛恨ie,:-),难道不是w3c是正统么