css中顶部\底部\左侧\右侧归因的规则是什么？

-2

在下面的css代码中，将绝对定位元素的上边缘设置为距其最近定位祖先上边缘50px以下。css中顶部底部左侧右侧归因的规则是什么？

CSS代码如下：

<html> 
<header> 
<style type="text/css"> 
*{margin:0 0 0 0;padding:0 0 0 0} 
div.block { 
    width: 400px; 
    height: 121px; 
    border: 1px solid red; 
    position:absolute; 
    left:50px; 
    top:50px; 
    margin: auto ; 
} 
div.box{float:left;} 
div img{margin:0px;padding:0;width:121px;height:121px;float:left;} 
div.description{float:left;border 1px solid red;margin:10px 50px;} 
</style> 

</header> 
<body> 
    <div class="block"> 
     <div class="box"><img src="images/set06.jpg" /></div> 
     <div class="description"> 
       <p>music mane: xxxxxxxx</p> 
       <p>author: yyyyyyyy</p> 
       <p>publication：20081001</p> 
       <p>language：english</p> 
      </div> 
    </div> 

</body> 
</html>

我不明白，在显示时设置

bottom:50px; 
    left:50px; 
    right:50px; 
    top:50px

在CSS效果。 DIV的设置为屏幕中心等一样

bottom:0px; 
    left:0px; 
    right:0px; 
    top:0px

为什么bottom:50px;left:50px;right:50px;top:50px; 等于bottom:0px;left:0px;right:0px;top:0px;？ css中顶部\底部\左侧\右侧属性的规则是什么？为什么div被设置为屏幕中心？其中的结果是什么？

<html> 
<header> 
<style type="text/css"> 
*{margin:0 0 0 0;padding:0 0 0 0} 
div.block { 
    width: 400px; 
    height: 121px; 
    border: 1px solid red; 
    position:absolute; 
    bottom:50px; 
    left:50px; 
    right:50px; 
    top:50px; 
    margin: auto ; 
} 
div.box{float:left;} 
div img{margin:0px;padding:0;width:121px;height:121px;float:left;} 
div.description{float:left;border 1px solid red;margin:10px 50px;} 
</style> 

</header> 
<body> 
    <div class="block"> 
     <div class="box"><img src="images/set06.jpg" /></div> 
     <div class="description"> 
       <p>music mane: xxxxxxxx</p> 
       <p>author: yyyyyyyy</p> 
       <p>publication：20081001</p> 
       <p>language：english</p> 
      </div> 
    </div>  
</body> 
</html>

请告诉我更多关于顶部\底部\左\ \归属于CSS的原则。

而最后一个问题：为什么

div.block { 
width: 400px; 
height: 121px; 
border: 1px solid red; 
position:absolute; 
top:0px; 
left:0px 
margin: auto ; 
}

不能在屏幕中心？

为什么

div.block { 
width: 400px; 
height: 121px; 
border: 1px solid red; 
position:absolute; 
top:0px; 
left:0px; 
right:0px; 
bottom:0px; 
margin: auto ; 
}

可以在屏幕中心？
请画四条线来表示top:0px; left:0px;right:0px;bottom:0px;的含义？

来源

2016-02-02 it_is_a_literature

要回答这个问题，您需要了解position和Box Model的工作原理。当您绝对定位某个元素时，元素将采用top，left，right和bottom值并相应地定位它。

所以，认为top和bottom是0，则该元素将被从页面从页面底部的顶部和0px定位0px。这意味着，元素的位置垂直居中。这与left和right相同。

观看演示：

.abs {position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; background: #ccf;}

<div class="abs">Absolutely Positioned</div>

用同样的方法，如果你给一定的价值，平等的价值，它就像在元保证金。这就是我在上面的演示中解释过的，在所有四个方面间距为15px。

在你的情况下，该元素有一个固定的width和height，元素集的初始top left位置，但不能超出width和height。

来源

2016-02-02 12:09:39

请参阅我最后的问题，仍然未知。 –

@it_is_a_literature因为您已将'top'和'left'作为'0'，而不是'bottom'和'right'。 –

0是零或无，但我可以在屏幕上看到比空白更多的空格，div被设置为屏幕中心的事实违反了'top：0px; left：0px; right：0px; bottom：0px;'创建，仍然困惑。 –

尝试从CSS中删除width和height样式，您将看到0px和50px之间的区别。如果设置width和元素height，并设置偏移到任意大小（对于left和right或top和bottom大小相同），它会为中心，因为该元素不能得到任何比它width和height属性较大。

来源

2016-02-02 12:09:58 Dygestor

css中顶部\底部\左侧\右侧归因的规则是什么？

回答

相关问题