Question

在下面的css代码中，将绝对定位元素的上边缘设置为距其最近定位祖先的上边缘下方50px。

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中top \ bottom \ left \ right属性的规则是什么？为什么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中top \ bottom \ left \ right属性原理的更多信息。

最后一个问题：为什么

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;的含义？

Answer 1

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

Answer 2

要回答这个问题，您需要了解position和Box模型的工作原理。当您绝对定位元素时，该元素将获取top，left，right和bottom值，并相应地对其进行定位。

因此，请考虑top和bottom为0，然后该元素将位于页面顶部0px，0px来自页面底部。这意味着，元素垂直居中。 left和right也是如此。

参见演示：

＆＃13;

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

＆＃13;

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

＆＃13;

同样地，如果给出一些值，一个相等的值，它就像元素上的边缘一样。这就是我在上面的演示中解释的内容，在所有四个边上都有15px的间距。

在您的情况下，当元素具有固定的width和height时，元素集的初始top left位置，但不能超出width }和height。

css中top \ bottom \ left \ right属性的规则是什么？

2 个答案: