HTML标题的宽度不正确

以下是我的页面计划：

• 体宽x高度为600 x 800像素；没有填充物，这样里面的元素就可以紧贴墙壁，如果没有边距的话
• 正文中有3个元素：页眉、主要内容和页脚，它们被视为类（因为我将在我的网站的多个页面上使用相同的布局）
• 3个元素的宽度分别为598像素，边距为0像素，边框为1像素，因此它们完全适合身体内部。边框将以虚线显示以添加可视上下文
• 这3个元素'将通过150、500和150的各自像素来划分身体的高度。它们的1像素底部/顶部边界将重叠。因此，页面的垂直空间将是顶部的1像素边框，148像素的空间，1像素的边框，499像素的空间，1像素的边框，149像素的空间，最后是底部的1像素边框

如果可以，请向我解释一下我在实现的HTML逻辑中哪里出错了。预览页面时，页眉宽度不正确。（显然，当我完成我的页面时，它将看起来五彩缤纷，充满活力。现在我只是想让布局正确。）

分区实习
身体
{
填充：0px；
高度：800px；
宽度：600px；
}
.标题
{
边际：0px；
边框：1px虚线；
宽度：598像素；
高度：148px；
位置：绝对位置；
顶部：0px；
左：0px；
} 
.主要内容
{
边际：0px；
边框：1px虚线；
宽度：598px；
高度：500px；
位置：绝对位置；
顶部：148px；
左：0px；
}
.页脚
{
边际：0px；
边框：1px虚线；
宽度：598px；
高度：148px；
位置：绝对位置；
顶部：648px；
左：0px；
}
这就是标题的位置

这是主要内容的所在

这就是页脚的位置

在您的

标题中。样式更改
宽度：598 px至
宽度：598px

598 px
不是有效的属性值，因此将忽略它。移除该空间，它应能按预期工作

此外，如果添加这一行代码：

*, *:before, *:after { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这将更改长方体模型，以便从指定的宽度中减去填充和边框，而不是添加到其中。这是当今流行的技术，因为它使数学不再那么令人头痛，并且有利于响应性设计。使用此样式，您可以使用
width:600px定义标题边框
和
填充
。
作为计划，我更喜欢以下内容：

1） 使您的
车身宽度为100%

body{
 width: 100%;
}

2） 添加一个
outterWrapper
div以包含所有页面元素

.outterWrapper{
    width: 600px; // your page width;
    margin: 0 auto; // to center in page
    border: 1px solid #000; // if you need a border
}

3） 开始设置页眉、内容、页脚div的样式

.header, .footer, .content{
 width: 100%;
 padding: 5px;
 margin-bottom: 10px;
}

.header, .footer{
 background-color: #cfe09b;
}
.footer{
    margin-bottom: 0;
}
.content{
 background-color: #89ccca;
}

你可以理解我在这里的意思>>
首先，请不要为你的内容设置高度，这一点都不好，会给你带来问题。如果我可以问一下，什么问题？因为如果你的内容超过了你定义的高度，它将超过你的样式。请参见此示例：
.header, .footer, .content{
 width: 100%;
 padding: 5px;
 margin-bottom: 10px;
}

.header, .footer{
 background-color: #cfe09b;
}
.footer{
    margin-bottom: 0;
}
.content{
 background-color: #89ccca;
}