html中加border不影响高度,当1像素边框被添加到div，Div大小增加，不想这样做

边界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

调整你喜欢的外观，你很好去！