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]
youtube.com/embed/QYJ5IcYOwS8″ frameborder=»0″ allowfullscreen=»allowfullscreen»/>
Оцени статью
Средняя оценка 0 / 5. Количество голосов: 0
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.
CSS — отображает: никто не загружает div?
JavaScript отключен. Для лучшего опыта, пожалуйста, включите JavaScript в вашем браузере, прежде чем продолжить.
- Статус
- Закрыто для дальнейших ответов.
- Добавить закладку
- #1
Display:none предотвращает загрузку div или просто скрывает его?
Моя проблема:
У меня есть страница, на которой отображается карта из API карт Google. Карта находится внутри div с идентификатором #mapDiv. В моей таблице стилей есть медиа-запрос, который устанавливает display:none для #mapDiv, если экран меньше определенного размера.
Несмотря на то, что карта аккуратная, она не совсем необходима, к тому же она будет занимать пропускную способность на мобильных устройствах, поэтому я не хочу, чтобы она там отображалась.
- Добавить закладку
- #2
Скрывает. Это не загрузка: нет
CSS интерпретируется браузером, а не сервером.
- Добавить закладку
- #3
Ага, все равно загружает. Интересно, что наличие img с display:none является достойным способом предварительной загрузки изображений.
- Добавить закладку
- #4
Пара замечаний:
1. Ответы на данный момент слишком общие и могут быть истолкованы как подразумевающие, что некоторые оптимизации не существуют, хотя на самом деле они есть. CSS «display: none» может предотвратить определенные типы доступа к определенным типам ресурсов, в первую очередь поисковым системам и программам чтения с экрана (доступ к дочерним узлам по причинам, выгодным их пользователям) и браузерам (в некоторых случаях к ресурсам изображений, чтобы уменьшить сетевой трафик).
2. Карты Google зависят от JavaScript. С таким же успехом вы можете использовать немного JavaScript для вставки карты, а не скрывать или показывать #mapDiv (который, предположительно, уже использует JavaScript).
- Добавить закладку
- #5
В конце концов, чтобы ответить на эти вопросы, вам придется провести некоторые тесты, посмотрев на вкладку «Сеть» в некоторых репрезентативных браузерах. Это единственный способ узнать наверняка.
- Добавить закладку
- #6
Использовать другой HTML для мобильных браузеров.
- Добавить закладку
- #7
display:none удаляет элемент из потока страницы; это означает, что он все еще находится в DOM для взаимодействия, но для него больше не зарезервировано место (в отличие от видимости: скрыто или непрозрачности: 0).
Хотя, как указал gnosis, лучшим решением может быть динамическая загрузка с помощью JS, если вы беспокоитесь о ресурсах на мобильном устройстве.
- Добавить закладку
- #8
Код:
display:none
все равно загрузит что-нибудь внутри элемента. Карты Google могут быть достаточно умны, чтобы определить, что элемент, в котором они отображаются, не виден, и решить не отображать, но некоторые разработчики могут скрывать контейнер при выполнении других задач и хотят, чтобы карта все еще отображалась.
Итак, повторяя другие ответы, трудно понять, если вы не посмотрите на вкладку сети.
- Статус
- Закрыто для дальнейших ответов.
Разница между NgIf и скрытым или отображаемым: нет В Angular
Основное различие между директивой angular ngIf и скрытым или отображаемым: нет: ngIf добавит или удалит элемент из DOM на основе условия или выражения. скрытый
атрибут в html5 и не отображать. CSS будет отображать или скрывать элемент HTML.
Мы рассмотрим примеры, чтобы лучше понять их.
Содержание
ngIf в Angular
Посмотрите на простой пример ngIf
Это будет добавлено в DOM с помощью ngIfЭто будет удалено из DOM с помощью ngIf Это будет добавлено в DOM с помощью ngIf Это будет удалено из DOM с помощью ngIf
Как объяснялось в статье ngIf else, angular преобразует элемент ngIf
в элемент
. См. сгенерированный HTML DOM.
ngIf vs Hidden
А второй div вообще не добавил DOM. Angular преобразует
в комментарий, который дает нам информацию об оцененном ngIf
условии true
или false
.
Теперь мы увидим пример со скрытым атрибутом в html5 и не отображаем CSS.
Этот абзац виден.
Этот абзац скрыт, но все еще находится в DOM.
Этот абзац скрыт, но все еще находится в DOM.
И сгенерированный HTML-код:
Независимо от отображения, скрыть или показать элемент абзаца будет добавлен в DOM.
Почему директива ngIf удаляет элемент, а не скрывает его?
Скрытие и отображение элемента после рендеринга допустимо, если абзац или элемент div очень маленький и с простым взаимодействием.
Но с помощью Angular мы можем создавать многофункциональные приложения, некоторые компоненты могут использовать слишком много ресурсов. И хотя компонент скрыт, он будет прикреплен к своему элементу DOM. Он будет продолжать прослушивать события. Angular продолжает проверять изменения, связанные с привязками данных. Поведение компонента по-прежнему существует, даже если оно скрыто.
Компонент и его дочерние компоненты будут связанными ресурсами. Нагрузка на память может быть высокой, что приводит к снижению производительности, может ухудшиться время отклика, а пользователь не знает, почему приложение работает медленно.
Так что лучше добавлять или удалять элементы в элементе компонента в HTML DOM, а не скрывать или показывать их.
Но, как я уже говорил ранее, если компонент простой, лучше скрыть или показать его, потому что операция повторной инициализации компонента может быть дорогостоящей.
NGIF против скрытого или отображения нет в Angular
NGIF | HIDDUTE или DISE |
---|---|
Структурная направления Angular | |
Angular. |