Свойство отображения CSS
❮ Предыдущий Полное руководство по CSS Далее ❯
Пример
Использование различных отображаемых значений:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство display
определяет поведение дисплея
(тип поля рендеринга) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей браузера/пользователя по умолчанию. значение по умолчанию в XML — встроенное, включая элементы SVG.
Показать демо ❯
Значение по умолчанию: | ? |
---|---|
По наследству: | нет |
Анимация: | нет. Читать о анимированном |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .![]() |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Собственность | |||||
---|---|---|---|---|---|
дисплей | 4,0 | 8,0 | 3,0 | 3.1 | 7,0 |
Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.
Примечание. «отображение: содержимое» не работает в Edge предыдущая версия 79.
Синтаксис CSS
display: value ;
Значения свойств
Значение | Описание | Играй | ||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
встроенный | Отображает элемент как встроенный элемент (например, ).![]() | Демонстрация ❯ | ||||||||||||||||||||||||||||||||||
блок | Отображает элемент как элемент блока (например, ). Он начинается на новая строка и занимает всю ширину | Демонстрация ❯ | ||||||||||||||||||||||||||||||||||
содержимое | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент следующего уровня в DOM | |||||||||||||||||||||||||||||||||||
гибкий | Отображает элемент как гибкий контейнер на уровне блока | |||||||||||||||||||||||||||||||||||
сетка | Отображает элемент как контейнер сетки на уровне блоков | |||||||||||||||||||||||||||||||||||
встроенный блок | Отображает элемент как блочный контейнер встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | |||||||||||||||||||||||||||||||||||
встроенный гибкий | Отображает элемент как гибкий контейнер встроенного уровня | |||||||||||||||||||||||||||||||||||
встроенная сетка | Отображает элемент как контейнер сетки встроенного уровня | |||||||||||||||||||||||||||||||||||
встроенный стол | Элемент отображается как таблица встроенного уровня | |||||||||||||||||||||||||||||||||||
элемент списка | Пусть элемент ведет себя как элемент | Демонстрация ❯ | ||||||||||||||||||||||||||||||||||
обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | |||||||||||||||||||||||||||||||||||
стол | Позволяет элементу вести себя как элемент
Дополнительные примерыПримерДемонстрация использования значения свойства содержимого. В следующих Например, контейнер .a исчезнет, и создание дочерних элементов (.b) дочерние элементы элемента следующего уровня в DOM: .a { .b { Попробуйте сами » ПримерДемонстрация использования наследуемого значения свойства: body { p { Попробуйте сами » ПримерУстановите направление некоторых гибких элементов внутри элемента в обратном направлении
порядок: div { Попробуйте сами » Связанные страницыУчебное пособие по CSS: Отображение CSS и видимость Ссылка HTML DOM: свойство отображения ❮ Назад Полное руководство по CSS Следующий ❯ ВЫБОР ЦВЕТАЛучшие учебникиУчебное пособие по HTMLУчебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебник по W3. ![]() Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery Лучшие ссылкиHTML ReferenceCSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Top7 Examples
Примеры HTML W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Copyright 1999-2022 Refsnes Data. Все права защищены. ничего важного, jquery style», display», block,jquery display», blockЕсли отображение div по умолчанию является блочным, вы можете просто использовать .show () и .hide () , или еще проще, .toggle() для переключения между видимостью. Портал информатики для гиков. Он содержит хорошо написанные, хорошо продуманные и хорошо объясненные статьи по информатике и программированию, викторины и практические/соревновательные вопросы по программированию/интервью компании. Необязательный параметр скорости указывает скорость скрытия/отображения и может принимать следующие значения: «медленно», «быстро» или миллисекунды. Необязательный параметр обратного вызова — это функция, которая должна быть выполнена после завершения метода hide() или show() (вы узнаете больше о функциях обратного вызова в следующей главе). Определение и использование Свойство display задает или возвращает тип отображения элемента. Элементы в HTML в основном являются «встроенными» или «блочными» элементами: встроенный элемент имеет плавающее содержимое слева и справа. Блочный элемент заполняет всю строку, и ничего не может отображаться слева или справа от него. Свойство display определяет поведение отображения (тип поля визуализации) элемента. В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей браузера/пользователя по умолчанию. Значение по умолчанию в XML — встроенное, включая элементы SVG. Как мы можем понять из названия, объявление display: inline-block показывает как характеристики встроенных, так и блочных элементов. отображение jquery css: ничего важного Хорошо, вы поняли. Легко, когда вы полностью контролируете имена классов и все, что вы делаете, это применяете и удаляете их. Но все становится немного сложнее с библиотеками JS, которые применяют собственный CSS. Как сказано в документации jQuery — .show () Примечание. При использовании !important в ваших стилях, таких как display: none !important, необходимо переопределить стиль с помощью .css (‘display’, ‘block ! Important’), если вы хотите, чтобы .show() работал правильно. Но кажется, что стиль не может быть переопределен, и элемент не может быть показан. Начиная с jQuery 1.8, установщик .css() автоматически позаботится о префиксе имени свойства. Например, возьмите .css(«user-select», «none» ) в Chrome/Safari, установив его как -webkit-user-select , Firefox будет использовать -moz-user-select , а IE10 будет использовать -ms-user -Выбрать . Это примерно эквивалентно call.css («display», «none»), за исключением того, что значение свойства display сохраняется в кэше данных jQuery, так что впоследствии display может быть восстановлен до исходного значения. Свойство display определяет, будет ли отображаться элемент. Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа элемента. Значение отображения по умолчанию для большинства элементов — блочное или встроенное. Нажмите, чтобы показать панель. Эта панель содержит элемент , который по умолчанию скрыт ( display: none ). Примечание. Если вы используете !important в своих стилях, таких как display: none !important, необходимо переопределить стиль с помощью .css(«display», «block !important»), если вы хотите, чтобы .show() функционировать правильно. jquery style», display», block Отображение совпадающих элементов и примерно эквивалентно вызову .css(«display», «block») Вы можете отобразить элемент, используя .show() вместо $(«div» ).show() .attr() Установите один или несколько атрибутов для набора соответствующих элементов. |