IE8盒子模型比W3C的更合理

2016-02-17 04:00 22 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是IE8盒子模型比W3C的更合理,一起来学习了解下吧!

【 tulaoshi.com - 平面设计 】

IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外。

盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自 W3C 标准浏览器。

盒子模型

下图就是一个典型的盒子模型示意图

IE8盒子模型比W3C的更合理,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子模型最典型的应用是这样:我们有一段内容,可以为这段内容设置一个边框,为了让内容不至于紧挨着边框,可以设置 padding ,为了让这个盒子不至于和别的盒子靠得太紧,可以设置 margin。

到目前为止,一切都很完美,直到当我们想为这个盒子设置一个尺寸的时候。

IE6 和 W3C 标准浏览器对盒子模型的不同诠释

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

当我们试图为一个盒子设置尺寸的时候,问题出现了。IE6 和 W3C 标准浏览器对盒子模型有不同的解释,这个不同解释表现在盒子的尺寸上,下图是两种类型的浏览器对盒子尺寸的不同解释示意图:

IE8盒子模型比W3C的更合理,PS教程,图老师教程网

IE8盒子模型比W3C的更合理,PS教程,图老师教程网

可以看出,IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外。

为什么 IE6 的盒子模型更合理

在现实世界中,我们描述一个物理盒子的时候,如果谈到尺寸,是不会只计算其盛放的物体的尺寸的,我们还会算上空隙与盒体本身。拿集装箱装箱为例,我们有 100 只花瓶,每只花瓶用1个纸盒包装,为了防止花瓶破碎,我们在花瓶周围塞上泡沫,这相当于 padding,纸盒的外围纸板相当于 border,在装集装箱的时候,为了防止纸盒之间相互碰撞,纸盒之间塞上稻草,这相当于 margin,很显然,我们向货运公司报告我们货物尺寸的时候,是要将整个纸盒的尺寸,连同纸盒之间需要塞稻草的空隙都告诉他们的,倘若只报告花瓶的尺寸,货运公司是没有办法装箱的。

再举一个例子,假若我们有一面墙,要在上面挂10幅油画,油画是用相框裱糊的,相框的边框相当于 border,油画和边框之间的距离相当于 padding,相框之间的间隔相当于 margin,这个例子和 Web 布局设计已经很接近了,对任何人来说,使用 IE6 的盒子模型,将整个相框,包括油画当做一个整体更容易布局,当你知道了整个相框的尺寸后,不必再去考虑 padding, border, margin 这个因素的影响,每个相框就是一个整体,至于 padding, border 与 margin,这是浏览器自己事,不需要设计者去关心。

在具体的 Web 设计中

在具体 Web 设计中,尤其牵扯到复杂网格布局的时候,IE6 的盒子模型更容易控制,我们不妨看看以下几个设计场景。

1. 面板式界面设计

页面上包含几个面板,比如一个登录面板,一个最新新闻面板,一个投票面板,这类设计典型的做法是,用背景图的方式,首先逐个设计出这些面板的外观图,将需要用具体内容替换的地方空着,这些面板,无非就是一些使用面板外观图片做背景图的盒子,然后,在这些盒子里面,放上具体的内容,使用 padding 控制内容的摆放位置,使用 margin 调整面板本身的摆放位置,由于面板的尺寸是固定的,我们依此确立了盒子的尺寸之后,就无需再关心尺寸问题,然后,不论你怎样调整 padding 和 margin,都不会影响面板本身的结构。这是 IE6 盒子模型。

而在 W3C 的盒子模型中,调整 padding 和 margin ,都会影响盒子的尺寸,你在调整内容摆放位置的同时,极有可能打乱面板本身的结构。

2. 百分比级尺寸 + 像素级边界问题

W3C 盒子模型在设计中最让人头疼的是,假如你有一个不确定宽度的容器,想在里面放置两个同样大小的盒子,最合理的的做法当时是设置每个盒子的宽度为 50%,这样,不管你的容器宽度为多大,这两个盒子总能自动适应这个宽度,然而,前提是你不要设置任何 padding 或 border,而,现实中,为了防止两个盒子中的内容互相挨得太近,你肯定要设置 padding,一旦设置了 padding,就会发现你的容器被撑破了。

当然你会说,每个盒子的宽度不要设为 50%,可以设为 45%,然后为每个盒子再加一个 5% 的 padding,这是一个解决办法,但我们在设计中经常有这样的习惯,虽然一段内容的宽度可能不确定,但我们总喜欢它拥有固定 padding,我们并不希望 padding 自动适应,况且,在很多时候,我们希望为一个自适应宽度的盒子,设置一个 1 像素的 border,在这种情形,W3C 盒子模型将陷入困境。

而遇到这种情形,IE6 盒子模型不需要任何周折,你只管将每个盒子的宽度设置为 50%,它们会自动适应容器的宽度,然后,不管你你怎样设置 padding 和 border,都不会撑破你的容器。

W3C 在盒子模型上迷途知返

虽然 W3C 永远都不会承认,但他们显然意识到了这个问题,重新定义盒子模型是不可能了,所以,在 CSS3 中,我们看到了下面这个属性:

box-sizing

box-sizing 有两个可选值,一个是默认的 content-box 一个是 border-box,选用后者,盒子模型将按 IE6 的方式进行处理。

进入论坛参与讨论

来源:http://www.tulaoshi.com/n/20160217/1578300.html

延伸阅读
标签: Web开发
这问题不知道该责骂不会自动更新的ie6,还是该诅咒不懂向下兼容的w3c标准。 这是flash传统的嵌入方法: object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="32" height="32" ...
标签: Web开发
总结出关于W3C CSS标准的一些经验: 一、少用偏门。类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。 二、center不是float的值。很多新手都会把center误认为是float的值,而偏偏不是如此。center只是text-align的值。 三、对齐不能包...
标签: Web开发
不可否认,W3C网页标准刚出来的时候的确很吸引人。那时因为firefox的出现,冲击了浏览器市场,使得大家为了一个小狐狸,而掀起一场网页标准的风波,但是对于设计师来说带来什么?在这场风波我看到的最多就是技术的泛滥。 和一些designer聊天,第一句话就问,“你的网页标准化了”吗,“你的网页又有几处错误”。无形中这些话就给我们...
标签: Web开发
接着上一篇, 统一思想,遵循标准 。如何遵循标准,其实标准有很多,结构标准,表现标准,行为标准。选择标准规范,就优先选择W3C推荐的标准。 结构标准可选项 看下维基百科的HTML推荐标准都有哪些: http://zh.wikipedia.org/wiki/HTML#HTML N多标准,建议选择适合你公司和团队的标准,其实核心理念还是让项目统一遵循一个标准,严格的XHTM...
标签: Web开发
总结出通过W3C XHTML1.0标准需要注意的九个问题: 一、在 div class=tzhI am TZH!/div 这段语句中有什么错误? 标点符号问题。这其实也是大家最容易忽视的问题,其实就是小小的两个引号,就造成了这个错误。虽然很多浏览器在不加引号的情况下仍然能正确识别渲染。但是这样想要通过严格的W3C XHTML国际标准是不可能的,请大家记住...

经验教程

898

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部

如果您有什么好的建议或者疑问,可以联系我们。 商务合作QQ:3272218541;3282258740。商务合作微信:13319608704;13319603564。

加好友请备注机构名称。让我们一起学习、一起进步tulaoshi.com 版权所有 © 2019 All Rights Reserved. 湘ICP备19009391号-3

微信公众号