我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
我有一个<div>元素,我想给它加一个边框。我知道我可以写style="border: 1px solid black",但这将在div的两侧增加2px,这不是我想要的。
我更希望这个边界距离div的边缘为-1px。div本身是100px x 100px,如果我添加一个边界,那么我必须做一些数学运算来使边界出现。
有什么方法我可以使边界出现,并确保盒子将仍然是100px(包括边界)?
当前回答
设置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及以上版本。
其他回答
你可以用偏移量来查看大纲,但这需要一些填充来存在于你的div上。或者你完全可以在里面放置一个边界div
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
你可能需要摆弄假边界div的边缘,以适合你喜欢的。
11年后,答案在这里:
只用提纲: 外形:0.2vw纯红色;
我希望我能帮助那些11年后也看到这个问题的人。
为了在新旧浏览器之间保持一致的呈现,可以添加一个双容器,外部的容器具有宽度,内部的容器具有边框。
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
这显然只在精确宽度比额外标记更重要的情况下才会发生!
一个更现代的解决方案可能是使用css变量和calc. calc被广泛支持,但在IE11中还没有变量(可使用polyfills)。
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
虽然这确实需要一些计算,这是最初的问题想要避免的。我认为这是一个使用计算的好时机,因为它们是由css本身控制的。它也不需要额外的标记或占用以后可能需要的其他css属性。
这个解决方案只有在不需要固定高度的情况下才真正有用。
设置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及以上版本。