csstop,right,bottom,left设置为0有什么⽤？它和width：100%。
。。
壹❀引
当我们使⽤position属性时，总免不了与top，left，right，bottom四个属性打交道，那么这四个属性都设置为0时有什么⽤，与宽⾼设置100%⼜有什么区别？本⽂对此展开讨论。
贰❀关于top left right bottom
position定位属性⼤家都不会陌⽣，添加position属性的元素可以定位，⽽top，left，right，bottom属性决定元素定位后所在的位置，⽽在使⽤定位属性需要注意两点：
第⼀点，top，left此类定位属性只对添加了position属性且值为⾮static的元素⽣效，即值为fixed，absolute，relative，sticky其⼀。
第⼆点，在使⽤top，left，right与bottom属性时⼀般只设置两个属性进⾏定位，⽐如常见的top与left为⼀对，设置了top⼀般不会再设置bottom。
⽽四个同时设置时，我们常见就是值为0，那么四个值设置0有哪些使⽤场景，⼀般有两种：
1.让明确宽⾼的盒⼦垂直⽔平居中
HTML：
<div class="parent">
<div class="child"></div>
</div>
CSS：
.parent {
width: 200px;
height: 200px;
background: #ffb6b9;
position: relative;
}
.child {
width: 100px;absolute relative
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #8ac6d1;
margin: auto;
}
效果图：
通过设置top，left四属性为0居中元素的做法有个前置条件，就是需要居中的盒⼦必须有固定的宽⾼(px)，否则会失效。这就像四个⽅向有相同的⼒在拉这个盒⼦，配上margin:auto让这个盒⼦的位置保持中⽴，来达到盒⼦处于正中⼼的⽬的。
2.让⽆宽⾼的盒⼦填满⽗容器
在做弹窗或者loading效果时，我们往往会给弹窗加⼀个半透明的⿊⾊遮罩，⽤于凸显核⼼内容；当⽗
容器宽⾼不确定时，遮罩的宽⾼也⽆法确定，除了设置width:100%，height:100%外，设置top，right四属性为0就是第⼆做法。
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
}
这样⼀看，貌似也没问题，那么它与宽⾼设置为100%都能填满⽗容器呢？
叁❀ top:0,left:0,right:0,bottom:0和width:100%和height:100有什么区别
从实现效果上来看，两种做法都能让⼀个没有宽⾼的盒⼦完全填满⽗容器。
但设置⼦容器宽⾼为100%表⽰继承⽗容器宽⾼，即⽗容器不管多⼤⼦容器始终为⽗容器的百分百。
⽽设置top:0，left:0，right:0，bottom:0本质⽬的，是让⼦盒⼦四边与⽗容器间距为0，⽽⼦盒⼦没有明确宽⾼，⾃然被拉伸到完全填满⽗容器了。这也是为何上⽂中对于让盒⼦垂直⽔平居中时必须要有明确宽⾼的原因。
那么到这⾥，我们了解了top，left等为0常见的使⽤场景（其实⼀开始不是想写这些，但遇到的问题⽆法重现了...），⽔了⼀篇⽂章，本⽂结束。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。