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，他们是怎么计算的，等等。

css2

阅读 7.6k

3 个回答

得票最新

huangxinxin

1111

发布于
2014-11-22

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

查看全部 3 个回答