1. 程式人生 > >top,right,bottom,left設定為0有什麼用?

top,right,bottom,left設定為0有什麼用?

left等定位屬性,要使用時,它必需是已定位的元素。(absolute,relative,fixed)
  eg:img{position:absolute;left:100px} 如果去掉position:absolute,則left失效。對float:left這種浮動元素也是失效,反正就是定位了才讓用哈。

拓展一種居中用法,

(1)先定位,設定 top:0;bottom:0;margin:auto 可以使元素水平居中。

(2)設定 left:0;right:0;margin:auto 可以使元素垂直居中。

(3)設定四個值都是0,margin:auto ;這個元素就在正中間了。如果不設定元素大小,就平鋪了。

 

<div class='outer'>
   <div class='inner'>88</div>
</div>
.outer{
  position: relative;
  height: 200px;
  background-color: green;
}

/*(1)水平居中,不設定寬度則會水平鋪滿父容器*/
.inner {
  background-color: red;
  position: absolute; 
  left: 0;
  right: 0;
  width: 80px; 
  margin: auto;
}

/*(2)垂直居中,不設定高度則會垂直鋪滿父容器*/
/* .inner {
  background-color: red;
  position: absolute; 
  top: 0;
  bottom: 0;
  height: 100px;
  margin: auto;
} */

/*(3)水平及垂直居中,不設定高度,寬度則會鋪滿父容器*/
/* .inner {
  background-color: red;
  position: absolute; 
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  height: 100px;
  margin: auto;
} */