css内边框，布局破损

Question

我已经将屏幕划分为许多div，因此它们彼此粘贴（比如像棋盘这样的东西，但是有可变大小的字段）。我使用百分比设置heigth和width（相对于父容器）。

现在，当我向div添加border: 1px时，所有布局都会中断...我想边框会为每边添加1px，解决方案是添加一些内部边界。我能以某种方式添加这样的内部边界吗？

Answer 1

您可以使用box-sizing: border-box使边框的宽度成为元素width的一部分。

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Browser support.

Answer 2

使用outline属性。与边界属性不同，它不会“添加”元素的高度或宽度。然而，与边界不同，您不能拥有左，右，底或左个人属性。虽然您可以使用轮廓样式，轮廓宽度和轮廓颜色属性。

Outline Refrence

Answer 3

您可以通过0.5减少百分比49.5%编辑：Outset不起作用，谢谢@thirty

Answer 4

如果您有父div和许多子div，请说。当您将高度和宽度设置为百分比时，您将使它们彼此粘在一起。然后，当添加border:1px时，它们的宽度将变得比以前更长。要解决这个问题，我会说你应该another div after the parent div来防止调整宽度。