Shulou(Shulou.com)06/01 Report--

Editor to share with you why the body in html does not have a high setting background color can be displayed in full screen. I hope you will get something after reading this article. Let's discuss it together.

-about html and body.

I still remember that when we develop full-screen pages or mobile pages, we often set up a sentence.

Html, body {height: 100%;}

Do you only know how to use it? And you don't know what happened?

The reason is that when there is no content to support the height, the default height of html and body is 0. If the content wants to be proportional or to fill the full screen, it is impossible to use the percentage normally.

If only body {height: 100%;} is set, then body is based on the height of html, but the default height of html is 0, so you need to set the height of html and body as high as that of the browser.

But!

When we do not set any height, set the background color for body, the color can be filled with browsers, however, you can see that the console, body is really no height, this is why?

Body {

Background: pink

}

In fact, when we set the background color to the body alone, it is not the body tag that is given the background color, but the browser canvas. It can be understood that the background color of the body is "eaten" by the browser.

So what happens if we set the background color for html and body at the same time?

Html {

Background: orange

}

Body {

Background: pink

}

As you can see, the body background color we set is "invalid", and the browser is given the background color of html.

In my opinion, the body background color we set [works], but because the default height of body is 0, there is no pink block on the page, so let's try to add some content to body.

As you can see, the height of body is stretched out, while the background color of body is really only given to body.

So we can come to a conclusion.

The browser will "absorb" the background color of html and body.

When only the body background color is set, the browser finds it and takes the background color as its own.

If html sets the background color, the browser will think that html is closer to me, so it will "take away" the background color of html as its own color.

Of course, up to now, we have been experimenting with solid color backgrounds, so if we set it to gradual discoloration, is it still the same result?

Questions arise, start the experiment.

First of all, only set the background of body to a linear gradient from pink pink to white # fff, and the expected result should be the same as the background, the gradient from top to bottom in the direct browser.

Body {

Background: linear-gradient (pink, # fff)

}

Yeah? How is this different from expected? if you zoom in on the page and take a look at the gradient, you can find that the height of each gradient is the same as the height of html, while the height of html is the default margin of body.

So start to set up

* {

Margin: 0

Padding: 0

}

Similarly, if the gradient is set to html, it will not work on the browser

It means that the browser will not take the gradient as its own, so if you want to set up a full-screen gradient, you need to use what we mentioned at the beginning of the article.

Html, body {height: 100%;}

After reading this article, I believe you have a certain understanding of "the body in html does not have a highly set background color why it can be displayed on full screen". If you want to know more about it, welcome to follow the industry information channel, thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.