html - CSS 水平条和 div 边框未对齐的问题

Question

你可以在这些截图中看到

Image 1 Image 2

我有两个问题:

1. 为什么会有水平滚动条？
2. 您可以在第二张图片(第一张的放大版)上看到绿色边框和橙色边框没有正确对齐，为什么？

这是演示:

.app{
  height:100%;
  width: 100%;
}

html, #root, body{
  height:100%;
  margin:0px;
}

.header{
  height: 50px;
  width:100%;
  border:1px solid green;

}

.app-body{
  display: flex;
  height: calc(100% - 55px);
}

.menu{
  height:100%;
  border:1px solid green;
  width:100px;
}

.content{
  flex:1;
  height:100%;
  border:1px solid orange;
}

<div class="app">
  <div class="header"></div>
  <div class="app-body">
    <div class="menu"></div>
    <div class="content"></div>
  </div>
</div>

Answer 1

欢迎来到 SO!

那是因为你需要添加box-sizing: border-box。

根据 Mozilla MDN :

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

看看这个演示:

.header, .menu, .content {
  box-sizing: border-box;
}

.app{
  height:100%;
  width: 100%;
}

html, #root, body{
  height:100%;
  margin:0px;
}

.header{
  height: 50px;
  width:100%;
  border:1px solid green;

}

.app-body{
  display: flex;
  height: calc(100% - 55px);
}

.menu{
  height:100%;
  border:1px solid green;
  width:100px;
}

.content{
  flex:1;
  height:100%;
  border:1px solid orange;
}

<div class="app">
  <div class="header"></div>
  <div class="app-body">
    <div class="menu"></div>
    <div class="content"></div>
  </div>
</div>

要了解发生了什么，您需要知道默认情况下元素的大小由其内容决定。

例如，如果我们有一个 div(默认情况下 div 是一个 block ，所以它有 100% 的宽度)并在其周围添加 1px 边框，那么将会发生的是 div 的宽度将增加 2px，因为正如我之前提到的 - 元素的大小由其元素(框)决定。为了避免这种情况，我们可以告诉浏览器我们不想根据元素的内容来调整元素的大小。我们可以告诉浏览器我们想要将它的大小设置为 border-box，当我们添加 padding/border 时，它不会与元素的宽度重叠。

在你的例子中，你的标题是一个 div (意思是，它有 100% 的宽度)，它有一个额外的边框(左边框 +1，右边框 +1)，总共有 100 % + 2px 宽度。

你的 .header 有兄弟 .app-body。应用程序主体也是一个 block ，因此它具有 100% 的宽度。与 header 不同，.app-body 没有边框，因此它的总宽度保持为 100%。

.app-body 有 2 个 child 。他们都有边界。您可能会问自己，他们如何不影响他们的 parent 。好吧，那是因为他们的 parent 是一个街区，它不会受到其 child 的影响。这就是为什么他的 child 没有影响他的宽度。