div的宽度及其边界问题

Question

我是css的新手，我想和你讨论这个问题：

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

div B：

width: 20%;
border: 1px;

div C：

width: 80%;
border: 1px;

这样，这两个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和margins会计算在元素之外，以便计算内部的border ，如你所知，你必须使用 box-sizing属性，其值为border-box。

Demo 1（正常）

Demo 2（使用box-sizing）

Answer 2

我假设B或C具有float属性。 在这种情况下，跳过非浮动div中的width - 规范。它将自动填充宽度的其余部分，并紧贴A的边界。