CSS内部边框，破碎的布局。

Question

我将屏幕分成了许多

，使它们相互粘贴（比如说，像棋盘一样，但是每个方格的大小不同）。我使用百分比（相对于父容器）设置了高度和宽度。现在，当我给div添加border: 1px时，所有的布局都破坏了...... 我想象中，边框会在每个边上添加1px，解决办法是添加一些内部边框。我能否以某种方式添加这样的内部边框？

- Jakub M.

Answer 1

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

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

浏览器支持。

- thirtydot

---

/* 你忘了加上IE的-ms前缀 */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; - Emilio Yero

@EmilioYero：没有，看一下我回答末尾的“浏览器支持”链接。IE7根本不支持它，而IE8及更高版本则无需供应商前缀即可支持它。 - thirtydot

Answer 2

使用轮廓属性。与边框属性不同，它不会“添加”到元素的高度或宽度。但是，与边框属性不同的是，您不能具有左，右，底部或左个别属性。虽然您可以具有轮廓样式，轮廓宽度和轮廓颜色属性。

轮廓参考

- Jawad

---

@Phil：我不确定，但我认为即使在旧版浏览器中，轮廓属性也得到了良好的支持。如果有错误，请纠正我。 - Jawad

@thirtydot：我发现使用CSS参考文档时，它们的兼容性部门经常是错误的。例如，从个人经验来看，轮廓在IE8及以上版本和FF 3.5及以上版本中都得到了支持。 - Jawad

该链接针对IE8和FF 3.5版本显示为“有缺陷”。这意味着它可以工作，但是在兼容性表格下面详细列出了存在的错误。 - thirtydot

Answer 3

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

- Phil

---

“outset” 不会改变任何东西。 - thirtydot

Answer 4

假设你有一个父级div和许多子级div。当你将高度和宽度设置为百分比时，它们会粘在一起。然后，当添加border:1px时，宽度会变得比以前更长。为了解决这个问题，我建议你应该在父级div之后再加上另一个div来防止调整宽度。

- Tepken Vannkorn

---

@Jawad：尝试移除padding和margin，这样它就会将所有子div包裹在一起。 - Tepken Vannkorn