块级元素的水平格式

Question

在《CSS 权威指南》中，作者说“这七个属性的值加起来必须等于元素包含块的宽度，通常是块元素父级的宽度值”。但在下面，子元素比父元素宽。

//html

<div class="wrapper">
    <div class="content-main">
        <div class="main">This is main</div>
    </div>
</div>

// 风格

        .wrapper {
            width: 500px;
            padding: 30px 0;
            border: 1px solid #0066cc;
        }

        .content-main {
            padding: 0 20px;
            border: 2px solid #00CC33;
        }

        .main {
            width: 500px;
            border: 1px solid #f00;
        }

所以我有两个问题：

1. 作者所说的“七个属性加起来必须等于元素包含块的宽度”是什么意思。

2. 为什么在我的示例中，元素会突出父元素。

3. 在编辑版本中，这七个属性加起来就是元素包含块的宽度，看起来效果很好。为什么等式不适用于我的示例？

编辑版本

p.wide宽度为438px，作者计算如下

10px（左边距）+ 1（左边框）+ 0 + 438px + 0 + 1（右边框）- 50px（右边距）= 400px（父宽度）

// HTML

<div>
  <p class="wide">A paragraph</p>
  <p>Another paragraph</p>
</div>

// CSS

div {width: 400px; border: 3px solid black;}
p.wide {
   margin-left: 10px; width: auto; margin-right: -50px;
   border: 1px solid #f00;
}

Answer 1

作者所说的“七个属性加起来必须等于元素包含块的宽度”是什么意思。

他在教你CSS Box Model，在这里，你使用的是div元素，它们本质上是块级，块级意味着它们占据了默认情况下整个水平空间，不像span或i或b标签，它们是内联元素。

因此，当您使用 padding 或 border 时，它们会被添加到元素外部而不是内部。因此，例如，您有一个尺寸为 100x100 的元素，然后添加一个 padding 类似

element {
   width: 100px;
   height: 100px;
   padding: 10px;
}

因此，在上述情况下，您的元素总共将是 120x120，因为它将在您的元素的所有四种尺寸上加起来 10px 和 padding。

---

解释填充语法

你有两种不同的padding语法，分别如下...

.wrapper 中的padding: 30px 0; 和.content-main 中的padding: 0 20px; 所以它们不一样。

以上两种语法都只是padding的简写语法……完整版看起来像……

padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */

所以在上面的例子中，你必须顺时针方向，所以5px只是padding-top: 5px;，然后是10px，即right，接下来是bottom，最后一个20px是padding-left.

那么当它只定义了两个参数时，这意味着......

padding: 0 20px;
      --^---^---
top bottom/left right

所以，top 和 bottom 在此处设置为 0，right 和 left 分别设置为 20px...

---

解释 CSS

注意：没有一个元素有你设置的height，所以屏幕 你看到我附上的前面是计算的。所以忽略其中的 height 完全。

.wrapper {
    width: 500px;
    padding: 30px 0;
    border: 1px solid #0066cc;
}

这里，你的元素是502px wide，那为什么呢？正如我所说，border 将添加到元素的所有四个侧面，因此它将在所有四个侧面添加1px，但您的padding 仅应用于top 和bottom。最好使用像 Firebug 这样的工具，它会以图形方式显示幕后发生的事情。

---

来到第二个sn-p，语法如下

.content-main {
    padding: 0 20px;
    border: 2px solid #00CC33;
}

在这里，它现在将 2px border 添加到您的元素中，但是 padding 现在应用于 left 和 right 并且对于 top 和 bottom 没有任何内容，所以现在计算将是

---

来到最后一个sn-p是

.main {
    width: 500px;
    border: 1px solid #f00;
}

这里只应用了border，但是为什么会消失呢？用技术术语来说，为什么它会溢出？因为您定义了width。因此，由于您为父元素设置了padding，即padding: 0 20px;，因此它将从左侧轻推子元素20px。我会附上一个 Firebug 的屏幕来告诉你为什么它被轻推......

为什么在我的例子中，元素会突出父元素。

因为您将500px 中的width 定义为您的.main div

Demo （取出width会发生什么）

---

默认的盒子模型称为content-box

这可以通过定义一个名为box-sizing 的新CSS3 引入属性设置为border-box 来改变，这将改变你的box-model，从而将padding 和border 计算在内 元素而不是 outside