可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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:
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.
回答1:
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.
回答2:
Take a look at this screenshot:
The entire box is 100x100px as you would expect, but the actual width is 90px + 10px right border. So when you set the width to 0, the width is still 0 (can't have negative width), but you still have the 10px border.
