Html “上：0；左：0；下：0；右：0；”是什么意思 意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28080910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does "top: 0; left: 0; bottom: 0; right: 0;" mean?
提问by Johnsy
I am reading a guide from this siteabout a technique on centering elements.
我正在阅读本网站上有关居中元素技术的指南。
I read the CSS code,
我阅读了 CSS 代码，
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
And I read the explanation too.
我也看了解释。
But what I don't understand is the part that explains "top: 0; left: 0; bottom: 0; right: 0;".
但我不明白的是解释“顶部：0；左：0；底部：0；右：0；”的部分。
It says,
它说，
Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to).
置顶：0；左：0；底部：0；右：0；为浏览器提供一个新的块边界框。此时块将填充其偏移父项中的所有可用空间，即主体或位置：相对；容器。Developer.mozilla.org：对于绝对定位的元素，top、right、bottom 和 left 属性指定从元素包含块的边缘（元素相对于什么定位）的偏移量。
What does this mean? Bounding box? Fill all the available space?
这是什么意思？边界框？填满所有可用空间？
How does "top: 0; left: 0; bottom: 0; right: 0;" work? does it take the 4 sides of a box and stretch them to fill the container? Is that how the values work?
“顶部：0；左侧：0；底部：0；右侧：0；” 工作？是否需要将盒子的 4 个边拉伸以填充容器？这就是价值观的运作方式吗？
What actually happens when I set "top: 0; left: 0; bottom: 0; right: 0;"?
当我设置“顶部：0；左侧：0；底部：0；右侧：0；”时实际发生了什么？
I'm completely lost at this explanation and I would like somebody to rephrase, restate and explain it to me in a more simple and understandable fashion.
我完全迷失在这个解释中，我希望有人以更简单易懂的方式重新表述、重述和解释给我听。
Thank you.
谢谢你。
回答by Scott Weaver
What happens when you use leftand right(or topand bottom) at the sametime is confusing because the spec [6.3. Absolute positioning] tells us that:
当您使用会发生什么left和right（或top和bottom）在相同的困惑，因为该规范[时间6.3。绝对定位] 告诉我们：
For absolutely positioned elements whose containing block is based on a block-level element, this property is an offsetfrom the padding edge of that element.
对于包含块基于块级元素的绝对定位元素，此属性是从该元素的填充边缘的偏移量。
So how can setting positionaffect the sizeof an element? The reason stems from how widths are calculated, which is buried in another section of the spec, [8.1. The width of absolute or fixed positioned, non-replaced elements].
那么设置位置如何影响元素的大小呢？原因源于宽度的计算方式，它隐藏在规范的另一部分[8.1. 绝对或固定定位、非替换元素的宽度]。
If you specify both leftand rightand your element's widthis notauto, then what you are saying really doesn't make sense, and rightis ignored (all statements apply equally well to top/bottom/height):
如果您同时指定leftandright并且您的元素的widthis notauto，那么您所说的确实没有意义，并且会right被忽略（所有语句都同样适用于顶部/底部/高度）：
If none of left/right/width is auto...the values are over-constrained, ignore the value for left (in case the direction property of the containing block is rtl) or right (in case direction is ltr) and solve for that value.
如果 left/right/width 都不是 auto...值被过度约束，忽略左值（如果包含块的方向属性是 rtl）或右值（如果方向是 ltr）并求解那个值。
But if your element has no width set, or width is (the default) auto, this rule kicks in:
但是如果你的元素没有设置宽度，或者宽度是 (默认)auto，这个规则就会生效：
If width is auto, left and right are not auto, then solve for width.
如果宽度是自动的，左右不是自动的，那么求解宽度。
Finally, the equation given that determines the values for these elements is:
最后，确定这些元素值的等式是：
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right ' = 包含块的宽度
We can clearly see that after plugging in our values for leftand rightand the others, widthis the unsolved (and unconstrained) variable, which will turn out to be width of containing box - left - right(more or less) or to put another way: "fill in the space between the offsets".
我们可以清楚地看到，在为leftandright和其他人插入我们的值之后，width是未解决的（和不受约束的）变量，它会变成width of containing box - left - right（或多或少）或换一种方式：“填充偏移量之间的空间”。
回答by shanidkv
You can make 100% width and 100% height using top: 0; left: 0; bottom: 0; right: 0;
您可以使用 top: 0; 制作 100% 宽度和 100% 高度；左：0；底部：0；右：0；
Example: You have one div there is no fixed width & height for that div. in this case you can apply this style and make 100% width & height.
示例：您有一个 div，该 div 没有固定的宽度和高度。在这种情况下，您可以应用此样式并使宽度和高度为 100%。
div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
回答by Anurag Kumar
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Essentially what these property does is it expands your div or any other element containing above property to one full screen. Although if your web page is larger than one full screen you can scroll downwards to see the remaining of your page i.e the styled element is still dependent on your lower page.
本质上，这些属性的作用是将您的 div 或包含上述属性的任何其他元素扩展到一个全屏。尽管如果您的网页大于一个全屏，您可以向下滚动以查看页面的其余部分，即样式元素仍然依赖于您的较低页面。
{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Fixed position on the other hand does the same thing but with one more advantage of non scrolling . It means you can have one entire full screen over your page which can be triggered as and when required and your upper div containing the above property will be independent of lower page.
另一方面，固定位置做同样的事情，但还有一个非滚动的优势。这意味着您可以在您的页面上有一个完整的屏幕，可以在需要时触发，并且包含上述属性的上 div 将独立于下页面。
