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，他们是怎么计算的，等等。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
是一个关于
viewport的问题吧~1024 的时候
viewport就是 1024，body 也是 1024。header 太宽就跑外面去了。我可能说不清楚= =你看这个吧 http://www.html5dw.com/story-of-two-viewport-part-i/
html和body的 width 和 height 默认为 100%，为整个视窗的高度和宽度。html的width:100%占据整个视窗，而body的width:100%是根据html的 width*100% 计算的。不知道这样理解是否对
首先解释1024下body为什么1022，因为你声明了*{ border: 1px solid red; }就意味着任何dom元素都具备一个上下左右的边框，那么1024-1-1=1022；再解释，为什么不会包裹header，首先你的header定义了绝对宽度1200px，虽然header是body的子元素，但是body并没有声明overflow之后的会怎样，所以当分辨率调整为1024时，header不会被挤压，而是浏览器会出现滚动条，说明header溢出了。