关于 css:HTML 标头没有以正确的宽度出现

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>
div practice
<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>

<p>This is where the header goes</p>

<p>This where the main content goes</p>

<p>This is where the footer goes</p>

</body>

</html>

在您的 .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{
background-color: #cfe09b;
}
.footer{
margin-bottom: 0;
}
.content{
background-color: #89ccca;
}

你可以在这里看到我的意思>> http://jsfiddle.net/salota8550/EPsk2/

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269215.html

关于 css:HTML 标头没有以正确的宽度出现

HTML header is not coming out at the correct width

相关推荐

发表回复