Question

我已经多次看过这个问题，但是当我尝试实施他们的解决方案时，它似乎无法正常工作。

我目前正开始使用外部样式表来处理HTML和CSS。

我创建了一个包含以下内容的容器（边框只是为了帮助我了解容器）：

＆＃13;

header{
	width: 100%;
	height:100%;
	margin: 0 0 0 0;
	background: lightgrey;
	border: solid red;
}

header>h1{
	color:black;
	border: solid blue;
	margin: 0px 0px 0px 0px;
}

header>p{
	font-style: italic;
	text-align: left;
	color:white;
	border: solid yellow;
	margin: 0px 0px 0px 0px;
}

＆＃13;

<header>
	<h1>My Web Space</h1>
	<p> First HTML Page using Sublime Text</p>
</header>

＆＃13;

但是，当我在网页中运行它时，标题的宽度不是浏览器窗口的100％。我仍然可以在顶部，左侧和右侧看到身体背景的一些粘液部分（在本例中为红色）。

我设置sliderhomepage的高度和背景以显示效果

Answer 1

将此添加到您的css：

    *{
margin:0;
padding:0:
  box-sizing:border-box;
}
body{
width:100%;
max-width:100%;
height:100%;
}
header{
    height:100%;
    margin:0;
    background: lightgrey;
    border:2px  solid red;
}

看到它正常工作：

*{
margin:0;
padding:0:
  box-sizing:border-box;
}
body{
width:100%;
max-width:100%;
height:100%;
}
header{
    height:100%;
    margin:0;
    background: lightgrey;
    border:2px  solid red;
}

header>h1{
    color:black;
    border: solid blue;
    margin: 0px 0px 0px 0px;
}

header>p{
    font-style: italic;
    text-align: left;
    color:white;
    border: solid yellow;
    margin: 0px 0px 0px 0px;
}

<header>
    <h1>My Web Space</h1>
    <p> First HTML Page using Sublime Text</p>
</header>

Answer 2

这是因为您没有设置任何正文或文档边距或样式。

您需要为正文或全局选择器设置hr margin和padding为0。

 *{
     margin: 0;
     padding: 0;
  }

https://jsfiddle.net/f4x4dm09/2/

CSS全宽标题（全宽，无法看到正文背景）

2 个答案: