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

如果你看看盒子模型的borders,paddings和margins计数的元素之外,序数在border里面,因为你需要,你必须使用 box-sizing属性与值border-box.

演示1(正常)

演示2(使用box-sizing)