gpt4 book ai didi

html - 为什么 html 元素的宽度没有设置为页面的 100%?

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

我在 HTML 和 CSS 的开头,我被困在布局区域和位置,我遇到的最令人困惑的事情之一是:html 宽度与其子项的宽度有关,通过检查浏览器中的元素,其宽度会随着其子元素的宽度而变化。虽然当我对其应用线性渐变 (html) 并在其周围绘制边框时,边框仅围绕继承的宽度(来自 child !!),但渐变应用于整个页面和边框外,因为它应用于 margin !最令人困惑的是:渐变宽度等于(比如正文中的 div 元素)的宽度,并且在整个页面上重复!这是怎么回事?!

代码:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
html
{
border:5px solid red;
background-image:linear-gradient(to top, yellow, blue);
}
div
{
border:5px solid green;
}
h1
{
background-color:lightslategray;
border:5px solid black;
margin:0px;
}
</style>
</head>
<body>
<div>
<h1>div is the standard block-level element. A block-level element starts on a new line and stretches
out to the left and right as far as it can. Other common block-level elements are p and form,
and new in HTML5 are header, footer, section, and more.</h1>
</div>
</body>
</html>

最佳答案

首先,几乎没有理由将图形放在 <html> 中标签。使用 body 标签来满足所有图形需求,因为那将是网页的可见部分,并且严格使用 HTML 来满足应用于整个页面的规则,例如默认字体。

如果你想要整个页面的边框,使用 <body>相反。

原因是因为所有元素都相互堆叠,并且 border绘制在元素的周围。您可以使用 box-sizing: border-box; 将边框放在元素内在你的 CSS 中。

对于不使用整页的HTML,你可以使用width: 100%;来设置。和 height: 100%; . HTML 遵循给定的规则,默认情况下它只使用所需的空间,而不是使用它可以使用的所有空间。

关于html - 为什么 html 元素的宽度没有设置为页面的 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32482457/

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