仓酷云

标题: 来谈谈：W3C盒子模子和IE6盒子模子 [打印本页]

作者: 深爱那片海 时间: 2015-1-15 23:18
标题: 来谈谈：W3C盒子模子和IE6盒子模子
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
破洛洛文章简介：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
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 金色的骷髅 时间: 2015-1-25 22:21
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 简单生活 时间: 2015-2-4 12:55
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: admin 时间: 2015-2-9 22:44
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 仓酷云 时间: 2015-2-28 03:41
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 灵魂腐蚀 时间: 2015-3-9 20:44
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 兰色精灵 时间: 2015-3-17 02:10
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 再现理想 时间: 2015-3-23 17:42
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)