Div display none: Все значения свойства display

CSS свойство 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, чтобы сделать дизайн лучше.

h2 {
	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 для псевдоэлемента.

[ads-pc-1]
[ads-mob-1]