В чем разница между применением правил CSS для html по сравнению с телом?

Я не вижу разницы между:

html {
    background: #f1f1f1;
}

body {
    background: #f1f1f1;
}

Любое объяснение?

Ответ 1

Нет реальной разницы (если вы просто говорите о том, где применять background, иначе ответ BoltClock на этот другой вопрос лучше подходит). html - это элемент, как и body.

Оба варианта являются действительными, и оба они будут работать во всех распространенных браузерах.

Например, YUI Reset выбирает background для background вместо body:

http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

Это требует, чтобы вы установили background на html, например, см.: не можете изменить цвет фона тела с помощью CSS reset

Смотрите: http://dev.w3.org/csswg/css3-background/#special-backgrounds

Фон корневого элемента становится фоном холст и его область рисования фона расширяются, чтобы покрыть весь холст, хотя любые изображения имеют размер и расположение относительно как будто они были написаны только для этого элемента. (В других слова, область фонового позиционирования определяется как для корня элемент.) Если значение "background-color" корня "прозрачно", цвет фона холста зависит от UA. Корневой элемент не снова нарисуйте этот фон, т.е. используемое значение его фона прозрачным.

Для документов, корневым элементом которых является HTML-элемент HTML [HTML401] или элемент hhml XHTML [XHTML11]: если вычисленное значение 'Background-image на корневом элементе есть' none и его "Background-color" является прозрачным, вместо этого должны использоваться пользовательские агенты распространять вычисленные значения свойств фона из этого элемент первый элемент HTML BODY или XHTML. Используемые значения этих свойств фона элемента BODY являются их начальными значениями, и распространяемые значения обрабатываются так, как если бы они были указаны на корневой элемент. Рекомендуется, чтобы авторы HTML-документов указывали фон холста для элемента BODY, а не HTML элемент.

То, что говорит эта стена текста, показано здесь:

background только body: http://jsfiddle.net/hhtzE/
background on html и body: http://jsfiddle.net/hhtzE/1/
background only html: http://jsfiddle.net/hhtzE/2/

Ответ 2

html является родителем тела. Один из способов увидеть разницу - сделать:

html {
    overflow: scroll;
}


body {
    overflow: scroll;
}

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

Ответ 3

Хотя body и html часто можно лечить одинаково, это не одно и то же. body может иметь поля, отступы и границы и перемещаться относительно элемента html. Я иногда использую край тела и отступы, чтобы сделать белую "страницу" на светлом фоне, и она печатает то же, что и выглядит.

Смотрите эту скрипту для простого примера, показывающего, что два могут иметь разные цвета фона.

Соответствующий CSS - это то, что я прокомментировал в вопросительном ответе:

html {
    background-color: #ffffc0;
}
body {
    padding: 2em;
    margin: 2em;
    background-color: white;
    border: 1px solid black;
}

Существует также элемент :root, потому что не все браузеры (cough.ie.cough) обрабатывают элемент html как корень DOM.

Ответ 4

Кто-то написал здесь, что это всегда 100% высота, но это не так!

Попробуйте сделать (протестировано на FF4):

html{
    background:yellow;
}
body{
    background:red;
    height:100px;
}

Цвет

<body> влияет на цвет <html> только тогда, когда <html> не имеет набора цветов. Самое неприятное здесь, когда <body> имеет цвет и <html> нет, некоторые версии браузера будут иметь проблемы с последним прямым дочерним блочным элементом с запасом. Цвет будет сокращен после того, как элемент и маржа будут иметь цвет <html>. Это всегда верно, когда цвет <html> установлен.

С другой стороны, когда установлен <html> фон, <body> может иметь, например, поля. Это просто беспорядок.

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

body{}

измените его на:

body,html{}

Не используйте свойства модели box box в <body> и <html> (или вообще не изменяйте его, просто чтобы иметь спокойствие). Создайте внутренний элемент (может быть шириной 100%) и работайте с ним вместо этого.

Ответ 5

Обычно не должно быть никакой разницы, потому что эти элементы должны восприниматься в полноэкранном режиме. Это просто как наличие div внутри какого-либо другого div. Но я считаю, что более правильным является стиль тега body, потому что html не является частью макета.