这些值如何优先于CSS?

nor*_*ner 8 css

我正在学习CSS并且因相对布局而感到困惑.如果您为定位提供冲突的属性值会发生什么?例如left: 50px;right 50px;

我试着自己,从我可以告诉,right总是得到,如果有两个下降leftright.还有什么关于topvs bottom

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    left: 30px;
    right: 30px;
    border: 10px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>Lorem Ipsum insert text here....</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Das*_*sar 12

来自MDN:

如果同时定义了正确的CSS属性和左侧CSS属性,则会过度指定元素的位置.在这种情况下,当容器从左到右(即右计算值设置为-left)时,左值优先,而当容器从右到左时,右值优先(是左计算值设置为-right).

所以,什么时候direction: ltr,left优先.什么时候direction: rtl,right优先.

For topbottom(MDN):

指定顶部和底部时,只要未指定高度,自动或100%,顶部和底部距离都将得到遵守.否则,如果以任何方式约束高度,则top属性优先,bottom属性被忽略.