鍍金池/ 問答/HTML/ CSS中同時使用left、right產(chǎn)生的效果問題？

CSS中同時使用left、right產(chǎn)生的效果問題？

在一段樣式代碼中同時使用了left、right、top、bottom，但產(chǎn)生的效果比較費解，這是代碼：

<!DOCTYPE html>
<html>
<head>
  <title>document</title>
  <style>
      .container{
          width:100px;
          height:100px;
          position:relative;
      }
      .inner-box{
          background:#000;
          left:0;
          top:0;
          bottom:0;
          right:50%;
          position:absolute;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="inner-box"></div>
    </div>
</body>
</html>

inner-box并沒有定義寬度，但運行結(jié)果卻產(chǎn)生了寬度(黑色部分)：
圖片描述

我發(fā)現(xiàn)這是由于代碼中同時用了left、right、top、bottom造成的，請問為什么會這樣呢？怎么正確理解它？

回答
編輯回答
毀了心

你的inner-box是一個絕對定位元素，top等值分別指div各邊到父元素(已定位)的各邊的定位值

例如說當只有top:0; bottom:0;時

inner-box雖然沒有寬高，但為了滿足貼著上面，也要貼著下面，就不得不拉伸，相當于設(shè)置了一個height:100%

那么如果又來個left:0;right:0;呢 同上，也會拉伸，相當于設(shè)置了一個width:100%;

ok，那么回到源代碼，此時left:0;right:50%;這樣的話 相當于設(shè)置了width:50%;
問題，也就迎刃而解咯~

2017年1月9日 16:29
編輯回答
筱饞貓

因為你的letf設(shè)置為0 ，而right設(shè)置為50% 絕對定位自動拉升了

2017年5月15日 19:42
編輯回答
澐染

絕對定位的元素有這么一個計算公式。
以水平方向為例子。

left+margin+border+padding+width+right = 包含塊的width(border-box的話是content-width)

left是0，margin默認是0，padding默認是0，right是50%，width默認是auto，所以最后算出來width是50%
可用來做垂直水平居中。

position:absolute;
left:0;
top:0;
bottom:0;
right:0;
width:200px;
height:200px;
margin:auto;

根據(jù)上面的公式，margin自動計算，所以margin-top=margin-bottom均分剩余空間，就會居中。

標準在這

2018年4月21日 23:04