Почему 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

Мой вопрос, если это ожидаемое поведение. Кажется, противоречит мне. Я хотел бы сделать так, чтобы коробка исчезала только манипулируя шириной / высотой. Спасибо за любой вклад.

 Seka21 июн. 2012 г., 18:44
Я мог бы также использовать молоток, чтобы разбить яйцо ... но я стараюсь этого не делать :) Шучу, мне действительно нужен элемент, чтобы так исчезнуть ... подумать о щели ...
 Jrod21 июн. 2012 г., 18:14
Какой браузер вы используете? Не все браузеры поддерживают размер окна напрямую. У некоторых есть свои собственные проприетарные размеры, такие как-moz-box-sizing а также-webkit-box-sizing, Если вы хотите, чтобы что-то исчезло, подумайте об использованииdisplay:none; или жеvisibility:hidden;
 Jrod21 июн. 2012 г., 21:28
Вы имеете в виду какую-то анимацию, где вы постепенно уменьшаете ширину до нуля? Не совсем уверен, что вы имеете в виду под щелью. Если бы вы могли уточнить, чего именно вы пытаетесь достичь, возможно, есть другое, более подходящее решение. Как и в большинстве случаев, есть много способов сделать это. Возможно, молоток с раздвоенным хвостом - плохой выбор, но, может быть, молот вырвет прямо на вашей аллее.

Ответы на вопрос(2)

Решение Вопроса

Область содержимого - это все, что осталось после вычитания ширины границы.

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; в ноль.

 21 июн. 2012 г., 19:44
Я согласен, проблема в том, что вы не можете разрешить блоки отрицательного размера, поэтому они решили с этим справиться. Я не могу придумать лучшей альтернативы.
 25 мая 2017 г., 05:13
Вот как вы делаете треугольник!css-tricks.com/examples/ShapesOfCSS
 Seka21 июн. 2012 г., 19:37
Спасибо за ответ; ключ был в понимании, что граница остается из-за отрицательного результата, я думаю. Но, по вашему мнению, вы считаете это последовательным поведением? Я удивляюсь, потому что в этом последнем случае border-box и content-box ведут себя одинаково, что кажется мне настолько нелогичным. Как вы думаете?
 05 дек. 2017 г., 18:33
так сborder-box мы на самом деле не устанавливаем размер border + padding + content, мы по-прежнему устанавливаем размер только содержимого, но говорим браузеру впитывать border и padding в контент. хе.
 26 мая 2017 г., 11:00
@DanielH Круто! спасибо за ссылку.

Посмотрите на этот скриншот:

box metrics

Вся коробка100x100px как и следовало ожидать, но фактическая ширина90px + 10px правая граница. Поэтому, когда вы устанавливаете ширину в 0, ширина все равно равна 0 (не может иметь отрицательную ширину), но у вас все еще есть граница 10 пикселей.

 21 июн. 2012 г., 18:24
Это то, что происходит. Ширина содержимого (ширина без учета границ или отступов) равна 0, потому что после вычитания границ и отступов у вас остается отрицательная ширина. Обратите внимание на то, как вы определяете «содержание».
 21 июн. 2012 г., 18:32
Нет, «ширина содержимого» будет 0. Общая ширина содержимого + отступ + границы.
 Seka21 июн. 2012 г., 18:34
Нет, это не так, я использую box-sizing: border-box. Пожалуйста, прочитайте о собственности.
 Seka21 июн. 2012 г., 18:30
... так что общая "ширина" элемента должен быть равен 0, верно? Если, определив ширину: 10px и border-right: 10px, я получу блок 10px, я должен получить блок 0px, если я определю ширину 0px, правильно? Повторно цитирую Пола Айриша: «Тьфу. Если я скажу, что ширина равна 200px [0px], черт возьми, это будет окно шириной 200px [0px], даже если у меня 20px отступа [border]. & Quot;* { box-sizing: border-box } FTW
 Seka21 июн. 2012 г., 18:19
Но почему у вас все еще есть граница? Потому что после спецификаций его там быть не должно: «Ширина и высота содержимого вычисляются путем вычитания ширины границ и отступов соответствующих сторон из указанного & # x2018; width & # x2019; и & # x2018; высота & # x2019; свойства. Поскольку ширина и высота содержимого не могут быть отрицательными ([CSS21], раздел 10.2), это вычисление смещается на 0. & quot;see border-box

Ваш ответ на вопрос