css内边框,布局破损

Question

我把屏幕分成许多,div所以它们彼此粘在一起(比如像棋盘这样的东西,但是有可变尺寸的字段).我设置heigth并width使用百分比(相对于父容器).

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

Answer 1

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

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

浏览器支持.

Answer 2

使用大纲属性.与边界属性不同,它不会"添加"元素的高度或宽度.然而,与边界不同,您不能拥有左,右,底或左个人属性.虽然您可以具有轮廓样式,轮廓宽度和轮廓颜色属性.

大纲参考