Почему стилизация фона элемента body влияет на весь экран?

Когда вы создаете фон элемента body, почему стиль влияет на весь экран, а не только на элемент тела? Скажем, я создаю следующее правило:

body {width: 700px; border: 1px dotted red; background-color: blue;}

Я обнаружил, что граница отображается как ширина 700 пикселей, как и следовало ожидать, но цвет фона занимает весь обозреватель браузера. Почему?

Ответ 1

Цитата из http://www.w3.org/TR/CSS21/colors.html

Фон корневого элемента становится фоном холста и охватывает весь холст, привязанный (для "background-position" ) в той же точке, что и если бы он был написан только для самого корневого элемента. Корневой элемент не создает этот фон снова.

Элемент body является корневым элементом и, следовательно, в соответствии с правилами CSS он теряет свой стиль фона, а стиль фона применяется к содержащему холсту (область веб-страницы в браузере), поэтому весь экран синий. Остальные свойства остаются с элементом (например, border).

Ответ 2

Из CSS: окончательное руководство Эрика Мейера

В значениях CSS никогда не распространяются вверх; то есть элемент никогда передает значения своим предкам. Существует исключение из восходящего правило распространения в HTML: фон стили, применяемые к элементу bodyможет быть передан элементу html, который является корневым элементом документа и поэтому определяет его холст.

Поэтому, когда вы добавляете объявление background-color: blue; в элемент body, это значение распространяется на элемент html (который также является корневым элементом). Добавьте это объявление, чтобы увидеть его сами.

html {
    background-color: grey;
}

Ответ 3

Вы не можете установить ширину в самом элементе <body>, поэтому весь экран выглядит синим, а всего лишь площадью 700 пикселей.

Ответ 4

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

Ответ 5

Одна из этих загадок CSS, я думаю.

Лучше всего разместить свой контент внутри элемента и стиля <div>, вместо того чтобы пытаться стилизовать весь тег <body>.

Ответ 6

Вот почему рекомендуется использовать контейнеры. Например:

<body>
    <div id="container">

    </div>
</body>

Пример здесь: http://jsfiddle.net/Shaz/2FqqV/

Ответ 7

Когда вы устанавливаете цвет фона <body>, браузер интерпретирует это как цвет фона для всего окна, даже если вы вынудили <body> быть меньше с помощью CSS. В противном случае, какой цвет был бы вне тега <body>?