我已经将屏幕分成了很多div
块,所以它们彼此粘在一起(比如说,像棋盘一样,但具有可变大小的字段)。我设置heigth
和width
使用百分比(相对于父容器)。
现在,当我添加border: 1px
到 div 时,所有布局都中断了......我想边框每边增加 1px,解决方案是添加一些内部边框。我可以以某种方式添加这样的内部边框吗?
我已经将屏幕分成了很多div
块,所以它们彼此粘在一起(比如说,像棋盘一样,但具有可变大小的字段)。我设置heigth
和width
使用百分比(相对于父容器)。
现在,当我添加border: 1px
到 div 时,所有布局都中断了......我想边框每边增加 1px,解决方案是添加一些内部边框。我可以以某种方式添加这样的内部边框吗?
您可以使用box-sizing: border-box
使边框的宽度成为width
元素的一部分。
.example {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
使用大纲属性。与边框属性不同,它不会“添加”到元素的高度或宽度。然而,与边框属性不同的是,您不能拥有 left、right、bottom 或 left 单独的属性。虽然您可以拥有轮廓样式、轮廓宽度和轮廓颜色属性。
0.5
您可以通过使它们减少百分比49.5%
编辑:Outset 不起作用,谢谢@thirty
假设你有一个父 div 和许多子 div。当您将高度和宽度设置为百分比时,您会让它们相互粘连。然后,当添加border:1px
它们的宽度时,它们会变得比以前更长。为了解决这个问题,我会说你应该another div after the parent div
防止调整宽度。