Вопрос по html, css – w3.org/TR/css-backgrounds-3/#special-backgrounds

10

от вопрос уже есть ответ здесь:

CSS ширина элемента тела не работает 6 ответов

<!DOCTYPE html>
<html>
<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>My First Heading</h1>
</body>
</html>

В приведенном выше коде я установилwidth в70vw иheight в40vh.

У меня есть два вопроса:

Почемуheight изhtml,body все еще заполняет 100% высоты области просмотра, когда я указал, что это должно заполнить только 40%, используя40vh вhtml,body декларация?Почему ширина элементов h1 установлена ​​на70vw изhtml,body объявление, хотя ширина не наследуется, но высота для h1 не установлена40vh изhtml,body декларация?
и именно поэтому я прокомментировал, я еще не знаю о backround :) Temani Afif
для второго вопроса. h1 - это блочный элемент si, он занимает 100% ширины контейнера, а высота - автоматически, поэтому зависит от содержимого, а не от высоты родительского элемента. Temani Afif
@TemaniAfif Но ширина элемента зависит от ширины родительского права? Так как всякий раз, когда я меняюwidth наhtml,body напримерwidth:50vh, width:60vhи т. д., красный фон h1 изменяется соответственно. CapturedTree
Тогда возникает вопрос: почему цвет фона применяется вне этого? takendarkk
для 1-го вопроса добавьте рамку к объявлению html, body, и вы увидите, что она принимает указанную высоту / ширину Temani Afif

Ваш Ответ

2   ответа
6

Фон корневого элемента становится фоном холста и покрывает весь холст [...]

Попробуйте придать другому цвету тело, и вы увидите разницу

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>

<body style="background-color:blue;">
  <h1>My First Heading</h1>
</body>

</html>

Читайте здесь в деталях

@TemaniAfif, нет. Qwertiy
да, я тоже это имел в виду;) поскольку речь идет не только о фоне HTML, но и о том, как фон тела идет в HTML Temani Afif
даже если вы удалите фон из HTML, мы видим его тоже, вы можете оставить только один в теле Temani Afif
удалите один из HTML также :) Temani Afif
7

html получает фонbody если не установлено наhtml сам и область просмотра заполнены фоном html (это единственное наследование от child в css).

Это поведение указано вCSS Фоны и Границы Модуль Уровень 3:

Холст документа - это бесконечная поверхность, на которой отображается документ. [CSS2] Так как ни один элемент не соответствует холсту, для того, чтобы позволить стилизацию холста, CSS распространяет фон корневого элемента.

Для документов, корневым элементом которых является HTML-элемент HTML или HTML-элемент XHTML [HTML]: если вычисленное значение background-image для корневого элемента равно none и его background-color прозрачен, пользовательские агенты должны вместо этого распространять вычисленные значения свойства фона из первого дочернего элемента HTML BODY или XHTML этого элемента.

Я добавил фон дляhtml в вашем примере, и вы можете видеть, это нормально:

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
}

html {
  background: white;
}

h1 {
  background-color: red;
}
<h1>My First Heading</h1>

Другая вещь, которую я могу сделать, это наброски - она ​​покажет, где элементы заканчиваются:

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
  outline: 1px dotted blue;
  outline-offset: -1px;
}

h1 {
  background-color: red;
}
<h1>My First Heading</h1>

Еще один интересный случай:

html {
  width: 50vw;
  height: 50vh;
}

body {
  margin: 40vh 0 0 40vw;
  width: 30vw;
  height: 30vh;
  background: linear-gradient(45deg, red, blue);
}

html, body {
  border: 8px solid;
}

html получает фон тела, если он не установлен для самого html и окна просмотра где я могу прочитать об этом? Temani Afif
@ToothyRel, я тоже. Qwertiy
@TemaniAfif, обновил ответ. Qwertiy
Зачем понижать? :( Qwertiy
Лучше просто стилизоватьbody элемент, а не стильhtml элемент вообще? CapturedTree

Похожие вопросы