Я смущен размером тега body в html.
У меня сложный код:
<body>
</body>
body{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Почему фоновое покрытие охватывает всю страницу?, я думал, что он должен охватывать только 100 пикселей,
Пожалуйста, объясните это мне, спасибо за вашу помощь!
Это действительно запутывает, но указано в спецификации CSS 2.1, раздел 14.2 Справочная информация: если вычисленное значение background-color равно transparent, а вычисленное значение background-image равно none для элемента html (как по умолчанию), браузеры должны вместо этого использовать вычисленное значение свойств фона для элемента body и не должны отображать фон для body (т.е. сделать его прозрачным). То есть, body фон волшебным образом превращается в фон html, если html не имеет собственного фона, и это влияет только на свойства фона, а не на истинную высоту элемента body.
Я не видел никаких оснований для этого нечетного правила, которое предписывает своего рода "обратное наследование". Но его четко указано в CSS 2.1 и применяется браузерами.
Как объясняется в других ответах, вы можете сделать свой контент фоном определенной высоты либо путем установки фона на html (так что body фон действительно применяется только к body) или с помощью элемента-обертки внутри body и установки высоты на нем (поскольку специальное правило применяется только к body).
Спасибо Anne van Kesteren, который указал на спецификацию CSS, когда я спросил об этом в списке рассылки WHATWG. (Я думал, что я знаю CSS 2.1 наизусть, но на самом деле не сделал.)
Тело является специальным тегом HTML и обычно охватывает всю HTML-страницу. Попробуйте следующее:
<body>
<div id="content">
Content goes here
</div>
</body>
и CSS для сопровождения:
body{
/* whatever body related codes you'd like to use go here */
}
#content{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Многие веб-разработчики не понимают разницы между применением стиля к элементу body и элементом html. Большую часть времени эти авторы будут применять стиль только к элементу тела; когда этого не достаточно, они будут спамить всевозможные стили как на html, так и на теле до тех пор, пока страница не будет выглядеть правильно.
Путаница понятна. В начале оба были обработаны одинаково, с атрибутами, такими как background-color, применялись к тегу body, влияя на всю страницу.
EDIT: Чтобы упростить, я добавил скрипт, чтобы продемонстрировать, как применяется фоновый цвет. Поэтому, если вы укажете цвет фона для тела, и вы DONT хотите, чтобы он распространился на весь страницы, вы также должны указать цвет фона для HTML
CSS
html{
background-color:yellow;
}
body{
padding: 0px;
height: 100px;
background-color: red;
}
Вы должны явно указать цвет фона для тега html (, когда браузер автоматически добавит его), в противном случае фон body распространяется по всему документу.