top,right,bottom,left設定為0有什麼用?
阿新 • • 發佈:2018-12-30
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; } */