2016-04-22 4 views
2

Почему элемент тела не использует overflow-y: auto, но он все еще ведет себя одинаково?переполнение тега тела (авто, видимо?)

Я считаю, что по умолчанию он соответствует visible, но как это работает?

+0

Нет необходимости использовать свойство 'overflow: auto' в' ', если вы не используете 'overfloe: hidden', потому что по умолчанию переполнение видимо в теле –

+0

. В основном нет ничего, кроме тела, которое должно отображаться, поэтому значение 'visible' не имеет смысла. Таким образом, он, вероятно, по умолчанию имеет значение 'auto'. – JCOC611

+0

Я не следую. Значение по умолчанию - 'visible'. Мне интересно, почему '' не нуждается в 'overflow-y: auto', как и другие элементы, чтобы сделать его прокручиваемым. – user1164937

ответ

2

Тег body является особым случаем, так как считается корневым элементом документа, и браузеры должны отображать их так, как если бы они были установлены в auto.

Это описано в overflow documentation on W3 назад в CSS 2.1:

UAs необходимо применить свойство «переполнения» установить на корневом элементе в окне просмотра. Когда корневой элемент является элементом HTML «HTML» или элементом «html» XHTML, и этот элемент имеет элемент HTML «BODY» или элемент «тело» XHTML в качестве дочернего элемента, пользовательские агенты вместо этого должны применять свойство «переполнение» от первого такого дочернего элемента до окна просмотра, если значение в корневом элементе «видимо». Значение «видимое» при использовании для окна просмотра должно интерпретироваться как «авто». Элемент, из которого распространяется значение, должен иметь использованное значение для «переполнения» «видимого».

+0

Спасибо! Вам неизвестен ресурс, в котором перечислены все особые случаи для '' и '' тегов? Я уже встречал пару, такую ​​как ширина и высота ', соответствующие видовому экрану. Было бы неплохо, если бы я мог найти более глубокое понимание, вместо того, чтобы сканировать через W3 или stackoverflow, когда я сталкиваюсь с ними. – user1164937

+0

Нет, не знаю. Я уверен, что это просто ширина/высота на html, и позиция, статическая на теле, кроме причуд переполнения. Я думаю, что у тела есть маржа по умолчанию, но это очевидно. Я не знаю никаких других случаев, когда значения по умолчанию переопределяются или обрабатываются по-разному, но я могу ошибаться. – Quantastical

+0

Вы можете начать [здесь] (https://www.w3.org/TR/WD-positioning-970131), где я начал с моего ответа. Также [здесь] (https://www.w3.org/TR/) для документации по всем стандартам W3C. Похоже, что в документацию DOM добавлены изменения еще в ноябре 2015 года, поэтому они должны быть надежными –

1

Пришлось изучить некоторые белые документы для этого. Элемент body является специальным элементом в DOM и имеет некоторые «псевдо-неизменные» свойства, которые я получу в ответе.

Во-первых, W3C position documentation баллов из следующих действий:

Элемент ТЕЛО определяет специальный неявный контейнер, обладающий следующими свойствами:

  • свою позицию, ширину, высоту и область отсечения определяются пользовательским агентом и не может быть изменен.
  • Он устанавливает координатную систему для дочерних элементов, с источником в логическом документе верхний левый угол.

Зная это, мы копаться в то, что по умолчанию для этих свойств для организма. position установлен в static, который в конечном итоге создает свои свойства height и width, унаследованные от родительского элемента html.

Я нашел эту документацию немного странно, что я мог бы изменить значение height на элемент тела и установить рамку вокруг него:

body { 
 
    border: 1px solid black; 
 
    background-color: #1db3e7; 
 
    height: 100px; 
 
    width: 30em; 
 
    margin: 0 auto; 
 
    border-top: none; 
 
    padding: 1em; 
 
}
<body> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis dolor eget risus ultrices mattis. Maecenas dolor est, malesuada ac efficitur sed, cursus quis nibh. Sed vulputate arcu molestie ipsum pharetra hendrerit vitae ac mauris. Duis quis purus quis elit varius convallis. Proin dictum nec purus eget accumsan. Suspendisse dignissim sollicitudin risus. Praesent nec quam in nisl dictum lobortis. Maecenas ultricies purus nec turpis egestas, ultrices elementum arcu pretium. Vestibulum id diam eu arcu placerat ultrices. Donec porta augue magna, eu tristique dui sodales in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. 
 

 
</body>

Однако, независимо от того, что position и overflow Я установил, текст всегда имеет возможность выйти за пределы этой границы. Это говорит о неизменности свойства position, но это заставило меня подвергнуть сомнению это утверждение для height.

Наконец, html элемент является то, что на самом деле делает скроллбар появляются, на основе ширины и высоты Зависимость от body «s на html элемента и его значение по умолчанию position. Первая запись для контроля прокрутки страницы будет находиться в первом дочернем элементе элемента body.

Смежные вопросы