什么是“top：0; left：0; bottom：0;右：0;意思？ [英] What does "top: 0; left: 0; bottom: 0; right: 0;" mean?

问题描述

我正在阅读此网站关于中心元素的技巧。

I am reading a guide from this site about a technique on centering elements.

我读取CSS代码，

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我也阅读了解释。

但是我不明白的是解释top：0; left：0; bottom：0; right：0;的部分。

But what I don't understand is the part that explains "top: 0; left: 0; bottom: 0; right: 0;".

它说：

left：0; bottom：0; right：0;给浏览器一个新的边界框的块。此时，块将填充其偏移父对象中的所有可用空间，这是主体或位置：relative;容器。 Developer.mozilla.org：对于绝对定位的元素，顶部，右侧，底部和左侧属性指定从元素的包含块的边缘的偏移量（元素相对于其定位）。

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).

这是什么意思？边框？填充所有可用空间？

What does this mean? Bounding box? Fill all the available space?

如何top：0; left：0; bottom：0; right：0;工作？它需要一个盒子的四边，并拉伸他们填充容器吗？这是值如何工作？

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?

当我设置top：0; left：0; bottom：0; right：0;时，会发生什么？

What actually happens when I set "top: 0; left: 0; bottom: 0; right: 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.

谢谢。

推荐答案

100％高度使用顶部：0; left：0; bottom：0; right：0;

You can make 100% width and 100% height using top: 0; left: 0; bottom: 0; right: 0;

例如：你有一个div没有固定宽度&该div的高度。在这种情况下，你可以应用这种风格，使100％宽度&

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{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

JSFIDDLE DEMO

JSFIDDLE DEMO

这篇关于什么是“top：0; left：0; bottom：0;右：0;意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！