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有什么用？相关推荐

CSS同时设置绝对定位top和bottom属性
问题引出最近在用html+css+js做一个web后台管理系统左边侧边栏时出现了父元素定义为绝对定位时脱标,导致子元素无法撑开父元素高度的问题. 但是希望实现如下效果,左边导航栏将剩余全部位置占满, ...
【Android UI】TextView的垂直方向概念之top，bottom，ascent，descent，baseline
一图以蔽之需要区分的是这里的top,bottom,ascent,descent,baseline是指字内容的属性,通过getPaint().getFontMetricsInt()来获取得到.和字体内 ...
css里slidebottom,jquery - 从CSS“top”到“bottom”的jQuery动画 - 堆栈内存溢出
编辑:不得不快速离开,所以没有完成,我决定使用jquery ui作为例子(你需要核心): #line_three { width:100%; } .line3_top { position:absol ...
top与bottom、left与right的优先级
同时使用top和bottom,效果如何呢? 如果给一个设置高度的元素设置绝对定位的元素中top和bottom,top优先,而且bottom加 !important也"敌不过"top ...
目标检测之IoU（box:[top, left, bottom, right]）
参考: 目标检测之 IoU_黑暗星球-CSDN博客_目标检测iouIoU 作为目标检测算法性能 mAP 计算的一个非常重要的函数.但纵观 IoU 计算的介绍知识,都是直接给出代码,给出计算方法,没有人 ...
Access数据库中Sum函数返回空值（Null）时如何设置为0
在完成一个Access表中数据统计时,需要统计指定字段的和,使用到了Sum函数,但统计时发现,指定条件查询统计时有可能返回空值(Null),导致对应字段显示为空白,正常应显示为0.基本思路是在获取记录 ...
Requirejs加载超时问题的一个解决方法：设置waitSeconds=0
Requirejs加载超时问题的一个解决方法:设置waitSeconds=0 参考文章: (1)Requirejs加载超时问题的一个解决方法:设置waitSeconds=0 (2)https://ww ...
oracle11g memory_target,oracle11g MEMORY_MAX_TARGET设置成0 问题处理
linux 下 oracle11g MEMORY_MAX_TARGET设置成0 问题处理 yope(2017_08_08) 问题起因: 数据库服务器由于业务原有内存不能够满足,所以增加了内存.CUP和 ...
Java位操作：如何将long类型的指定位设置为0或1？How to set/unset a bit at specific position of a long?
Java位操作:如何将long类型的指定位设置为0或1? How to set/unset a bit at specific position of a long? To set a bit, us ...

top,right,bottom,left设置为0有什么用？

top,right,bottom,left设置为0有什么用？相关推荐

最新文章

热门文章