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

debugcn 发表于 Dev

邮递员

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

在这种情况下，我h3在p内部有和内部div。更改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>

陪同Afif

如果除去inline-block从h3它会得到它的默认显示是block，这意味着采取的父元素的整个宽度。

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

内容是一个h3block元素和一个pblock元素。您仅定义的宽度，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，它将仅适合其内容，而不再遵守块元素规则（即父元素宽度的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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。