首页 > body 的宽度问题

body 的宽度问题

body 在不设置宽度的情况下,默认为 100%, 这个 100% 是不是取当前的浏览器窗口宽度,或当前分辨率宽度(当然要减掉padding,border计算后的宽度)。

例如说:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        * {
            border: 1px solid red;
        }

        #header {
            width: 1200px;
            height: 200px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="header"></div>
</body>
</html>

在超过1200分辨率下 body 是包裹的,而将分辨率调至1024px 下,body的宽度则为1022px,不包裹整个header。 这让我很困惑。不知道我有没有说清楚,给我说下 body 宽度的问题。 谢谢了。

求科普,html 和 body 的默认宽度是100% 还是 auto,他们是怎么计算的,等等。


htmlbody 的 width 和 height 默认为 100%,为整个视窗的高度和宽度。
htmlwidth:100% 占据整个视窗,而 bodywidth:100%是根据html的 width*100% 计算的。

不知道这样理解是否对


是一个关于 viewport 的问题吧~
1024 的时候 viewport 就是 1024,body 也是 1024。header 太宽就跑外面去了。我可能说不清楚= =
你看这个吧 http://www.html5dw.com/story-of-two-viewport-part-i/


首先解释1024下body为什么1022,因为你声明了*{ border: 1px solid red; }就意味着任何dom元素都具备一个上下左右的边框,那么1024-1-1=1022;再解释,为什么不会包裹header,首先你的header定义了绝对宽度1200px,虽然header是body的子元素,但是body并没有声明overflow之后的会怎样,所以当分辨率调整为1024时,header不会被挤压,而是浏览器会出现滚动条,说明header溢出了。

【热门文章】
【热门文章】