0

0

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

php中文网

php中文网

发布时间:2016-06-07 08:42:31

|

1791人浏览过

|

来源于php中文网

原创

并且CSS3新出的box-sizing可以修改盒子模型,算不算是对W3C自己的错误进行的打脸行为?

Sesame AI
Sesame AI

一款开创性的语音AI伴侣,具备先进的自然对话能力和独特个性。

下载

回复内容:

泻药……

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

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

先说为啥俩不一样的事儿,这玩意只能看看相关时间来想了:
  • 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是正统么

相关文章

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5.1万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.9万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号