这是我为我的页面制定的计划:
- 正文宽度 x 高度为 600 x 800 像素；没有填充，因此如果没有边距，其中的元素可以紧贴墙壁。
- 正文中的 3 个元素:页眉、主要内容和页脚，它们被视为类(因为我将在我网站的多个页面上使用相同的布局)。
- 这 3 个元素的宽度均为 598 像素，边距为 0 像素，边框为 1 像素，因此它们完全适合正文。边框将被虚线添加视觉上下文。
- 这 3 个元素将通过各自的像素 150、500 和 150 划分主体的高度。它们的 1 像素底部/顶部边框将重叠。所以页面的垂直空间将是顶部 1 像素的边框，148 像素的空间，1 像素的边框，499 像素的空间，1 像素的边框，149 像素的空间，最后是 1 像素的边框底部。
如果可以，请向我解释我在实现的 HTML 逻辑中哪里出了问题。预览页面时，页眉宽度不正确。 (很明显，当我完成它时，我的页面看起来会变得丰富多彩和充满活力。现在我只是想使布局正确。)
<html>
<head>
<title>div practice</title>
<style type="text/css">
body
{
padding: 0px;
height: 800px;
width: 600px;
}
.header
{
margin: 0px;
border: 1px dashed;
width: 598 px;
height: 148px;
position: absolute;
top: 0px;
left: 0px;
}
.mainContent
{
margin: 0px;
border: 1px dashed;
width: 598px;
height: 500px;
position: absolute;
top: 148px;
left: 0px;
}
.footer
{
margin: 0px;
border: 1px dashed;
width: 598px;
height: 148px;
position: absolute;
top: 648px;
left: 0px;
}
</style>
</head>
<body>
<div class="header">
<p>This is where the header goes</p>
</div>
<div class="mainContent">
<p>This where the main content goes</p>
</div>
<div class="footer">
<p>This is where the footer goes</p>
</div>
</body>
</html>
最佳答案
在你的.header风格变化width: 598 px;至 width: 598px;
598 px不是有效的属性值，因此将被忽略。删除空格，它应该会按预期工作。
此外，如果您添加这行代码:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
这将更改盒模型，以便从指定的宽度中减去填充和边框，而不是添加到它。这是当今流行的技术，因为它使数学不再那么令人头疼，并且有利于响应式设计。使用这种样式，您可以使用 width: 600px; 定义标题并仍然添加任何border和 padding你想要而不影响宽度。
关于HTML header 的宽度不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22668792/