gpt4 book ai didi

HTML 边距和填充异常行为

转载 作者:行者123 更新时间:2023-11-28 08:16:18 25 4
gpt4 key购买 nike

好吧,我正在处理一个网页。我想要左边的黑色和右边的内容。这是简单的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/main.css" >
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>indexhtml</title>
<meta name="description" content="">
<meta name="author" content="Lorena Soledad">

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

<body>

<aside id="information">
<header>
<h1>Web Title</h1>
</header>

<footer>
<p>Description</p>
</footer>
</aside>

<section id="content">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>

<article>
</article>
</section>

</body>
</html>

这是相应的 CSS 样式表:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%; /*Para ocupar todo el ancho y el alto de la pantalla*/
}


section#content {
background-image: url("img/crossword.png");
width: 60%;
height: 100%;
}


aside#information {
background-color: black;
float: left;
width: 30%;
height: 100%;
}

问题是,我希望正文填满整个浏览器。所以,如您所见,我使用了这个:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

但是在浏览器的顶部还有一些像素,就像this一样。

所以...在网络上搜索我找到了下一个代码,使用通用选择器,并将 margin 和 padding 属性从 html 和 body 中移出,就像这样:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
width: 100%;
}

这成功了!我不知道为什么。HTML 标签不应该是包含所有内容的第一个标签吗?我的意思是,为什么当我在 html/body 标记中定义边距和填充时它不起作用,但当我在通用选择器中定义它时它却起作用?我不明白。

我希望有人能给我解释一下。谢谢。

最佳答案

margin 是由您的 ul 标签引起的,它会将您的 section 向下推。

ul 标记的顶部和底部边距默认为 1em,而第二个 CSS block 中的通用选择器正在删除它。

http://jsfiddle.net/bbr716yh/

关于HTML 边距和填充异常行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28974046/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com