Вопрос по css3, border-box, css – Почему box-sizing: border-box по-прежнему показывает границу шириной 0px?

14

При использовании 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

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

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

Ваш Ответ

2   ответа
16

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

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

Я согласен, проблема в том, что вы не можете разрешить блоки отрицательного размера, поэтому они решили с этим справиться. Я не могу придумать лучшей альтернативы.
Вот как вы делаете треугольник!css-tricks.com/examples/ShapesOfCSS
Спасибо за ответ; ключ был в понимании, что граница остается из-за отрицательного результата, я думаю. Но, по вашему мнению, вы считаете это последовательным поведением? Я удивляюсь, потому что в этом последнем случае border-box и content-box ведут себя одинаково, что кажется мне настолько нелогичным. Как вы думаете? Seka
так сborder-box мы на самом деле не устанавливаем размер border + padding + content, мы по-прежнему устанавливаем размер только содержимого, но говорим браузеру впитывать border и padding в контент. хе.
@DanielH Круто! спасибо за ссылку.
0

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

box metrics

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

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

Похожие вопросы