首页 文章

当为div添加1 px边框时，Div尺寸增加，不想这样做

提问于
浏览 次
79

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

Messy Detailed Explanation
实际上我正在使用浮点数添加DIV：左（相同大小，如图标）到一个容器-div，所以所有堆叠一个接一个，当（容器div宽度为300px）时没有空间宽度，所以子DIV来了在下一行，所以它的目录，但由于边框只选择了DIV大小增加，所选DIV下的DIV会向右移动，并在选定的DIV下方创建空白区域 .

EDIT:
选择时减小高度/宽度，但如何增加它 . 使用某些第三方框架，因此在DIV失去选择时没有事件 .

css html border

16 回答

  • 10

    我们也可以使用css calc（）函数

    width: calc(100% - 2px);

    为边界减去2px

    回复于
  • 29

    边框css属性将增加所有元素“外部”大小，除了表中的tds . 您可以在html-> layout选项卡下了解Firebug的工作原理 .

    举个例子，宽度和高度为10px，边界为1px的div的外部宽度和高度为12px .

    对于你的情况，为了使它看起来像边框位于div的“内部”，在你选择的CSS类中，你可以通过加倍边框大小来减少元素的宽度和高度，或者你可以做同样的元素填充 .

    例如：

    div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}
    回复于
  • 2

    这在这种情况下也很有用 . 它允许您设置边框而不更改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+ */
}

    取自http://css-tricks.com/box-sizing/

    回复于
  • 2

    在单击与背景颜色相同之前在其上设置边框 .

    然后当您单击时只更改背景颜色，宽度不会改变 .

    回复于
  • 18

    另一个好的解决方案是使用 outline 而不是 border . 它会添加边框而不会影响框模型 . 这适用于IE8，Chrome，Firefox，Opera，Safari .

    （https://stackoverflow.com/a/8319190/2105930）

    回复于
  • 5

    尝试将边框更改为轮廓 .

    轮廓：1px纯黑色;

    回复于
  • 82

    使用了很多这些解决方案后，我发现使用设置 border-color: transparent 的技巧是最灵活和广泛支持的：

    .some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

    为什么它更好：

    • 无需对元素的宽度进行硬编码

    • 出色的跨浏览器支持（仅限IE6错过）

    • 与 outline 不同，您仍然可以单独指定例如顶部和底部边框

    • 与将边框颜色设置为背景颜色不同，您不能与非纯色背景兼容 .

    回复于
  • 35

    试试这个

    box-sizing: border-box;
    回复于
  • 14

    我通常使用填充来解决此问题 . 边框消失时将添加填充，边框出现时将删除填充 . 示例代码：

    .good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

    enter image description here

    在JSFiddle上查看我的完整示例代码：https://jsfiddle.net/3t7vyebt/4/

    回复于
  • 2

    只需将宽度和高度减去边框宽度的两倍即可

    回复于
  • 38

    增加边框时尝试减小边距大小

    回复于
  • 1

    你可以用插入阴影做一些奇特的事情 . 将边框放在元素底部而不更改其大小的示例：

    .bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}
    回复于
  • 2

    有时您不希望在没有明确设置的情况下影响高度或宽度 . 在这种情况下，我发现使用伪元素很有帮助 .

    .border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

    您还可以使用伪元素做更多事情，因此这是一个非常强大的模式 .

    回复于
  • 1

    我需要能够通过添加类来“边界”任何元素而不影响其尺寸 . 对我来说一个很好的解决方案是使用盒子阴影 . 但在某些情况下，由于其他兄弟姐妹，效果不明显 . 所以我结合了典型的盒子阴影和插入盒子阴影 . 结果是边框外观而不更改任何尺寸 .

    值以逗号分隔 . 这是一个简单的例子：

    .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

    调整您的首选外观，你很高兴去！

    回复于
  • 20
    .filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
    回复于
  • 1

    您可以使用与背景颜色相同的边框创建元素，然后在需要显示边框时，只需更改其颜色即可 .

    回复于

相关问题