Question

我想在页面上创建3列，我想为每列提供20px的填充，并且向第1列和第2列提供20px的magin-right，我现在的问题是如何计算每列的宽度给出一个宽度为960px的页面？我是网上的新手，想知道如何正确地进行宽度计算？是否，填充增加了页面的宽度？边境怎么样？

提前致谢。

Answer 1

我建议阅读this CSS tricks article。充分了解box model：

在CSS中，使用标准盒模型描述每个[元素]。该模型描述了元素占用空间的内容。每个框都有四条边：边距边，边框边，填充边和内容边。

所以，基本上：

Width = width + padding-left + padding-right + border-left + border-right

阅读并理解这一点，以及CSS定位的基础知识。然后你可以看看将box-sizing设置为其他东西（你会看到border-box使用了很多，特别是在响应式设计中。它（可以说）是一种更合乎逻辑的方法，但正确获取是很重要的如果你想要进步，可以使用标准模型上的句柄.IE7（如果它甚至在你的雷达上）不支持box-sizing。

Firebug和/或Chrome开发工具目前是您最好的朋友。

Answer 2

有多个图层添加到元素中（请参阅Box-Model）。

通常在设置宽度时，添加填充将改变元素的大小，这有点不直观。但是大多数浏览器都支持css-attribute box-sizing，这会改变计算宽度（和高度）的方式：

值：

box-sizing: content-box;
    width = content

box-sizing: padding-box;
    width = content + padding (added to the spec later, less support)

box-sizing: border-box;      
    width = content + padding + border (easiest to understand, recommended)

box-sizing: margin-box;      
    width = content + padding + margin (quite useless)

正如我所说，在大多数项目中，我强烈推荐box-sizing: border-box;，因为它得到广泛支持且最直观。您可能需要为它添加前缀。我会这样做（Shotgun方法）：

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

有关完整文档，请参阅w3c School;有关浏览器支持的概述，请参阅caniuse。

Answer 3

填充和边框宽度都会增加元素（列）的宽度。保证金不会影响列的宽度，但会包含在您的常规页面宽度中。

您可以阅读有关Box模型here

的信息

在你的情况下，

column 1: 20 + X + 20

column 2: 20 + x + 20

column 3: 20 + X + 20

1和2后的

保证金：20 + 20

所以...

8 * 20 + 3X = 960

x = 266.6666 ...（你的专栏宽度）

在HTML中计算子块的宽度

3 个答案: