css - div宽度及其边框的问题

Question

我是css新手，想和大家讨论一下这个问题：

假设我们有一个名为 A 的 div，它的宽度 = X px，并且里面还有 2 个 div，div B 和 div C。

分区 B：

width: 20%;
border: 1px;

分区 C：

width: 80%;
border: 1px;

因此，这 2 个 div 的宽度总和如下：

20% + 80% + 2(1px left border + 1px right border) => 100% (" width of div A) + 4px

问题是如何使 B 和 C 的宽度等于宽度 A 而不管其边界的宽度如何？

Answer 1

如果您看一下box model，borders和被计算在元素之外，为了根据需要计算paddings内部，您必须使用 值为 的属性。marginsborderbox-sizingborder-box

演示 1（普通）

演示 2（使用box-sizing）

Answer 2

我假设 B 或 C 具有该float属性。在这种情况下，请跳过width非浮动 div 中的 -specification。它会自动填满剩余的宽度并紧贴 A 的边界。