[英]horizontal formatting for block-level element
In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element's containing block, which is usually the value of width for a block element's parent". 在《 CSS权威指南》中,作者说:“这七个属性的值必须等于元素包含块的宽度,通常是块元素父元素的宽度值”。 But In the following, the child element is wider than the parent.
但是在下面,子元素比父元素宽。
//html // 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;
}
So I have two quesions: 所以我有两个问题:
What does the author mean for the "seven properties must add up to the width of the element's containing block". 作者的意思是“七个属性必须合计元素包含块的宽度”。
Why in my example, the element will stick out the parent. 为什么在我的示例中,元素将突出显示父级。
in the edit version, the seven properties add up to the width of the element' containing block seems work well. 在编辑版本中,这七个属性加起来等于元素包含块的宽度,效果似乎很好。 Why the equation not apply to my example?
为什么方程式不适用于我的示例?
EDIT VERSION 编辑版本
p.wide width is 438px, the author calculate as following p.wide宽度为438px,作者计算如下
10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width) 10像素(左侧边距)+ 1(左侧边框)+ 0 + 438像素+ 0 +1(右侧边框)– 50像素(右侧边缘)= 400像素(父级宽度)
// HTML // HTML
<div>
<p class="wide">A paragraph</p>
<p>Another paragraph</p>
</div>
// CSS // CSS
div {width: 400px; border: 3px solid black;}
p.wide {
margin-left: 10px; width: auto; margin-right: -50px;
border: 1px solid #f00;
}
What does the author mean for the "seven properties must add up to the width of the element's containing block". 作者的意思是“七个属性必须合计元素包含块的宽度”。
He is teaching you CSS Box Model , here, you are using div
elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span
or i
or b
tags, which are inline elements. 他正在教您CSS Box Model ,在这里,您使用的是本质上是块级的
div
元素, 块级意味着默认情况下它们会占据整个水平空间,这与内联元素的span
或i
或b
标签不同。
So when you use padding
or border
they are added outside of the element and not inside. 因此,当您使用
padding
或border
它们会添加到元素外部而不是内部。 So for example you have an element of say 100x100 in dimension, and you add a padding
like 例如,您有一个尺寸为100x100的元素,并添加了以下
padding
element {
width: 100px;
height: 100px;
padding: 10px;
}
So in the above case, your element will be 120x120 in total, because it will add up 10px
of padding
on all four size of your element. 因此,在上述情况下,您的元素总计为120x120,因为它将在元素的所有四个尺寸上加起来
10px
的padding
。
You have two different padding
syntax, which are as follows... 您有两种不同的
padding
语法,如下所示...
padding: 30px 0;
in .wrapper
and padding: 0 20px;
在
.wrapper
和padding: 0 20px;
in .content-main
so these aren't the same. 在
.content-main
所以它们是不一样的。
Both the above syntax are nothing but short hand syntax of padding
... The complete version looks like... 上面的两种语法不过是
padding
简写语法...完整的版本看起来像...
padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */
So in the above example, you have to go clock wise, so 5px
is nothing but padding-top: 5px;
因此,在上面的示例中,您必须顺时针
5px
,因此5px
就是padding-top: 5px;
, then comes 10px
which is right
, next is bottom
and the last 20px
is padding-left
. ,然后是
10px
在right
,下一个是bottom
,最后20px
是padding-left
。
So what when it's just two parameters defined, that means... 那么,当仅定义两个参数时,那意味着...
padding: 0 20px;
--^---^---
top bottom/left right
So, top
and bottom
are set to 0
here and right
and left
to 20px
respectively... 因此,此处的
top
和bottom
分别设置为0
, right
和left
分别设置为20px
...
Note: None of the element has the
height
set by you, so the screens you see ahead which I've attached are computed .注意:元素的
height
都不由您设置,因此将计算您前面看到的屏幕。 So ignore height in them completely.因此完全忽略它们的高度 。
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
Here, your element is 502px
wide , so why? 在这里,您的元素宽度为
502px
,为什么呢? As I said that border
will add on all four sides of the element, and hence it will add 1px
on all four sides but your padding
is applied to top
and bottom
only. 就像我说的那样,
border
将在元素的所有四个侧面上添加,因此它将在所有四个侧面上添加1px
,但是您的padding
仅应用于top
和bottom
。 It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes. 最好使用Firebug之类的工具,它将以图形方式向您展示幕后发生的事情。
Coming to the second snippet which has the following syntax 来到第二个片段,其语法如下
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
Here, it is now adding 2px
border
to your element but, the padding
is now applied to left
and right
and nothing for top
and bottom
so now the computation will be 在这里,它现在为您的元素添加了
2px
border
,但是, padding
已应用于left
和right
, top
和bottom
因此现在计算将
Coming to the last snippet which is 来到最后一个片段
.main {
width: 500px;
border: 1px solid #f00;
}
Here, just border
is applied, but why it goes out? 在这里,仅应用了
border
,但是为什么会消失呢? In technical words, why it overflows? 用技术术语来说,为什么会溢出? Because you have
width
defined. 因为您已定义
width
。 So since you have padding
set for the parent element, which is padding: 0 20px;
因此,由于您为父元素设置了
padding
,因此padding: 0 20px;
, so it will nudge the child element by 20px
from the left side. ,因此它将在左侧将子元素微移
20px
。 I'll attach a screen of Firebug to show you why it is nudged.... 我将附加一个Firebug屏幕,向您展示为什么轻推它。
Why in my example, the element will stick out the parent. 为什么在我的示例中,元素将突出显示父级。
Because you are defining width
of 500px
to your .main
div
因为您要为
.main
div
定义500px
width
Demo (What happens when you take out the width
) 演示 (取出
width
时会发生什么)
The default box model is known as content-box
默认的框模型称为
content-box
This can be altered by defining a new CSS3 introduced property called box-sizing
set to border-box
which will alter your box-model
in such a way that it will count the padding
and border
inside the element instead of outside 可以通过定义一个新的CSS3引入的属性来更改此属性,该属性称为
box-sizing
设置为border-box
,它将更改您的box-model
,这样它将计算元素内部的padding
和border
,而不是外部
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.