Question

enter image description here

在＆＃34; CSS权威指南＆＃34;中，作者说＆＃34;这七个属性的值必须加起来元素的包含块的宽度，这通常是宽度的值块元素的父元素＆＃34;。但在下文中，子元素比父元素宽。

enter image description here

// html

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

// style

        .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;
        }

所以我有两个问题：

作者对＆＃34;七个属性的含义必须加起来元素包含块的宽度＆＃34;。
为什么在我的例子中，元素会突出父元素。
在编辑版本中，七个属性加起来元素的宽度＆＃39;包含块似乎运作良好。为什么这个等式不适用于我的例子？

编辑版本

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

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

enter image description here

// 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

作者对“七个属性必须加起来元素包含块的宽度”的含义是什么。

enter image description here

他正在教你CSS Box Model，在这里，你正在使用块级别的div元素，块级意味着他们需要默认情况下，整个水平空间不同于span或i或b标记，它们是内联元素。

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

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

因此，在上述情况下，您的元素总共为120x120，因为它会在元素的所有四个大小上加10px个padding。

解释填充语法

您有两种不同的padding语法，如下所示......

padding: 30px 0;中的{p> .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，接下来是{{} 1}}和最后bottom是20px。

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

padding-left

因此，padding: 0 20px; --^---^--- top bottom/left right和top分别设置为bottom，0和right分别设置为left ...

解释CSS

注意：元素都没有设置20px，因此屏幕也是如此你看到我所附加的是计算。因此，请忽略其中的高度完全。

height

此处，您的元素为.wrapper { width: 500px; padding: 30px 0; border: 1px solid #0066cc; } 宽，为什么？正如我所说，502px会在元素的所有四边添加，因此它会在所有四边添加border，但1px适用于padding和{仅限{1}}。最好使用像Firebug这样的工具，它会向你展示幕后发生的事情。

enter image description here

来到第二个片段，其中包含以下语法

top

此处，它现在向您的元素添加了bottom .content-main { padding: 0 20px; border: 2px solid #00CC33; }，但2px现已应用于border和padding，而left则不会right 1}}和top所以现在计算将是

enter image description here

来到

的最后一个片段

bottom

在这里，只应用了.main { width: 500px; border: 1px solid #f00; }，但为什么会消失？用技术词来说，为什么会溢出？因为您已定义border。因此，您为父元素width设置了padding，因此它将从左侧按padding: 0 20px;微调子元素。我会附上一张Firebug屏幕，告诉你它为什么被轻推......

enter image description here

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

因为您要为20px width

定义500px .main

Demo （当您取出div时会发生什么

默认的盒子模型称为width

这可以通过定义一个名为box-sizing的新{CSS}引入属性设置为content-box来改变，这将改变您的border-box，以便计算box-model并且padding 在元素内而不是在外面

块级元素的水平格式

1 个答案:

解释填充语法

解释CSS