Почему стилизация фона элемента 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>
?