html - 如何设置div的宽度

Question

我正在尝试在使用 padding:6rem 的 div.book__form 上设置 width:50% 但它不需要 50%。当我删除 padding:6rem 时，它实际上占用了 50% 但我需要设置 padding:50%。

在 Chrome 浏览器的检查元素中它显示 display:block 但我没有写下来。

CSS

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding: 6rem;
  background-color: pink;
}

html

<div class="book">
   <div class="book__form"></div>
</div> 

result

Answer 1

在使用 padding 后，它不会占用精确的 width 50% 因为你没有在 css box-sizing: border-box 中使用 universal 标签; 在使用填充时这是必需的。

并讨论了 Chrome 浏览器的检查元素，它显示 display:block 这是来自 user agent stylesheet 的浏览器默认格式。

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

<div class="book__form">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ad nobis nulla porro. Non alias nisi ad omnis animi neque at repellat, sit nulla voluptate quod, dolorum, repellendus magni placeat.</p>
    </div>