1

我想在一个页面上创建 3 列，我想给每列一个 20px 的填充，给第 1 列和第 2 列一个 20px 的边距，我现在的问题是如何计算给定页面的每一列的宽度宽度为 960 像素？我是网络新手，想知道如何正确计算宽度？填充是否会增加页面的宽度？边界呢？

提前致谢。

4

3 回答 3

2

我推荐阅读这篇 CSS 技巧文章。深入了解盒子模型：

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

所以，基本上：

宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框

阅读并理解这一点，以及 CSS 定位的基础知识。然后你可以考虑设置box-sizing其他东西（你会看到border-box很多，特别是在响应式设计中。它（可以说）是一种更合乎逻辑的方法，但如果你愿意，正确掌握标准模型很重要根本没有进展。IE7（如果它甚至在你的雷达上）不支持box-sizing.

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

于 2013-04-15T13:37:09.147 回答
1

有多个层被添加到一个元素中（参见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;它，因为它受到广泛支持且最直观。您可能需要为其添加前缀。我会这样做（霰弹枪方法）：

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

请参阅w3c School以获取完整的文档和caniuse以了解浏览器支持的概述。

于 2013-04-15T13:31:44.817 回答
1

填充和边框宽度都添加到元素（您的列）的宽度。边距不会影响列的宽度，但会包含在您的一般页面宽度中。

您可以在此处阅读有关盒子模型的信息

在你的情况下，

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...（您的列宽）

于 2013-04-15T13:37:20.123 回答