《
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标准的盒模型差异相关文章