代码之家 › 专栏 › 技术社区 › Mohamad

为什么W3C盒子模型被认为更好?[关闭]

css layout

Mohamad · 技术社区 · 15 年前

为什么大多数开发人员认为W3C Box模型比Internet Explorer使用的Box模型更好?

在Internet Explorer上开发那些看起来像你想要的页面是非常令人沮丧的,但是我发现W3C盒子模型有违直觉。例如,如果在宽度中考虑了页边距、填充和边框,我可以为所有列分配宽度值,而不必担心列数以及对它们的填充和边距所做的任何更改。

使用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的盒子模型似乎有违直觉。一些建议会非常感谢。

谢谢!

6 回复 | 直到 12 年前

Anurag 15 年前

一个字回答- -box-sizing

You choose how you want your box model to work .

Andy E 12 年前

不是每个人都认为它更好。从中提取报价 Quirksmode .

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

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

为保存内容创建框的网页设计师关心 看得见的 框的宽度,大约是从边框到边框的距离。边框而不是内容是网站用户的视觉提示。没有人对内容的宽度感兴趣。

我同意, border-box 模型更有意义(至少对我来说是这样)。对最初的W3C盒模型存在争议,导致 box-sizing property 在CSS3中。

David Thomas 15 年前

就我个人而言,我更喜欢——而不是我偶尔感到羞耻的——盒子模型。正如操作说明的那样似乎有一个预先定义的宽度,从中可以看到页边、填充和边框宽度减法 ,而不是它们的宽度补充 .

另一方面,我可以很高兴地和两个模特一起工作,我真正想要的是 一致性 在实现之间,选择哪个实现。

Jon 13 年前

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

我经常遇到的一个常见问题是,当我想将宽度设置为一个百分比,并有一个像素填充。为了让一个div拉伸到100%并添加填充,我不得不使用两个div而不是一个div,否则在一个div上应用100%实际上会比填充被分解后的期望值多。这使得处理流体布局非常困难。

Gabriele Petrioli 15 年前

这不是一个好或坏的问题,而是一个接受的组织的标准,而不是……

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

-3

Ilia Penchev 13 年前

如果总是对一个框使用填充、边框和边距,那么IE模型可能看起来更好,更符合逻辑,但很少如此。是的,wc3盒子模型有点复杂,但从可能性和对布局的严格“到像素”控制方面来说,它会有所回报。一旦你用盒子模型做了足够多的布局,你就会很好地习惯它,一旦你探索它的力量,你将永远不想考虑IE bug是一种更好的网络布局方式。相信我,去过那里。