当前位置: 网站建设 > 网页设计 > 建站经验 >

IE6与W3C标准的盒模型差异

时间:2013-03-02 03:48来源:未知 作者:admin 点击:

标签:IE6与W3C标准的盒模型差异 W3C(7)标准(26)例子(6)差异(3)我(6)一个(102)再举(1)模型(12)假若(1)IE6(28)
再举一个例子,假若我们有一面墙,要在上面挂10幅油画,油画是用相框裱糊的,相框的边框相当于 border,油画和边框之间的间隔相当于 padding,相框之间的距离相当于 margin,这个例子和 Web 布局设计已经很濒临了,对任何人来说,使用 IE6 的盒子模型,将整
IE6与W3C标准的盒模型差异》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335642013.htm

 

  

  再举一个例子,假若我们有一面墙,要在上面挂10幅油画,油画是用相框裱糊的,相框的边框相当于 border,油画和边框之间的间隔相当于 padding,相框之间的距离相当于 margin,这个例子和 Web 布局设计已经很濒临了,对任何人来说,使用 IE6 的盒子模型,将整个相框,包含油画当做一个整体更容易布局,IE6-IE7-IE8-FireFox css的浏览器兼容技巧,当你晓得了整个相框的尺寸后,不用再去斟酌 padding, border, margin 这个因素的影响,每个相框就是一个整体,至于 padding, border 与 margin,IE6,7下实现white-space pre-wrap;,这是浏览器本人事,不需要设计者去关心。

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

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

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

  

  当然你会说,每个盒子的宽度不要设为 50%,能够设为 45%,然后为每个盒子再加一个 5% 的 padding,这是一个解决方法,但我们在设计中常常有这样的习惯,固然一段内容的宽度可能不肯定,但我们总爱好它领有固定 padding,我们并不愿望 padding 自动适应,况且,在良多时候,我们盼望为一个自适应宽度的盒子,设置一个 1 像素的 border,在这种情况,W3C 盒子模型将陷入窘境。

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

Tag:差异   模型   标准     差异   模型   标准    

 

  在内容区外面,顺次缭绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的。通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子模型最典型的利用是这样:我们有一段内 容,IE6 IE7 IE8 Firefox专属CSS hack,可认为这段内容设置一个边框,为了让内容不至于紧挨着边框,可以设置 padding ,IE6 7 8下cssText值与IE9 Firefox Safari Chrome Opera不同,为了让这个盒子不至于和别的盒子靠得太紧,可以设置 margin。

  W3C 盒子模型在设计中最让人头疼的是,如果你有一个不断定宽度的容器,想在里面放置两个同样大小的盒子,最公道的的做法当时是设置每个盒子的宽度为 50%,这样,不论你的容器宽度为多大,这两个盒子总能主动适应这个宽度,然而,条件是你不要设置任何 padding 或 border,而,事实中,为了避免两个盒子中的内容相互挨得太近,你确定要设置 padding,一旦设置了 padding,就会发明你的容器被撑破了。

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

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

  

  而碰到这种情形,IE6 盒子模型不需要任何周折,你只管将每个盒子的宽度设置为 50%,它们会自动适应容器的宽度,然后,无论你你怎样设置 padding 和 border,都不会撑破你的容器,IE10对CSS3新特性的支持和HTML5新特性的支持

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

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

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

  盒子模型

  在具体的 Web 设计中

  1,IE&FF css hack集. 面板式界面设计

  页面上包括多少个面板,比方一个登录面板,一个最新消息面板,一个投票面板,id和class的选择,这类设计典范的做法是,id和class到底要用哪一个?,用背景图的方式,首先一一设计出这些面板的外观图, 将需要用详细内容调换的处所空着,这些面板,无非就是一些应用面板外观图片做背景图的盒子,而后,在这些盒子里面,放上详细的内容,使用 padding 把持内容的摆放位置,使用 margin 调整面板本身的摆放地位,因为面板的尺寸是固定的,我们依此确破了盒子的尺寸之后,就无需再关怀尺寸问题,然后,不管你怎么调剂 padding 跟 margin,都不会影响面板本身的构造。这是 IE6 盒子模型。

  box-sizing

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

  W3C在盒子模型上误入歧途

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

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

 

  在现实世界中,咱们描写一个物理盒子的时候,假如谈到尺寸,是不会只盘算其盛放的物体的尺寸的,我们还会算上空隙与盒体自身。拿集装箱装箱为例,我们 有 100 只花瓶,每只花瓶用1个纸盒包装,为了预防花瓶粉碎,我们在花瓶四周塞上泡沫,这相当于 padding,HTTPS的七个误解(译文),纸盒的外围纸板相称于 border,在装集装箱的时候,为了防止纸盒之间彼此碰撞,纸盒之间塞上稻草,Http Message结构学习总结,这相称于 margin,很显然,我们向货运公司呈文我们货物尺寸的时候,是要将全部纸盒的尺寸,连同纸盒之间须要塞稻草的缝隙都告知他们的,假使只讲演花瓶的尺 寸,货运公司是不措施装箱的。

--> [网站建设之]IE6与W3C尺度的盒模型差别


(责任编辑:网站建设)
IE6与W3C标准的盒模型差异相关文章
上一篇:IE6-IE7-IE8-FireFox css的浏览器兼容技巧 下一篇:IE6中PNG图像不透明是什么问题
回到顶部