背景颜色是否全宽?

Question

你好，我想弄清楚如何有背景颜色说在一个段落或h1只是后面的单词不拉伸在页面上没有书写吗?我很抱歉，我仍然只学习代码，我正试图为我的朋友做一个网站，只是想让它是正确的!

谢谢☺️

Answer 1

background-color伸展到全宽的原因是<h1>-元素是块元素。块元素将尝试占用相对于其父元素的全部剩余宽度——因此，如果父元素已经占用了页面的全部宽度，那么<h1>也会占用页面的全部宽度。例如，参见第三个例子，<h1>-容器有max-width: 50%，其中<h1>-元素占用了所有剩余的宽度。

有几种方法可以实现这一点——在我个人看来，我认为width: fit-content是最好的解决方案，因为这将设置<h1>元素的宽度等于里面的内容。虽然没有完全的浏览器支持，但所有主流浏览器都支持(确保使用Firefox前缀)

h1 {
background-color: limegreen;
}
.fit-content {
width: fit-content;
width: -moz-fit-content;
}
.inline-block {
display: inline-block;
}
div {
max-width: 50%;
}

<h1>standard h1</h1>
<h1 class="fit-content">fit-content</h1>
<h1 class="inline-block">inline-block</h1>
<div>
<h1 class="with-parent">with parent</h1>
</div>