Свойство Display — основные значения

Теория

Самый большой трюк в обработке HTML-элементов – это понимание того, что нет ничего особенного в том, как большинство из них работают. В большинстве случаев страницы могут быть созданы с помощью нескольких тегов, к которым применен стиль в соответствии с личными предпочтениями.

Стандартное представление браузером большинства HTML-элементов включает стили шрифта, отступы, поля и, главным образом, типы отображения (display).

Главными типами отображения являются inline (встроенный), none (не показывать) и block-line (блок). Вы можете применять их, используя значения свойства display: inline, block и none.

inline действует так, как подсказывает его имя. Элементы, представленные с помощью inline всегда следуют потоку линии. Элементы strong (жирное начертание), emphasis (курсив) и anchor (якорь) обычно представлены инлайном на большинстве страниц.

block помещает разрыв строки над и под элементом. Элементы абзац и заголовок обычно отображаются в стиле block-line.

none просто не отображает элемент. И хотя это может показаться бессмысленным, вы можете достичь с его помощью великолепных эффектов, хотя возможны и сложности с доступностью.

Изначальная таблица стилей для моего сайта, например, использовала несколько элементов, которые традиционно применяются in-line и block-line, чтобы сделать дизайн лучше.

h1 {
	display: inline;
	font-size: 2em;
}

#header p {
	display: inline;
	font-size: 0.9em;
	padding-left: 2em;
}

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

#navigation, #seeAlso, #comments, #standards {
	display: none;
}

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

display: none и visibility: hidden различаются в том, что display: none стирает элемент полностью со страницы, в то время, как visibility: hidden содержит элемент и его поток нетронутыми в визуальном представлении.

Например, если для второго из трех абзацев установить 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 говорит сам за себя. Работает практически идентично элементу li в HTML. Для корректного отображения, элементы должны быть вложены внутри элементов ul или ol.

run-in показывает элемент в строке или блоке. Это зависит от того, как показывается родительский элемент. Помните, что этот функционал недоступен в IE и браузерах на основе Mozilla.

compact также показывает элемент встроенным в линию или блок в зависимости от контекста. Он также не очень полезен…

marker используется только вместе с псевдоэлементами :before и :after, чтобы описать отображение значения свойства content. По умолчанию свойство content уже отображается как marker. Поэтому marker полезен тогда, когда вы пытаетесь переписать предыдущее свойство display для псевдоэлемента.

Фото



Видео




Автор Cascading Style Sheets