当1像素边框被添加到div，Div大小增加，不想这样做
点击时，我将1px边框添加到div，所以Div尺寸增加2px X 2px。 我不想让div大小增加。 有没有简单的方法来做到这一点？
凌乱的详细解释
其实我正在添加DIV与float：左（相同的大小，像图标）的容器div，所以所有堆叠一个接一个，当（容器div宽度是300px）没有空间左宽度明智所以孩子DIVs来在下一行，所以它的类似目录，但是由于边界只select了DIV大小得到增加，所选DIV下的DIV向右移动，并在选定的DIV下创build空的空间。
编辑：
降低select的高度/宽度，但如何增加回来。 使用一些第三方框架，所以当DIV失去select时没有事件
边界css属性将增加所有元素的“外部”大小，除了表中的tds。 在html-> layout选项卡下，你可以看到Firebug是如何工作的。
就像一个例子，宽度和高度为10px，边框为1px的div将有一个12px的外部宽度和高度。
对于你的情况，为了让它看起来像边框在div的“内部”，在你select的CSS类中，你可以通过加倍你的边框尺寸来减小元素的宽度和高度，或者你也可以这样做元素填充。
例如：
div.navitem { width: 15px; height: 15px; /* padding: 5px; */ } div.navitem .selected { border: 1px solid; width: 13px; height: 13px; /* padding: 4px */ } 这在这种情况下也是有用的。 它允许您设置边框而不更改div宽度
textarea { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
在点击之前设置一个边框，使其与背景颜色相同。
然后当你点击只是改变背景颜色，宽度不会改变。
另一个好的解决scheme是使用outline而不是border 。 它添加了一个边框，而不影响盒子模型。 这适用于IE8 +，Chrome，Firefox，Opera，Safari。
尝试更改边框来勾勒。
大纲：1px纯黑色;
使用了许多这些解决scheme之后，我发现使用设置border-color: transparent的技巧border-color: transparent是最灵活和广泛支持的：
.some-element { border: solid 1px transparent; } .some-element-selected { border: solid 1px black; }
为什么更好：
- 不需要对元素的宽度进行硬编码
- 良好的跨浏览器支持（只有IE6错过）
- 与
outline不同，您仍然可以分别指定顶部和底部边框 - 与将边框颜色设置为背景颜色不同，如果您更改背景，则不需要更新此颜色，并且与非纯色背景兼容。
试试这个盒子大小：边界框;
只需减less宽度和高度的两倍的边界宽度
我通常使用填充来解决这个问题。 填充将在边框消失时添加，并在边框出现时移除。 示例代码：
.good-border { padding: 1px; } .good-border:hover { padding: 0px; border: 1px solid blue; }
在JSFiddle上查看我的完整示例代码： https ：//jsfiddle.net/3t7vyebt/4/
增加边框时，尝试减小边距大小
您可以使用与您的背景颜色相同的边框创build元素，然后在想要显示边框时只需更改其颜色即可。
你可以用插入阴影做一些奇特的事情。 示例将边框放在元素的底部而不更改其大小：
.bottom-border { box-shadow:inset 0px -3px 0px #000; }
有时，如果不明确设置高度或宽度，则不需要影响高度或宽度。 在这种情况下，我觉得使用伪元素很有用。
.border-me { position: relative; } .border-me::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: solid 1px black; }
您还可以使用伪元素做更多的事情，所以这是一个非常强大的模式。
.filter_list_button_remove { border: 1px solid transparent; background-color: transparent; } .filter_list_button_remove:hover { border: 1px solid; }
我需要能够通过添加一个类来“限制”任何元素，而不会影响其尺寸。 对我来说一个很好的解决scheme是使用盒子阴影。 但在某些情况下，由于其他兄弟姐妹，效果不明显。 所以我结合了典型的盒子阴影以及插入的阴影。 结果是边框外观而不改变任何尺寸。
值以逗号分隔。 这是一个简单的例子：
.add_border { box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75); }
的jsfiddle
调整你喜欢的外观，你很好去！
