我有一个<div>元素，我想给它加一个边框。我知道我可以写style="border: 1px solid black"，但这将在div的两侧增加2px，这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px，如果我添加一个边界，那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现，并确保盒子将仍然是100px(包括边界)?
当前回答
为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
其他回答
11年后，答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。
为了在新旧浏览器之间保持一致的呈现，可以添加一个双容器，外部的容器具有宽度，内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
我在上面没有看到的一个解决方案是在输入上填充，我99%的时间都是这样做的。你可以按照……
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
我喜欢的是，我有一个完整的菜单，每边的边框+填充+过渡属性。
使用伪元素:
.button { 背景:# 333; 颜色:# fff; 浮:左; 填充:20 px; 保证金:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; ｝ < div class =”按钮“> < / div >你好
在样式化选定元素的虚拟最后一个子元素之后使用::。内容属性创建匿名替换元素。
我们使用相对于父元素的绝对位置来包含伪元素。然后你可以自由地在你的主元素的背景中设置任何自定义背景和/或边框。
这种方法不会影响主元素内容的位置，这与使用box-sizing: border-box;不同。
想想这个例子:
.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 边框:5px solid #f00; border-left-width: 20 px; box-sizing: border-box; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >
这里.button的宽度使用父元素约束。设置左边框宽度可以调整内容框大小，从而调整文本的位置。
.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; border-left-width: 20 px; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >
使用伪元素方法不会影响内容框的大小。
根据应用程序的不同，使用伪元素的方法可能是也可能不是理想的行为。
设置box-sizing属性为border-box:
div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:100 px; 身高:100 px; 边框:20px实体#f00; 背景:# 00 f; 保证金:10 px; ｝ Div + Div { 边框:10px纯红色; ｝ < div >你好!< / div > < div >你好!< / div >
它适用于IE8及以上版本。
