css top,right,bottom,left設置為0有什么用？它和width:100%和height: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;
    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常見的使用場景（其實一開始不是想寫這些，但遇到的問題無法重現了...），水了一篇文章，本文結束。