Html CSS水平条和div边框不对齐的问题

你可以在这些截图中看到

我有两个问题：

为什么有一个水平滚动条

您可以在第二张图像（第一张图像的缩放版本）上看到绿色边框和橙色边框没有正确对齐，为什么？

以下是演示：

.app{
身高：100%；
宽度：100%；
}
html，#根，正文{
身高：100%；
边际：0px；
}
.标题{
高度：50px；
宽度：100%；
边框：1px纯绿色；
}
.应用程序正文{
显示器：flex；
高度：计算（100%-55px）；
}
.菜单{
身高：100%；
边框：1px纯绿色；
宽度：100px；
}
.内容{
弹性：1；
身高：100%；
边框：1px实心橙色；
}

---

要修复水平滚动条，应使用

框大小：边框框

属性。框大小定义“宽度”属性包含的内容。值

框大小调整

表示宽度包括边框宽度和填充

添加框大小后的css

.app{
  height:100%;
  width: 100%;
  box-sizing: border-box;
}

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

.header{
  height: 50px;
  width:100%;
  border: 1px solid green;
  box-sizing: border-box;
}

.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;
}

---

要修复水平滚动条，应使用

框大小：边框框

属性。框大小定义“宽度”属性包含的内容。值

框大小调整

表示宽度包括边框宽度和填充

添加框大小后的css

.app{
  height:100%;
  width: 100%;
  box-sizing: border-box;
}

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

.header{
  height: 50px;
  width:100%;
  border: 1px solid green;
  box-sizing: border-box;
}

.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;
}

欢迎来到SO

这是因为您需要添加

框大小：边框框

根据：

边框框告诉浏览器在为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，那么这100像素将包括您添加的任何边框或填充，并且内容框将收缩以吸收额外的宽度。这通常使元素的大小更容易确定

请看这个演示：

.header、.menu、.content{
框大小：边框框；
}
.app{
身高：100%；
宽度：100%；
}
html，#根，正文{
身高：100%；
边际：0px；
}
.标题{
高度：50px；
宽度：100%；
边框：1px纯绿色；
}
.应用程序正文{
显示器：flex；
高度：计算（100%-55px）；
}
.菜单{
身高：100%；
边框：1px纯绿色；
宽度：100px；
}
.内容{
弹性：1；
身高：100%；
边框：1px实心橙色；
}

欢迎来到SO

这是因为您需要添加

框大小：边框框

根据：

边框框告诉浏览器在为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，那么这100像素将包括您添加的任何边框或填充，并且内容框将收缩以吸收额外的宽度。这通常使元素的大小更容易确定

请看这个演示：

.header、.menu、.content{
框大小：边框框；
}
.app{
身高：100%；
宽度：100%；
}
html，#根，正文{
身高：100%；
边际：0px；
}
.标题{
高度：50px；
宽度：100%；
边框：1px纯绿色；
}
.应用程序正文{
显示器：flex；
高度：计算（100%-55px）；
}
.菜单{
身高：100%；
边框：1px纯绿色；
宽度：100px；
}
.内容{
弹性：1；
身高：100%；
边框：1px实心橙色；
}

谢谢，为什么在我的示例中，绿色框实际上比橙色框宽？@dave这是因为它的左边框宽度为100%，右边框宽度为+1px。总共100%+2px；是的，但同样的逻辑必须应用到橙色的盒子上，不是吗，所以为什么它不更宽呢？哦。因为菜单和内容相对于应用程序菜单的宽度是100%（与100%+2px的标题相比）。我想你也错过了显示的要点：flex在这里扮演角色，它命令应用程序主体的子项保持在自身的范围内！感谢为什么在我的示例中，绿色框实际上比橙色框宽？@dave这是因为它的左边框宽度为100%，右边框宽度为+1px。总共100%+2px；是的，但同样的逻辑必须应用到橙色的盒子上，不是吗，所以为什么它不更宽呢？哦。因为菜单和内容相对于应用程序菜单的宽度是100%（与100%+2px的标题相比）。我想你也错过了显示的要点：flex在这里扮演角色，它命令应用程序主体的子项保持在自身的范围内！