Question

我正在阅读这篇site关于中心元素技术的指南。

我读了CSS代码，

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

我也阅读了解释。

但我不明白的是解释的部分＆＃34; top：0;左：0;底部：0;右：0;＆＃34;。

它说，

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

这是什么意思？包围盒？填写所有可用空间？

＆＃34; top：0;左：0;底部：0;右：0;＆＃34;工作？它是否需要盒子的四个边并伸展它们以填充容器？这是价值观的运作方式吗？

当我设置＆＃34; top：0时实际发生的事情;左：0;底部：0;右：0;＆＃34;？

我完全迷失在这个解释中，我希望有人能够以更简单易懂的方式对我进行改写，重述和解释。

谢谢。

Answer 1

在相同的时间使用left和right（或top和bottom）会发生什么事情令人困惑，因为规格[ 6.3. Absolute positioning]告诉我们：

对于包含块的绝对定位元素块级元素，此属性是填充的偏移量 该元素的边缘。

那么如何设置位置会影响元素的大小？原因在于如何计算宽度，这些宽度隐藏在规范的另一部分[8.1. The width of absolute or fixed positioned, non-replaced elements]中。

如果同时指定left和right，而您的width元素不 auto，那么您所说的是什么真的没有用，right被忽略了（所有陈述同样适用于top / bottom / height）：

如果左/右/宽度都不是自动...值过度约束，则忽略 left的值（如果包含的方向属性 block是rtl）或right（如果方向是ltr）并为此解决值。

但是如果你的元素没有设置宽度，或者宽度是（默认值）auto ，那么这个规则就会出现：

如果width为auto，则left和right不是auto，则求解宽度。

最后，确定这些元素的值的等式是：

＆＃39;左＆＃39; +＆＃39; margin-left＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; + ＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; + ＆＃39;右＆＃39; =包含块的宽度

我们可以清楚地看到，在插入left和right以及其他人的值后，width是未解决的（并且不受约束的）变量，结果为{ {1}}（或多或少）或换句话说：＆＃34;填写偏移量之间的空格＆＃34;。

Answer 2

使用top：0可以制作100％宽度和100％高度;左：0;底部：0;右：0;

示例：您有一个div没有固定宽度＆amp;那个div的高度。在这种情况下，您可以应用此样式并使100％宽度＆amp;高度。

div{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

<强> JSFIDDLE DEMO

Answer 3

 {

            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

}

基本上这些属性的作用是将div或包含上述属性的任何其他元素扩展为一个完整的屏幕。虽然如果您的网页大于一个全屏，您可以向下滚动以查看页面的剩余部分，即样式元素仍然取决于您的较低页面。

$("#test").click({
  temp: ["click", "on", "me"]
}, function(e) {
  $('#result').html(e.data.temp.join(','))
});

另一方面，固定位置做同样的事情，但还有一个非滚动的优点。这意味着您可以在页面上拥有一个完整的全屏幕，可以在需要时触发，包含上述属性的上部div将独立于下页。

什么＆＃34; top：0;左：0;底部：0;右：0;＆＃34;意思？

3 个答案: