时间戳

首页 > 解决方案 > 为什么当容器宽度小于 100% 且内容内边距大于 700px 时“box-sizing:border-box”不起作用？

html - 为什么当容器宽度小于 100% 且内容内边距大于 700px 时“box-sizing:border-box”不起作用？

问题描述

当容器未设置为width:100%时，box-sizing:border-box则不工作。例子：

header {
  padding: 50px;
  background-color: purple;
  box-sizing: border-box;
  height: 50px;
}

main {
  padding: 10px;
  background-color: blue;
  width: 50px;
  height: 60px;
}
<main>
  <header>header</header>
</main>

在这个例子中，当我增加填充时，“header”超过了它的容器“main”。为什么边界框在这里不起作用？我认为它应该padding用元素的宽度来计算和边界。那为什么会超出容器呢？

另一种情况是当我设置width为100%，然后将填充设置为 over 700px，然后它开始以相同的方式超出。

html {
  padding: 10px;
  background-color: orange;
}

body {
  background-color: yellow;
  padding: 10px;
}

header {
  padding: 800px;
  background-color: purple;
  box-sizing: border-box;
  height: 50px;
  width: 100%;
}

main {
  padding: 10px;
  background-color: blue;
}
<body>

  <main>
    <header>header</header>
  </main>

</body>

直到padding:700px，“标题”是容器宽度内的容器。一旦 padding 增加到 上面700px，它就开始超过容器的宽度。

那么，首先，为什么？为什么它一直工作到700px，为什么它对高度不起作用？为什么当宽度设置为低于 100% 的数字时它根本不起作用？

标签： htmlcss

解决方案

推荐阅读