Ключевой трюк при работе с HTML-элементами заключается в понимании того, что в том, как большинство из них работают, нет ничего особенного. Большинство страниц могут быть составлены всего из нескольких тегов, которые могут быть оформлены любым выбранным вами способом.
Визуальное представление большинства HTML-элементов браузером по умолчанию состоит из различных стилей шрифта, полей, отступов и, по сути, из типов отображения.
Наиболее фундаментальными типами отображения являются inline (встроенные), block (блочные) и none, и ими можно манипулировать с помощью свойства display и шокирующе неожиданных значений inline, block и none.
inline
inline делает именно то, что написано — поля, которые отображаются в строке и следуют за ходом строки. Anchor (links) и emphasis являются примерами элементов, которые отображаются в строке по умолчанию.
Встроенные поля
Следующий код, например, приведёт к тому, что все элементы списка в списке будут отображаться рядом друг с другом в одной непрерывной строке, а не каждый в отдельной строке:
li { display: inline }block
block делает блок автономным, занимая всю ширину содержащего его блока, с эффективным переносом строки до и после него. В отличие от inline блоков, block блоки позволяют больше манипулировать высотой, полями и заполнением. Элементы заголовка и абзаца являются примерами элементов, которые отображаются таким образом по умолчанию в браузерах.
Блокировать поля.
В следующем примере все ссылки в “навигаторе” будут сделаны большими интерактивными блоками:
#navigation a {
display: block;
padding: 20px 10px;
}display: inline-block сохранит поле встроенным, но придаст большую гибкость форматированию блоков block, например, разрешив отступы справа и слева от поля.
none
none вообще не отображает окно, что может показаться довольно бесполезным, но может быть использовано с хорошим эффектом с помощью динамических эффектов, таких как включение и выключение расширенной информации при нажатии на ссылку или в альтернативных таблицах стилей.
Следующий код, например, можно использовать в таблице стилей печати, чтобы в основном “отключить” отображение таких элементов, как навигация, которые были бы бесполезны в этой ситуации:
#navigation, #related_links { display: none }display: none и visibility: hidden отличаются тем, что display: none полностью выводят поле элемента из игры, в то время как visibility: hidden сохраняют поле и его поток на месте без визуального представления его содержимого. Например, если бы второму абзацу из 3 было присвоено значение display: none, первый абзац переходил бы прямо в третий, тогда как если бы ему было присвоено значение visibility: hidden, там, где должен быть абзац, был бы пробел.
Таблицы
Возможно, лучший способ понять связанные с таблицей значения свойств ─ подумать о таблицах HTML. table это начальное отображение, и вы можете имитировать элементы tr и td со значениями свойств table-row и table-cell соответственно.
Свойство display идёт дальше, предлагая table-column, table-row-group, table-column-group table-header-group table-footer-group и table-caption в качестве значений, которые все достаточно самоописательны. Очевидное преимущество этих значений заключается в том, что вы можете создавать таблицу по столбцам, а не по методу со смещением строк, используемому в HTML.
Наконец, значение inline-table в основном задаёт таблицу без разрывов строк до и после неё.
Будьте осторожны при использовании этих значений. Старые браузеры сталкиваются с ними, и увлечение таблицами CSS может серьёзно повредить вашему доступу. HTML следует использовать для передачи смысла, поэтому, если у вас есть табличные данные, они должны быть организованы в HTML-таблицы. Использование исключительно CSS-таблиц может привести к нагромождению данных, которые совершенно нечитаемы без CSS.
Другие типы отображения
list-item отображает окно так, как вы обычно ожидаете, что будет отображаться HTML-элемент li. Для правильной работы элементы, отображаемые таким образом, должны быть вложены в элемент ul или ol.
run-in создаёт поле либо в виде строки, либо в виде блока в зависимости от отображения его родительского элемента.
Страницы в тему:
- Следующая страница: Псевдоэлементы
- Предыдущая страница: Специфичность
- Span и Div (Продвинутый урок HTML): базовые элементы bog-стандарта обычно отображаются в виде строк и блоков.
- Свойство CSS: display
- Свойство CSS: visibility
Примеры CSS:
