Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Layout 为什么认为W3C盒子模型更好? 为什么大多数开发者认为W3C要优于IE浏览器使用的Box模型?_Layout_Css - Fatal编程技术网

Layout 为什么认为W3C盒子模型更好? 为什么大多数开发者认为W3C要优于IE浏览器使用的Box模型?

Layout 为什么认为W3C盒子模型更好? 为什么大多数开发者认为W3C要优于IE浏览器使用的Box模型?,layout,css,Layout,Css,在Internet Explorer上开发外观与您所希望的一致的页面非常令人沮丧,但我发现W3C box模型违反直觉。例如,如果边距、填充和边框被分解到宽度中,我可以为所有列指定宽度值,而不必担心列的数量以及对它们的填充和边距所做的任何更改 使用W3C的box模型,我不得不担心我拥有的列的数量,并开发类似于数学公式的东西来计算修改边距和填充时的正确宽度值。更改它们的值将很困难,特别是对于复杂的布局。考虑一下我写的这个小框架: #content { margin:0 auto 30px a

在Internet Explorer上开发外观与您所希望的一致的页面非常令人沮丧,但我发现W3C box模型违反直觉。例如,如果边距、填充和边框被分解到宽度中,我可以为所有列指定宽度值,而不必担心列的数量以及对它们的填充和边距所做的任何更改

使用W3C的box模型,我不得不担心我拥有的列的数量,并开发类似于数学公式的东西来计算修改边距和填充时的正确宽度值。更改它们的值将很困难,特别是对于复杂的布局。考虑一下我写的这个小框架:

#content {
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width: 900px;
}

    #content .column {
        float: left;
        margin:0 20px 20px 20px;
    }
    #content .first {
        margin-left: 0;
    }
    #content .last {
        margin-right: 0;
    }

        .width_1-4 {
            width: 195px;
        }
        .width_1-3 {
            width: 273px;
        }
        .width_1-2 {
            width: 430px;
        }
        .width_3-4 {
            width: 645px;
        }
        .width_1-1 {
            width: 900px;
        }
除非有三列,否则我在这里指定的值将不稳定,因此在
0+20+20+20+20+0
处的边距也将不稳定。很难修改填充和边距;我的整个宽度必须重新计算。如果列宽包含了填充和边距,我所需要做的就是更改宽度,这样我就有了我的布局。我更少地批评盒子模型,更希望理解为什么它被认为更好,因为我发现它很难使用


我做错这件事了吗?使用W3C的box模型似乎有悖常理。

就我个人而言,我更喜欢IE的box模型,而不是偶尔感到羞耻。正如OP所指出的,有一个预定义的宽度来减去边距、填充和边框宽度似乎比有一个宽度来添加边距、填充和边框宽度更有意义


另一方面,我可以非常愉快地使用这两种模型,我真正想要的是实现之间的一致性,无论选择哪种实现。

一个词的答案-
-框大小


.

与其说这是一个好还是坏的问题,不如说这是一个遵循公认组织标准的问题,而不是


另一方面,你的问题是有人想把他的文本包装在一个300px的容器中,这个容器与下一个容器的距离为10像素。。现在,为了计算宽度,您必须进行与示例相同的计算。。这是一个你如何看待同一个问题的例子。

不是每个人都认为它更好。摘自

就我个人而言,我觉得W3C的盒子模型不直观。引用我自己的话:

从逻辑上讲,长方体是从一个边框到另一个边框测量的。拿一个物理盒子,任何盒子。把明显比盒子小的东西放进去。请任何人测量箱子的宽度。他将测量盒子两侧之间的距离(“边框”)。没有人会想到测量盒子里的东西

创建用于保存内容的框的Web设计师关心框的可见宽度,以及从边框到边框的距离。网站用户的视觉提示是边框,而不是内容。没有人对内容的宽度感兴趣


我同意,
边框框
模型更有意义(至少对我来说是这样)。最初的W3C框模型存在争议,导致CSS3中定义了。如果您总是在框中使用填充、边框和边距,IE模型可能看起来更好、更符合逻辑,但情况很少如此。 是的,WC3盒子模型稍微复杂一点,但它在可能性和对布局的严格“像素级”控制方面有所回报。
一旦你用方框模型做了足够的布局,你就习惯了它很安静,一旦你探索它的力量,你就永远不想考虑IE bug来做网页布局的更好方法。相信我,我已经做到了。

虽然我发现W3C在大多数情况下都是正确的,但在这种特殊情况下,我不得不说IE的盒子模型更优越


我经常遇到的一个常见问题是,当我想将宽度设置为一个百分比,并使用像素填充时。为了让一个div拉伸到100%并添加填充,我不得不使用两个div,而不是一个div——否则在一个div上应用100%会比考虑填充后的预期更高。这使得使用流体布局非常困难。

TL;博士,但问题的答案是:因为W3C本质上是一个标准,人们不喜欢它,微软是如何打破所有标准的。好问题。我个人认为(这一次)微软的做法是正确的,但我把浏览器战争归咎于两大阵营。也许wc3应该通过定义一个新的doctype来迎合微软的做法,让设计师选择他们想要实现的盒子模型。顺便说一句,有一个非常简单的方法来解决填充破坏布局的问题。这就是遵循这个简单的咒语:宽度被添加到容器中。。。填充将添加到容器内的内容中。你的布局永远不会中断。从来没有。仍然有很多css,我从来没有怀疑过可能存在+1对于那个(现在已书签)链接=)我在同一条船上。顺便说一句,这个模板布局模块(CSS3的一部分)是我见过的CSS最酷的东西@阿努拉格,我突然对CSS3更加乐观了。希望它至少能在html5上尽快实现…=)@ricebowl看到w3的工作方式再次确认了我对委员会的信心:)。。他们正在做一些令人敬畏的辉煌的事情嗯…看到W3的工作方式肯定了我对委员会的信心。尽管我会把它交给他们,而且很高兴,我读得越多,听到的越多,关于HTML5和CSS3,我就越高兴=)一旦我无意中开始为IE的box模型编码并成为它的粉丝。这是盒子的完美逻辑。要求W3C经营一家集装箱运输公司,一周后它就死了。@Nirmal,是的。我认为这基本上与PPK在Quirksmode链接上的观点相同。我本来想引用它的,但是,当我记起它在哪里的时候