Create a new blank html file, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>Let's take a look, what is the default size (width and height) of the html element and body element in the html document at this time?
View the size of the html in the chrome browser and find that the size is 1920×8. At this point, we have not set any width and height dimensions for the html element, so we can see that the default width of the html element is the current width of the browser. But how did this height of 8 pixels come from? Let's continue to check the size information of the body:
The default width of the body element is 1904 pixels, but the top, bottom, left, and right margins are 8 pixels. The total width of the body element = left margin 8px + width 1904px + right margin 8px = 1920px , which is consistent with the width of the html element 1920px. The height of the html element is 8px = the upper margin of the body element is 8px.
Therefore, in the html document, the html and bod tags, without any settings, the default width of the html root element is the screen width, the default height is 8px (the upper margin of the body element is 8px), the default width of the body = the screen width- Left margin 8px - Right margin 8px.
extra
Some friends may ask, why my computer has a screen resolution of 1920 width, but the width in the browser (chrome, IE, etc.) is only 1536px - in the newly created blank html document, check as follows:
In fact, this is a problem with the display settings of your computer . The solution is as follows:
Right click on the desktop -> display settings, and change the zoom to 100%.
