这不是第一次发生，我也没有找到很好的解释。
在本例中，我在 div 内有一个 h3 和一个 p。一旦我更改了 p 的 width，h3 的宽度也发生了变化，就像宽度被应用到它们的一样父级。
- 为什么会发生这种情况？
和
display: inline-block 应用于 h3。如果将其删除，您将看到该按钮的段落宽度为 95vw。这怎么行得通？谢谢
let button = document.querySelector('.button')
let body = document.querySelector('.body')
let container = document.querySelector('.container')
button.addEventListener('click', ()=> {
let colorOne = parseInt((Math.random() * 255) + 1)
let colorTwo = parseInt((Math.random() * 255) + 1)
let colorThree = parseInt((Math.random() * 255) + 1)
let colorOneOne = parseInt((Math.random() * 255) + 1)
let colorTwoTwo = parseInt((Math.random() * 255) + 1)
let colorThreeThree = parseInt((Math.random() * 255) + 1)
let deg = parseInt((Math.random() * 360) + 1)
body.style.background = 'linear-gradient(' + deg + 'deg' + ', ' + 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree + ')' + ',' + 'rgb(' + colorOneOne + ',' + colorTwoTwo + ',' + colorThreeThree + '))'
//linear-gradient(45deg, rgb(28,28,84), rgb(38,58,119))
document.querySelector('.color').innerText = 'linear-gradient(' + deg + 'deg' + ', ' + 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree + ')' + ',' + 'rgb(' + colorOneOne + ',' + colorTwoTwo + ',' + colorThreeThree + '))'
button.style.border = 'none'
document.querySelector('.scrollto').style.display = 'block'
})
window.addEventListener('touchmove', ()=> {
body.style.background = 'white'
document.querySelector('.color').innerText = ''
document.querySelector('.scrollto').style.display = 'none'
button.style.border = '1px solid black'
}).button {
font-family: 'Poppins', sans-serif;
border-radius: .5em;
padding: .3em .7em;
font-size: 1.1em;
position: relative;
background: white;
mix-blend-mode: screen;
border: 1px solid black;
display: inline-block;
}
@media screen and (max-width: 382px) {
.button {
width: 10em;
}
}
body {
min-height: 100vh;
margin: 0;
}
.color {
font-family: 'Poppins', sans-serif;
color: white;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
display: block;
width: 95vw;
border: 2px solid black;
}
.container {
text-align: center;
position: absolute;
top: 40vh;
left: 50vw;
transform: translate(-50%, -50%);
}
.scrollto {
position: absolute;
bottom: 10px;
left: 50vw;
transform: translateX(-50%);
font-family: 'Poppins', sans-serif;
font-size: .7em;
display: none;
}<body class="body">
<div class="container">
<h3 class="button">Generate Gradient</h3>
<p class="color"></p>
</div>
<div class="line">
<p class="scrollto">swipe on screen to reset</p>
</div>最佳答案
如果您从 h3 中删除 inline-block，它将获得默认显示，即 block，这意味着完全占据父元素的宽度。
现在，诀窍是父元素的宽度，即 position:absolute 元素。它的宽度由收缩到适合算法定义，这意味着宽度基于其内容。
内容是一个h3 block 元素和一个p block 元素。您仅定义了 p 的宽度，因此这将定义 position:absolute 元素的宽度，然后 h3 将为其父元素的全宽度，因此逻辑上它将遵循宽度设置为p。
以下是不同案例的说明，以便更好地理解:
.container {
position:absolute;
border:1px solid;
}
.container > * {
border:1px solid red;
}<div class="container">
<h3 class="button">Generate Gradient</h3>
<p class="color">some text </p>
</div>
<div class="container" style="top:150px">
<h3 class="button">Generate Gradient</h3>
<p class="color">a text longer than the above one</p>
</div>
<div class="container" style="left:250px">
<h3 class="button" style="display:inline-block">Generate Gradient</h3>
<p class="color">a text longer than the above one</p>
</div>您可以看到，默认情况下，两者都应为父宽度的 100%，并且较长的内容将定义该宽度。如果您创建一个元素 inline-block ，它将简单地适合其内容，并且不再遵守 block 元素规则，即父元素的 100% 宽度。
这是一个简化的解释，如果您想要更准确的详细信息，您需要引用规范并了解每种情况下宽度的计算方式。
block 元素:https://www.w3.org/TR/CSS21/visudet.html#blockwidth
内联 block 元素:https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width
绝对定位的元素:https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
关于html - 为什么更改元素的宽度会影响其兄弟元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64551343/