Question

这不是第一次发生，我从来没有找到好的解释。

在这种情况下，我在h3中有一个p和一个div。一旦我更改了p的{{1}}，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;
}

Answer 1

如果从inline-block中删除h3，它将得到其默认显示block，这意味着采用父元素的完整宽度。< / p>

现在，诀窍是父元素的宽度为position:absolute。它的宽度是由“缩小适合”算法定义的，这意味着该宽度基于其内容。

内容是一个h3块元素和一个p块元素。您仅定义了p的宽度，因此这将定义position:absolute元素的宽度，然后h3将为其父元素的全宽度，因此在逻辑上将遵循设置为{{1}的宽度}。

下面是对不同情况的说明，以便更好地理解：

.container {
  position:absolute;
  border:1px solid;
}
.container > * {
  border:1px solid red;
}

您可以看到默认情况下两者都应为父宽度的100％，而较长的内容将定义该宽度。如果您制作一个元素<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％）。

这是一个简化的说明，如果您想获得更准确的细节，则需要参考规范并找到每种情况下宽度的计算方式。

块元素：https://www.w3.org/TR/CSS21/visudet.html#blockwidth

内联块元素：https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width

绝对定位的元素：https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

为什么更改元素的宽度会影响其同级？

1 个答案: