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,他们是怎么计算的,等等。
html
和 body
的 width 和 height 默认为 100%,为整个视窗的高度和宽度。html
的 width:100%
占据整个视窗,而 body
的width: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溢出了。