Вопрос по css3, border-box, css – Почему box-sizing: border-box по-прежнему показывает границу шириной 0px?
При использовании box-sizing: border-box в CSS, я предполагаю, что общая ширина элемента будет определена в его & quot; ширине & quot; значение. Так что, если я скажу, что ширина деления составляет 20px, а правая граница - 10px, я получу прямоугольник, занимающий пространство в 20px, а половина - это правая граница. Переместив его в точку, где я установил ширину 10 пикселей и правую границу, как здесь:
#box{
overflow: hidden;
width: 10px;
box-sizing: border-box;
height: 100px;
background: black;
border-right: 10px solid red;
}
коробка будет состоять только из красной рамки. Что должно произойти, когда я установлю ширину в 0px? Я думал, что это заставит все это исчезнуть, но нет, результат точно такой же, как и выше:jsFiddle
Мой вопрос, если это ожидаемое поведение. Кажется, противоречит мне. Я хотел бы сделать так, чтобы коробка исчезала только манипулируя шириной / высотой. Спасибо за любой вклад.
-moz-box-sizing
а также-webkit-box-sizing
, Если вы хотите, чтобы что-то исчезло, подумайте об использованииdisplay:none;
или жеvisibility:hidden;
Jrod
Область содержимого - это все, что осталось после вычитания ширины границы.
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.
Указанная ширина = 10 пикселей
ширина границы = 10 пикселей
Ширина содержимого = указанная ширина (10 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 10 - 10 = 0
Указанная ширина = 0 px
ширина границы = 10 пикселей
Ширина содержимого = указанная ширина (0 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 0 - 10 = -10 (что приведет к удалению 10 пикселей, используемых границей)
Но
As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
Указанная ширина = 0 px
ширина границы = 10 пикселей
Ширина содержимого = указанная ширина (0 пикселей) - ширина границы (10 пикселей)
Ширина содержимого 0-10 = 0 (что не приводит к удалению 10 пикселей, используемых границей)
Если вы не хотите использоватьdisplay:none;
или жеvisibility:hidden;
, вам нужно установить обаwidth:XX;
иborder-right:XX;
в ноль.
Посмотрите на этот скриншот:
Вся коробка100x100px
как и следовало ожидать, но фактическая ширина90px
+ 10px
правая граница. Поэтому, когда вы устанавливаете ширину в 0, ширина все равно равна 0 (не может иметь отрицательную ширину), но у вас все еще есть граница 10 пикселей.