Почему свойства ширины и высоты CSS не корректируются для заполнения?

Question

Итак, сначала немного мяса, чтобы установить сцену:

HTML

<div id="container">
    <div id="inner">test</div>
</div>

CSS

#container {
    width:300px;
    height:150px;
    background-color:#d7ebff;
}

#inner {
    width:100%;
    height:100%;
    padding:5px;
    background-color:#4c0015;
    opacity:.3;
}

Это создаст нечто похожее на все современные браузеры:

Теперь я знаю, что это поведение, соответствующее стандартам (как я знал раньше, но подтвердил в этом посте , и я также знаю, что если я включу этот код во внутреннюю декларацию CSS:

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box

... он примет модель «рамки» и получит поведение, которое кажется мне более интуитивным, но я просто попытался логически обосновать причину, почему это так, и я не смог сделать это.

Мне кажется (на первый взгляд) более логичным, чтобы внутренний блок всегда заполнял контейнер точно на 100% ширины контейнера, независимо от заполнения или границы внутреннего блока. Я сталкиваюсь с этой проблемой все время, когда пытаюсь установить ширину текстовой области равной 100% с границей или чем-то вроде внутреннего отступа 4px ... текстовая область всегда будет переполнять контейнер.

Так что мой вопрос ... в чем логика установки поведения по умолчанию, игнорирующего границу и отступ элемента при настройке его ширины?

Answer 1

Причина, по которой CSS использует блочную модель как:

+---------------------
|       Margin
| +-------------------
| |     Border
| | +-----------------
| | |   Padding
| | | +---------------
| | | | Width x Height

, заключается в том, что CSS является языком для оформления документов .Он был (изначально) разработан с учетом исследовательских работ и других формальных документов, а не как способ сделать красивую графику.Таким образом, модель вращается вокруг содержимого , а не контейнера.

CSS - это не язык программирования, это язык стилей.В нем явно не указано, как должен отображаться документ, а предлагает некоторые рекомендации, которым должен следовать браузер.Все они могут быть перезаписаны и изменены реальным языком программирования: JavaScript.

Возвращаясь к идее модели содержимого, рассмотрим следующий CSS:

p
{
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  margin: 10px;
  padding: 9px;
  width: 400px;
}

height isn 't, поскольку content определяет высоту, она может быть длинной, короткой, но неизвестной и неважной.width установлен в 400px, потому что именно так должен быть контент (текст).

padding - это просто средство расширения цвета фона, чтобы текст могбыть хорошо читаемым вдали от краев, точно так же, как вы оставляете пространство при письме / печати на листе бумаги.

* border - это средство окружения некоторого содержимого, чтобы отличать его от других фоновчтобы обеспечить границу (рисунок) между различными элементами.

* margin говорит абзацу оставить некоторое пространство между краями, и при свертывании полей каждая группа останется равномерно распределенной, не указывая другойполе для первого или последнего элемента.

Для поддержания текучести width по умолчанию равно auto, что означает, что ширина будет максимально широкой:

1. без сдавливаниянеобоснованно
2. без заполнения, выходящего за пределы контейнера

Конечно, в крайних случаях заполнение будет расширятьсяd его контейнер, потому что содержимое может быть сжатым. Все дело в контенте.

Answer 2

Вы можете просмотреть следующее на w3c: http://www.w3.org/TR/CSS21/box.html

Блочная модель такова, что высота и ширина относятся к области содержимого элемента. Заполнение находится за пределами этой области, поэтому вы видите, что внутренняя коробка переполняет внешнюю.

После заполнения наступает граница, если таковая имеется. Тогда маржа применяется за пределами границы. Это означает, что фактическая ширина элементов определяется как: ширина + отступ + граница + отступ.

В сущности, имеющийся у вас css определяет, что во внутреннем блоке будет область содержимого 300 на 150 пикселей плюс дополнительные 5 пикселей отступа, превышающие то, что дает блок размером 310 на 160 пикселей.

Лично я согласен, что ширина должна включать отступы. Однако это не то, что говорит спецификация.

В качестве примечания, в режиме причуд добавлены отступы (и граница) в фактической ширине. К сожалению, режим quirks портит так много других вещей, что обычно лучше иметь дело только со специфицированной моделью w3c, чем пытаться создать все css, необходимые для исправления других «причудливых» вещей.

Другой сайт (который согласен с вами и мной) находится здесь: http://www.quirksmode.org/css/box.html

Они упоминают, что CSS3 включает объявление размера блока (как вы уже нашли), которое должно дать вам больше контроля над тем, какую блочную модель использовать. Похоже, что почти все (IE8, Chrome, Firefox) поддерживают то, что хорошо.

Answer 3

Хотя это, возможно, и не было первоначальной целью блочной модели CSS, еще одно преимущество заключается в том, что вам нужно что-то со смещенным фоновым изображением (например, изображение слева или справа от текста).Затем вы можете указать отступ для ширины фонового изображения, чтобы текст не перекрывал его, и при этом указать ширину для самого текста.Например:

.imageDiv{
width:200px;
background-image:url('someimage.png') /*this image is 50 px wide*/
background-repeat:no-repeat;
padding-left:50px;
}

Теперь любой текст, введенный в div с классом imageDiv, покажет изображение слева от текста с любым перекрытием.

Answer 4

Посмотрите на следующую картинку:

Теперь рассмотрим, что происходит, когда вы устанавливаете значения width и height равными 100% - должны ли отступы и границы просто волшебным образом исчезают с этой картинки? Как бы вы, разработчик, справились с этим разумным образом?

width and height is width and height, border and padding is something else - для меня это уже не логично.

С другой стороны

width and height is width and a height, but sometimes when you choose to set them to 100% they are also border and padding - теперь это не имеет смысла для меня.

Но тогда логика одного человека может быть чепухой другого человека, поэтому я не знаю, поможет ли это вам;)

Answer 5

Чтобы ответить на ваш вопрос, я думаю, логика в том, что все дело в содержании; если вы укажете измерения, это те измерения, которые получит контент.

Но, в конце концов, это был только выбор, и с этим мы должны работать.