为什么选择框大小:border-box仍显示宽度为0px的边框? [英] Why does box-sizing: border-box still show the border with a width of 0px?

问题描述

在CSS中使用box-sizing:border-box时，我假设元素的总宽度将在其"width"值中定义.因此，如果我说分隔的宽度是20px，右边框是10px，则我将得到一个占用20px空间的框，其中一半是右边框.将其也推到我将宽度设置为10px和右边框的位置，例如:

#box{
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 100px;
    background: black;
    border-right: 10px solid red;
}​

该框将仅由红色边框组成.当我将宽度设置为0px时会发生什么?我以为这会使整个事情消失，但是不，结果与上面的结果完全相同: jsFiddle

我的问题是这是否是预期的行为.似乎与我不一致.我想让一个盒子消失，只操作宽度/高度.感谢您的输入.

解决方案

内容区域是减去边框的宽度后剩下的任何内容.

内容的宽度和高度是通过减去边框来计算的 以及指定的宽度"各边的填充宽度 和高度"属性.

指定宽度= 10像素
边框宽度= 10像素
内容宽度=指定宽度(10 px)-边框宽度(10 px)
内容宽度10-10 = 0

指定宽度= 0像素
边框宽度= 10像素
内容宽度=指定宽度(0 px)-边框宽度(10 px)
内容宽度0-10 = -10(这将删除边框使用的10像素)

但是

由于内容的宽度和高度不能为负([CSS21]，第 10.2)，则此计算的下限为0.

指定宽度= 0像素
边框宽度= 10像素
内容宽度=指定宽度(0 px)-边框宽度(10 px)
内容宽度0-10 = 0(不会删除边框使用的10像素)

如果不想使用display:none;或visibility:hidden;，则需要将width:XX;和border-right:XX;都设置为零.

When using box-sizing: border-box in CSS, I assume that the total width of an element will be defined in its "width" value. So if I say that the width of a division is 20px and the right border is 10px, I will end up with a box that takes up the space of 20px and half of it is the right border. Pushing it to the point where I set the width to 10px and the right border, too, like here:

#box{
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 100px;
    background: black;
    border-right: 10px solid red;
}​

the box will only consist of the red border. What should happen, when I set the width to 0px? I thought it would make the whole thing disappear, but no, the result is exactly the same like the one above: jsFiddle

My question is if this is the expected behavior. Seems inconsistent to me. I would like to make a box disappear only manipulating the width/height. Thanks for any input.

解决方案

The content area is anything left after you subtract the width of the border.

The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Specified width = 10 px
border width = 10 px
Content width = Specified width (10 px) - border width (10 px)
Content width 10 - 10 = 0

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Specified width = 0 px
border width = 10 px
Content width = Specified width (0 px) - border width (10 px)
Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.

这篇关于为什么选择框大小:border-box仍显示宽度为0px的边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！