css top, right, bottom, left to 0 what's the use? It width: 100% and height: 100% What is the difference?

 One ❀ lead

When we use the position property, always found the top, left, right, bottom four property deal, then these four properties are set to what use is 0, and set the width and height of 100% what is the difference? This article discuss this.

 II ❀ on top left right bottom

position positioning properties we are not unfamiliar, add the position attribute of the element can be located, and top, left, right, bottom property determines the location of the positioning element, while using positioning properties Two things to note:

The first point, top, left properties such positioning only the position attribute and value added element to take effect non-static , i.e. it is fixed, absolute, relative, sticky one.

Second, when a top, left, right and bottom properties generally provided only two positioning properties , such as the common top and left as a pair, are provided generally will not set top bottom.

While at the same time set up four, is our common value is 0, then the value is set to 0 which four usage scenarios, there are two:

1. Have a clear width and height of the box vertically centered horizontally

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;
}

Renderings:

By setting the top, left four property elements centered approach 0 there is a pre-condition that requires middle of the box must have a fixed width and height (PX) , otherwise it will fail. It's like four directions have the same force in pulling the box, coupled with margin: auto to let the neutral position in the box, to achieve their goals in the very center of the box.

2. Let no width and height of a box filled with parent container

In doing pop or loading effect, we often will pop plus a translucent black mask, for highlighting the core content; when the parent container width and height of uncertainty, the mask width and height can not be determined, in addition to setting width: 100%, height: 100% outside, setting top, right 0 is the second property is four practices.

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
}

Such a view, seemingly no problem, then it is high and wide to 100% of the parent container can fill it?

 Triple ❀ top: 0, left: 0, right: 0, bottom: 0 and width: 100% and height: 100 What is the difference

From the realization point of view, the two approaches can make a no width and height of the box completely filled the parent container.

However, sub-containers set the width and height of 100% is inherited from the parent container width and height, that no matter how much the child's parent container vessel parent always a hundred percent of the container.

Set top: 0, left: 0, right: 0, bottom: 0 essential purpose is to enable the sub-box four sides parent container pitch 0 and the sub case there is no clear width and height, is stretched to the natural parent container completely filled a. This is why the above respect to the vertical so that the box is centered horizontally must have a clear reason for width and height.

So here, we know the top, left as the 0 common usage scenarios (in fact, a beginning not write this, but the problems encountered can not reproduce ...), water an article end of this article.