仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 751|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:W3C盒子模子和IE6盒子模子

[复制链接]
深爱那片海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:18:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
破洛洛文章简介:IE8盒子模子比W3C的更公道.
IE6盒子模子中,盒子的尺寸包括了内容区,padding,border和margin这四个部分,而W3C的盒子模子中,盒子的尺寸只包括内容区,padding,border和margin被扫除在盒子尺寸以外。盒子模子(BoxModel)是CSS的中心,古代Web结构计划复杂说就是一堆盒子的分列与嵌套,把握了盒子模子与它们的摆放把持,会发明再庞大的页面也不外云云,但是,任何优美的事物都出缺憾,盒子模子有两种分歧的解释,一种来自IE6,一种来自W3C尺度扫瞄器。
盒子模子

下图就是一个典范的盒子模子表示图

在内容区表面,顺次环绕着padding区,border区,margin区,这一模子布局在一切支流扫瞄器都是分歧的。经由过程盒子模子,我们能够为我们的内容设置界限,留白和边距,盒子模子最典范的使用是如许:我们有一段内容,能够为这段内容设置一个边框,为了让内容不至于紧挨着边框,能够设置padding,为了让这个盒子不至于和其余盒子靠得太紧,能够设置margin。
到今朝为止,统统都很完善,直到当我们想为这个盒子设置一个尺寸的时分。
IE6和W3C尺度扫瞄器对盒子模子的分歧解释

当我们试图为一个盒子设置尺寸的时分,成绩呈现了。IE6和W3C尺度扫瞄器对盒子模子有分歧的注释,这个分歧注释体现在盒子的尺寸上,下图是两品种型的扫瞄器对盒子尺寸的分歧注释表示图:


能够看出,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的体例举行处置。
</p>
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-17 21:44:26 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
金色的骷髅 该用户已被删除
板凳
发表于 2015-1-25 22:21:41 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
简单生活 该用户已被删除
地板
发表于 2015-2-4 12:55:09 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
admin 该用户已被删除
5#
发表于 2015-2-9 22:44:00 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
6#
发表于 2015-2-28 03:41:37 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
灵魂腐蚀 该用户已被删除
7#
发表于 2015-3-9 20:44:33 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
兰色精灵 该用户已被删除
8#
发表于 2015-3-17 02:10:25 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
再现理想 该用户已被删除
9#
发表于 2015-3-23 17:42:16 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-30 04:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表