Почему стиль фона элемента body влияет на весь экран? - PullRequest
Новая
       6

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

15 голосов
/ 08 марта 2011

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

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

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

Ответы [ 7 ]

13 голосов
/ 08 марта 2011

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

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

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

5 голосов
/ 08 марта 2011

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

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

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

html {
    background-color: grey;
}
0 голосов
/ 08 марта 2011

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

0 голосов
/ 08 марта 2011

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

<body>
    <div id="container">

    </div>
</body>

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

0 голосов
/ 08 марта 2011

Думаю, одна из тех загадок CSS.

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

0 голосов
/ 08 марта 2011

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

0 голосов
/ 08 марта 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...