HTML header is not coming out at the correct width
这是我为我的页面制定的计划：
- 主体宽度 x 高度为 600 x 800 像素；没有填充，这样如果里面的元素没有边距，它们就可以紧贴墙壁。
- 正文中的 3 个元素：页眉、主要内容和页脚，它们被视为类(因为我将在我的网站的多个页面上使用相同的布局)。
- 3 个元素的宽度均为 598 像素，边距为 0 像素，边框为 1 像素，因此它们完全适合正文。边框将被虚线以添加视觉上下文。
- 这 3 个元素将通过 150、500 和 150 像素来划分主体的高度。它们的 1 像素底部/顶部边界将重叠。所以页面的垂直空间将是顶部的 1 像素边框、148 像素的空间、1 像素的边框、499 像素的空间、1 像素的边框、149 像素的空间和最后 1 像素的边框底部。
如果可以，请向我解释我在实现的 HTML 逻辑中哪里出错了。预览页面时，我的页眉宽度不正确。 (很明显，当我完成它时，我的页面看起来会变得丰富多彩和充满活力。现在我只是试图让布局正确。)
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<html>
<head> <body> </html> |
- 1、请不要为你的内容设置高度，这一点都不好，会给你带来麻烦。
- 什么问题，如果我可以问？
- 因为如果您的内容超出了您定义的高度，它将超出您的样式。看这个例子：jsfiddle.net/salota8550/F7rF6
在您的 .header 样式中将 width: 598 px; 更改为 width: 598px;
598 px 不是有效的属性值，因此被忽略。删除空格，它应该可以按预期工作。
另外，如果你添加这行代码：
|
1
2 3 4 5 |
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
这将更改盒子模型，以便从指定宽度中减去填充和边框，而不是添加到其中。它是当今流行的技术，因为它使数学变得不那么令人头疼，并且有利于响应式设计。使用这种样式，您可以使用 width: 600px; 定义您的标题，并且仍然添加您想要的任何 border 和 padding 而不会影响宽度。
作为一个计划，我更喜欢以下内容：
1) 使您的 body 宽度为 100%
|
1
2 3 |
body{
width: 100%; } |
2) 添加一个 outterWrapper div 以包含所有页面元素。
|
1
2 3 4 5 |
.outterWrapper{
width: 600px; // your page width; margin: 0 auto; // to center in page border: 1px solid #000; // if you need a border } |
3) 开始设置您的页眉、内容、页脚 div
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.header, .footer, .content{
width: 100%; padding: 5px; margin-bottom: 10px; } .header, .footer{ |
你可以在这里看到我的意思>> http://jsfiddle.net/salota8550/EPsk2/
来源：https://www.codenong.com/22668792/
