在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

<!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并沒(méi)有定義寬度，但運(yùn)行結(jié)果卻產(chǎn)生了寬度(黑色部分)：
圖片描述

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

回答
編輯回答
毀了心

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

例如說(shuō)當(dāng)只有top:0; bottom:0;時(shí)

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

那么如果又來(lái)個(gè)left:0;right:0;呢 同上，也會(huì)拉伸，相當(dāng)于設(shè)置了一個(gè)width:100%;

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

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

因?yàn)槟愕膌etf設(shè)置為0 ，而right設(shè)置為50% 絕對(duì)定位自動(dòng)拉升了

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

絕對(duì)定位的元素有這么一個(gè)計(jì)算公式。
以水平方向?yàn)槔印?/p> 

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

left是0，margin默認(rèn)是0，padding默認(rèn)是0，right是50%，width默認(rèn)是auto，所以最后算出來(lái)width是50%
可用來(lái)做垂直水平居中。

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

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

標(biāo)準(zhǔn)在這

2018年4月21日 23:04