html - block 级元素的水平格式

Question

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

//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. 作者所说的“七个属性必须加起来等于元素包含 block 的宽度”是什么意思。

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

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

编辑版本

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

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

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

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

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

所以在上面的例子中，你的元素总共将是 120x120，因为它将在你的元素的所有四种尺寸上添加 10px 的 padding。

---

解释填充语法

你有两种不同的padding语法，它们如下...

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

以上两种语法不过是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 code> 到 20px 分别...

---

解释 CSS

Note: None of the element has the height set by you, so the screens you see ahead which I've attached are computed. So ignore height in them completely.

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

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

---

来到具有以下语法的第二个片段

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

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

---

来到最后一个片段是

.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在元素内而不是在外