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; } */總結
以上是生活随笔為你收集整理的top,right,bottom,left设置为0有什么用?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: li变成行内块级元素之后,每一个li之间
- 下一篇: css怎样将图片设置成正方形,而且随着浏