|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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>
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 |
|