display | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
Значение | Описание | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | |||||||||||
inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | |||||||||||
inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | |||||||||||
inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. | |||||||||||
list-item | Элемент выводится как блочный и добавляется маркер списка. | |||||||||||
none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. | |||||||||||
run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. | |||||||||||
table | Определяет, что элемент является блочной таблицей подобно использованию тега <table>. | |||||||||||
table-caption | Задает заголовок таблицы подобно применению тега <caption>. | |||||||||||
table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). | |||||||||||
table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <col>. | |||||||||||
table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>. | |||||||||||
table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>. | |||||||||||
table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>. | |||||||||||
table-row | Элемент отображается как строка таблицы (тег <tr>). | |||||||||||
table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>. |
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display</title> <style> .example { border: dashed 1px #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Шрифт текста */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы вокруг */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Устанавливаем как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер текста */ margin: 0; /* Убираем отступы вокруг */ white-space: nowrap; /* Отменяем переносы текста */ } </style> </head> <body> <p>Пример</p> <p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById(«elementID»).style.display
Браузеры
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для тега <col>;
- значение table-column-group поддерживается только для тега <colgroup>.
Chrome 2.0, а также Safari версии 3 и старше, iOS:
- значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
DISPLAY — Перевод на русский
EnglishThis is actually only about 1.5 percent of what the final display will be in May.
Это только около 1.5 процентов того окончательного варианта модели, которая выйдет в мае.EnglishThe template will display on your blog or website just as it does on the templates gallery.
Шаблон будет отображаться в блоге или на веб-сайте так же, как и галерее шаблонов. EnglishWell this is what it’s all about, this kind of dynamic display of audacity and ingenuity. Вот это да! Отличная демонстрация смелости и изобретательности в динамике.EnglishYour text, image, and video ads can appear on the Google Display Network.
В контекстно-медийной сети Google используются текстовые, графические и видеообъявления.EnglishOn the Display Network, you can target your ads very effectively.
Для контекстно-медийной сети можно задать довольно точные настройки таргетинга.EnglishYou can display a label on a location by using parentheses in your search terms.
Используя круглые скобки при вводе поискового запроса, можно установить ярлык в указанной точке. EnglishOkay, so this next one is from the webcam, and it’s going to be this pinwheel display. Хорошо, следующие кадры с веб-камеры, и это будет вращающийся сигнал.EnglishSomeone with access to your doc changed their email display name.
Один из приглашенных пользователей изменил отображаемое имя электронной почты.EnglishAt any time,click to hide the overview map or click to display it again.
В любой момент можно нажать кнопку , чтобы скрыть эту карту, или , чтобы вернуть ее на экран.EnglishDisplay AdsAd Formatting › Examples of Ad Formats
Медийные объявленияФорматы объявлений › Примеры форматов объявленийEnglishYou may want to consider other measurements like conversions for Display Network ads.
В контекстно-медийной сети можно отслеживать конверсии и другие показатели эффективности рекламы.EnglishGoogle Mail has two primary display modes, depending on what type of browser1 you use to access it.
Google Mail поддерживает два основных режима отображения в зависимости от браузера.Englishto display publicly and distribute copies of derivative works of the Gallery Submission.
публичный показ и распространение копий производных от них работ.EnglishGoogle has two networks where your ads can run: the Search Network and the Display Network.
Объявления из кампаний AdWords можно размещать в поисковой и контекстно-медийной сетях Google.EnglishSo it’s pointing away from the display, rather than pointing at the display.
Так что он, скорее указывает от экрана, нежели чем в него.EnglishYour ads can also appear on mobile apps, which are considered part of our Display Network.
В контекстно-медийную сеть также входят мобильные приложения, где разрешен показ рекламы AdWords.EnglishFind more information on where ads might appear on the Display Network.
Подробнее о местах размещения в контекстно-медийной сети…EnglishOn the right panel, click Display Google Chrome in this language.
На панели справа нажмите Отображать Google Chrome на этом языке.перевод, произношение, транскрипция, примеры использования
Игрушки были выставлены в витрине магазина.
Новичок продемонстрировал мастерскую игру.
На нашем веб-сайте мы демонстрируем товары, которые мы выставляем на продажу в наших магазинах.
На этой научной ярмарке студенты продемонстрировали свои проекты.
Была выставлена самая разнообразная керамика.
He treated the guests to a fireworks display.
Он устроил для гостей фейерверк.
She displayed no emotion on the witness stand.
Она проявила никаких эмоций, выступая в суде в качестве свидетеля.
The store dressed its display windows for the Christmas season.
Магазин разукрасил витрину к рождественским праздникам.
They peeled back the sheet to display the new sculpture.
Они сорвали простыню, чтобы показать новую скульптуру.
Their artwork is on display at the museum.
Их работы демонстрируются в данном музее.
I pressed ‘return’ and an error message was displayed.
Я нажал кнопку «назад», и на экране появилось сообщение об ошибке.
All the exam results will be displayed on the noticeboard.
Все результаты экзаменов будут вывешены на доске объявлений.
Her trophies are in a display case.
Ее трофеи находятся под стеклом на витрине.
We have display stands in many bookstores.
У нас есть стенды во многих книжных магазинах.
Art was employed for the display of religious facts.
Искусство использовалось для изображения фактов божественной истории.
If the merchandise you are selling comes in pairs, display one only.
Если продаваемый вами товар представляет собой пару, выставляйте только один предмет.
Different flowers can be grouped together to make a colourful display.
Различные цветы можно собрать вместе, чтобы составить красочную витрину.
Hosiery is displayed on shelfs in a great variety of styles and colors.
Чулочные изделия выставлены на полках в большом ассортименте стилей и цветов.
Her performance in the Olympics was an unexampled display of athletic prowess.
Её выступление на Олимпийских играх стало беспримерным проявлением спортивной доблести.
This time the display flashed a red warning signal.
В этот раз на дисплее вспыхнул красный предупреждающий сигнал.
The museum featured a display of wondrous tapestries.
В музее были представлены удивительные гобелены.
The museum has put its latest acquisitions on display.
Музей продемонстрировал свои последние приобретения.
The festivities started with a huge fireworks display.
Торжества начались с огромного фейерверка.
The course places emphasis on presentation and display.
В курсе делается акцент на способах подачи и демонстрации материала.
The museum displays relics found during the excavation of the site.
В музее представлены реликвии, найденные во время раскопок данного участка.
Hosiery is displayed on shelfs in a great variety of styles and colours.
Чулочные изделия выставлены на полках в большом ассортименте стилей и цветов.
National leaders will have to display the highest skills of statesmanship.
Руководству страны придётся продемонстрировать высочайшее искусство управления государством.
The window display caught her eye.
Витрина попалась ей на глаза.
DISPLAY ON CHEP PALLET WON 3rd PLACE AT POPAI RUSSIA AWARDS
Препаки – готовые к выкладке дисплеи с продукцией – приобретают все большую популярность на российском рынке POSM-материалов. Об этом говорит количество проектов, представленных на суд жюри конкурса POPAI Awards 2020 в номинации, которая впервые была представлена всего 3 года назад.
В международном конкурсе POPAI RUSSIA AWARDS 2020 в номинации «Препаки» приняли участие 5 препаков. В этом году сразу 3 препака были выполнены на пластиковых четверть-паллетах CHEP. Все это – реальные проекты. Например, промо дисплей компании Reckitt Benckiser совсем недавно можно было увидеть в розничных магазинах сети «Дикси».
Препак компании StraussCoffee был представлен на четверть-паллете на колесиках. Это инновационное решение от компании CHEP позволяет:
- оперативно обеспечить наличие продукции в торговом зале;
- отказаться от использования погрузочной техники благодаря маневренности паллеты;
- выгодно представить товар, повысить заметность бренда в магазине и оптимизировать неэффективно используемое полочное пространство.
По итогам голосования жюри, состоящего из экспертов крупнейших производственных FMCG-компаний, было отобрано 3 номинанта – препаки «Тедди» и Excellence, созданные компанией Virtu, представляющие бренд Lindt и препак StraussCoffee — на пластиковой-четверть паллете CHEP бренда Strauss Group.
1-е и 2-е место заняли препаки Virtu.
3-е место – компании CHEP и Strauss Group.
Андрей Писарцов, генеральный директор CHEP в России отметил: «Впервые в России препак на четверть паллете CHEP вошел в тройку призеров конкурса! Мы поздравляем победителей и желаем успехов в работе с таким инструментом как препак, творческих идей и высоких продаж!».
О востребованности такого инструмента как препаки свидетельствуют и данные исследований. В 2019 году опрошенные INFOLine поставщики ожидали, что сегмент препаков будет расти более динамично, чем краткосрочные и долгосрочные POSM-материалы. А заказчики ожидали наибольшего роста в зоне напольных стоек и дисплеев – эффективного инструмента расширения полочного пространства.
Это неудивительно, поскольку у препаков есть ряд неоспоримых преимуществ:
- Препаки повышают эффективность работы персонала: дисплей с продукцией, установленную на паллету, достаточно вывезти в торговый зал, поставить в нужное место и открыть. Это ускоряет выкладку и снижает вероятность порчи товара при перекладывании вручную. В условиях пандемии это также позволяет минимизировать контакт персонала с продукцией.
- Используя препаки, можно быстро и качественно оформить товарную категорию в зале. Снижаются расходы на услуги мерчандайзеров.
- Красивые дисплеи выделяют товар на фоне остальных витрин, притягивают внимание покупателей, повышают продажи и кросс продажи.
- Препак, установленный на полу- или четверть-паллету, легко перемещается в торговом зале для смены выкладки или проведения промоакций.
Особенности употребления глаголов show, demonstrate, display, exhibit, reveal
Глаголы to show, to demonstrate, to display, to exhibit, to reveal в переводе на русский язык имеют значение «показывать, демонстрировать». Эти глаголы различаются по дополнительной характеристике выражаемого ими понятия. Стилистически нейтральны.
Глагол to show — «показывать» — имеет наиболее обобщённое значение и может заменять все члены данного синонимического ряда. Он употребляется с беспредложным дополнением:
to show a new camera
показать новый фотоаппарат
to show one’s love
показать свою любовь
Will you show me the shortest way to the station, please?
Покажите мне, пожалуйста, самый короткий путь на вокзал.
Paul never shows what he thinks.
Пётр никогда не показывает, о чём он думает.
Глагол to demonstrate — «показывать, демонстрировать» — употребляется в следующих контекстах:
- относится к чувствам и указывает на внешнее проявление внутреннего состояния:
The boy demonstrated his love for the puppy by taking good care of it.
Мальчик проявлял (показывал) свою любовь к щенку тем, что хорошо за ним ухаживал.
- объяснять что-либо при помощи примеров или экспериментов:
The salesperson demonstrated to me how to use the video camera.
Продавец показал мне, как пользоваться видео камерой.
- принимать участие в публичных выступлениях:
The workers marched through the streets with flags and posters demonstrating their solidarity.
Рабочие маршировали по улицам с флагами и транспарантами, демонстрируя свою солидарность.
At the meeting the people demonstrated their approval by loud cries.
На собрании люди демонстрировали своё одобрение громкими криками.
Глагол to display — «показывать» — имеет также оттенок значения «выставлять напоказ, пpоявлять чувства»:
to display one’s intelligence
показать (проявить) свой ум
to display one’s generosity
проявить (показать) свою щедрость
Ben displayed his stamp collection to the whole class to see.
Бен показал свою коллекцию марок всему классу.
The soldiers displayed no fear under the enemy’s fire.
Солдаты не проявили страха перед вражеским огнём.
Глагол to exhibit — «показывать, выставлять, экспонировать» имеет дополнительный оттенок значения «показывать с целью привлечения внимания»:
George wondered why I didn’t want to exhibit my paintings.
Джордж поинтересовался, почему я не хочу выставлять свои картины.
The aim of an art gallery is to exhibit its paintings for the people at large.
Цель художественной галереи выставлять свои картины для широкой публики.
Глагол to reveal — «показывать, обнаруживать то, что было скрыто или ранее неизвестно»:
Robert took off his shirt and revealed awful scars on his back and shoulders.
Роберт снял свою рубашку и показал ужасные шрамы на спине и плечах.
The girl made me swear never to reveal their hiding place.
Девушка заставила меня поклясться, что я никогда не покажу их укрытие.
Для тренировки навыков употреблениия рассмотренных глаголов предлагаем пройти тест на нашем сайте: Show, demonstrate, display, exhibit, reveal.
разница между отображением и отображением
Можно сказать, что картина выставлена в музее или выставлена в музее . Разница в том, что на дисплее описывает общее действие , при котором изображение отображается, а на дисплее говорит, что это часть события . Здесь используется фундаментальное различие между предлогами в и в .
На может использоваться для выражения состояния.Когда мы следуем за субъектом с на + существительное , это говорит нам о состоянии субъекта. Есть ряд типичных существительных, которые мы можем поместить на , прежде чем продемонстрировать состояния, такие как display, trial, show, edge .
- Он на грани. (нервничает)
- Ее спина была выставлена напоказ. (видимый)
Часто на + существительном можно было заменить на прилагательное состояния для аналогичного значения:
- Он резкий.
- Ее спина была видна.
Состояние on + существительное обычно подчеркивает, что состояние является временным. Поэтому часто более уместно заменить его на непрерывное время:
- Картина находится в экспозиции. превратится в Картина отображается.
В используется, чтобы сообщить нам , где — существительное — в пределах местоположения. Таким образом, в то время как на + существительном определяет состояние, на + существительном определяет позицию.
- Он находится в комнате. (в пределах комнаты)
Когда мы используем in, мы обращаемся к определенному объекту или местоположению, поэтому следующее существительное требует определителя (в то время как на + существительном является общим состоянием и не имеет).
Основная путаница здесь возникает, когда существительные, используемые для формирования состояния с на , также могут использоваться для определения местоположения или события. Приведенные выше примеры: дисплей , шоу, испытание — все они могут использоваться для описания места или события, а также состояния:
- Вор находится под следствием.(в стадии уголовного преследования)
- Вор находится на суде. (в судебном заседании)
- Автомобиль выставлялся. (отображается)
- Автомобиль был на выставке. (в рамках мероприятия)
Значения перекрываются, поэтому состояние часто очень похоже на местоположение, поэтому выбор между ними не является большой проблемой. Однако при выборе между + существительное и + существительным возникает вопрос: хотите ли вы описать общее состояние или конкретное место / случай.В противном случае просто не забудьте использовать определитель с , а не с !
Получите лучшее изображение на своем мониторе
Если вы используете более одного монитора, вы можете идентифицировать подключенные мониторы, обнаружить другой монитор, изменить ориентацию экрана, выбрать, что будет отображаться на каждом мониторе, и выбрать, какой из них является основным дисплеем.
Определите свои мониторы
Проведите пальцем от правого края экрана, нажмите Настройки , а затем нажмите Изменить настройки ПК .
(Если вы используете мышь, наведите указатель на правый нижний угол экрана, переместите указатель мыши вверх, щелкните Settings , а затем щелкните Change PC settings .)Коснитесь или щелкните ПК и устройства , затем коснитесь или щелкните Дисплей .
Коснитесь или щелкните Идентифицировать .
Обнаружить другой монитор
Если к вашему ПК подключен другой монитор, но Windows не обнаружила его автоматически, вы можете определить его вручную в настройках ПК.
Проведите пальцем от правого края экрана, нажмите Настройки , а затем нажмите Изменить настройки ПК .
(Если вы используете мышь, наведите указатель на правый нижний угол экрана, переместите указатель мыши вверх, щелкните Settings , а затем щелкните Change PC settings .)Коснитесь или щелкните ПК и устройства , затем коснитесь или щелкните Дисплей .
Коснитесь или щелкните Обнаружить .
Изменить ориентацию экрана
Проведите пальцем от правого края экрана, нажмите Настройки , а затем нажмите Изменить настройки ПК .
(Если вы используете мышь, наведите указатель на правый нижний угол экрана, переместите указатель мыши вверх, щелкните Settings , а затем щелкните Change PC settings .)Коснитесь или щелкните ПК и устройства , затем коснитесь или щелкните Дисплей .
В списке Ориентация выберите ориентацию экрана, которую вы хотите использовать.
Выберите, что будет отображаться на каждом мониторе
Проведите пальцем от правого края экрана, нажмите Настройки , а затем нажмите Изменить настройки ПК .
(Если вы используете мышь, наведите указатель на правый нижний угол экрана, переместите указатель мыши вверх, щелкните Settings , а затем щелкните Change PC settings .)Коснитесь или щелкните ПК и устройства , затем коснитесь или щелкните Дисплей .
В списке Несколько мониторов выберите один из следующих:
Расширить .Вы увидите один непрерывный дисплей, который растягивается на все ваши мониторы.
Дубликат . Вы увидите одинаковый дисплей на каждом из ваших мониторов.
Показывать только на 1 . Вы увидите изображение только на своем первом мониторе.
Показывать только на 2 .Вы будете видеть только изображение на своем втором мониторе.
Выберите основной дисплей
Проведите пальцем от правого края экрана, нажмите Настройки , а затем нажмите Изменить настройки ПК .
(Если вы используете мышь, наведите указатель на правый нижний угол экрана, переместите указатель мыши вверх, щелкните Settings , а затем щелкните Change PC settings .)Коснитесь или щелкните ПК и устройства , затем коснитесь или щелкните Дисплей .
На изображении предварительного просмотра коснитесь или щелкните монитор, который вы хотите использовать в качестве основного дисплея, чтобы выбрать его.
Установите флажок Сделать это моим основным дисплеем .
Совет: Вы можете использовать четыре угла любого монитора, чтобы открыть начальный экран, чудо-кнопки и недавние приложения.
У вас может быть начальный экран и приложения из Магазина Windows только на одном мониторе одновременно. Когда вы открываете начальный экран, чудо-кнопки или недавние приложения на другом мониторе, приложения из Магазина Windows также перемещаются на этот монитор.
Luna | Превратите ваш Mac или iPad во второй дисплей
Luna Display | Превратите свой Mac или iPad во второй дисплей перейти к содержанию ЗакрыватьПревратите ваш iPad в беспроводной второй дисплей.Доступно сегодня для Mac (129,99 долларов США) или по предварительному заказу для Windows.
Купить сейчас
Режим Mac-iPad
Простое расширение рабочего стола с Mac на iPad.Благодаря полной поддержке сенсорного ввода и жестов теперь вы можете превратить свой iPad в Mac с сенсорным экраном.
Режим Mac-Mac
Используйте любой Mac в качестве второго дисплея — идеально подходит для тех, у кого несколько компьютеров Mac.Он также работает на старых моделях Mac.
Безголовый режим
Ищете мощный Mac mini для путешествий? Безголовый режим позволяет использовать Mac или iPad в качестве основного дисплея Mac mini и Mac Pro.
настраивается за секунды
Просто подключите Luna, запустите приложения, и ваши устройства подключатся автоматически! Luna доступна для USB-C или Mini DisplayPort.
подключается через Wi-Fi или USB
Возможности подключенияLuna достигаются даже в вашей сети Wi-Fi.А если Wi-Fi недоступен, Luna также подключается через USB.
полная поддержка сенсорного ввода для iPad
Luna превращает ваш iPad в полноценное дополнение к вашему Mac — с полной поддержкой внешних клавиатур, Apple Pencil и сенсорного взаимодействия.
То, что удалось Astro, примечательно
Luna изменит ваш рабочий процесс путешествий
Впервые нас впечатлило беспроводное решение
Luna — это откровенно потрясающая визуальная точность.
Luna невероятно впечатляет
Использование iPad в качестве сенсорного экрана Mac
Доступно сегодня для Mac и по предварительному заказу для Windows.Бесплатная доставка по США
Luna полностью интегрируется с Astropad — нашей отмеченной наградами программой для рисования, которая превращает iPad в профессиональный графический планшет для Mac.
Astropad предлагает абсолютную настройку рабочего процесса, предлагая упакованный набор инструментов для творчества, таких как неограниченное количество ярлыков рабочего процесса, волшебные жесты и настраиваемые кривые давления.
Совместное использование Luna с Astropad дает профессиональным творческим людям свободу и гибкость, которых заслуживает их рабочий процесс.
Узнать больше
Luna дает вам возможность работать где угодно и как угодно. Независимо от того, расширяете ли вы Mac или iPad до второго дисплея или делаете iPad основным дисплеем Mac mini, выбор за вами.Создайте свою идеальную установку с Luna Display.
Купить сейчас
CSS свойство отображения
Пример
Использование различных отображаемых значений:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Отображение Свойство
определяет поведение отображения
(тип окна рендеринга) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В значение по умолчанию в XML является встроенным, включая элементы SVG.
Значение по умолчанию: | ? |
---|---|
Унаследовано: | № |
Анимация: | нет.Прочитать о animatable |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .style.display = «none» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Имущество | |||||
---|---|---|---|---|---|
дисплей | 4.0 | 8,0 | 3,0 | 3,1 | 7,0 |
Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.
Примечание: «display: contents» не работает в Edge предыдущая версия 79.
Синтаксис CSS
Значения свойств
Значение | Описание | Играй | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
рядный | Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
блок | Отображает элемент как блочный элемент (например, ). Это начинается на новая строка и занимает всю ширину | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
содержание | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
гибкий | Отображает элемент как гибкий контейнер на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
сетка | Отображает элемент как контейнер сетки уровня блока | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
рядный блок | Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
линейный гибкий | Отображает элемент как гибкий контейнер встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
линейная сетка | Отображает элемент как контейнер сетки встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
встроенный стол | Элемент отображается как таблица встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
элемент списка | Разрешить элементу вести себя как элемент | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | Играй » | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
стол | Пусть элемент ведет себя как элемент
Другие примерыПримерДемонстрация того, как использовать значение свойства contents. В следующих Например, контейнер .a исчезнет, а дочерние элементы (.b) дочерние элементы элемента на следующий уровень в DOM: .дисплей {: содержание; граница: 2px сплошной красный; цвет фона: #ccc; отступ: 10 пикселей; ширина: 200 пикселей; } .b { ПримерДемонстрация того, как использовать значение наследуемого свойства: корпус {дисплей: встроенный; } p { ПримерУстановить направление некоторых гибких элементов внутри элемента в обратном направлении.
заказ: div { связанные страницыУчебникCSS: Отображение CSS и видимость Ссылка наHTML DOM: свойство отображения Показать свойство · BootstrapБыстро и быстро переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения.Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати. Как это работает Измените значение свойства Обозначение Показать служебные классы, которые применяются ко всем точкам останова, от Таким образом, классы именуются в формате:
Где значение является одним из:
Медиа-запросы влияют на ширину экрана с заданной точкой останова или больше .Например, Примеры d-блок d-блок Скрывающие элементыДля более быстрой разработки, удобной для мобильных устройств, используйте классы адаптивного отображения для отображения и скрытия элементов на разных устройствах.Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элемент в зависимости от размера экрана. Чтобы скрыть элементы, просто используйте класс Чтобы отображать элемент только в заданном интервале размеров экрана, вы можете объединить один класс
скрыть на экранах шире, чем LG скрыть на экранах меньше LG Показать в печати Измените значение элементов
Классы печати и отображения можно комбинировать. Только экран (Скрывать только при печати) Только печать (Скрыть только на экране) Скрыть до большого размера на экране, но всегда показывать на печати Отображение ноутбука на дополнительном дисплее (проекторе или телевизоре)После того, как вы подключили портативный компьютер с помощью соответствующих кабелей и выбрали вход для портативного компьютера на панели управления или с помощью пульта дистанционного управления, может потребоваться еще один дополнительный шаг для отображения изображения вашего портативного компьютера на ЖК-проекторе или телевизоре в комнате. Если у вас возникли проблемы при выполнении описанных ниже действий или на вашем портативном компьютере установлена операционная система, отличная от перечисленных ниже, обратитесь в службу поддержки ITS по доб. 8340 за помощью.
Windows 7 При одновременном нажатии клавиши с логотипом Windows и клавиши « P » на клавиатуре портативного компьютера отобразится следующее: Выберите Дубликат , чтобы изображение ноутбука отображалось как на экране ноутбука, так и на ЖК-проекторе или телевизоре в комнате.Возможно, вам потребуется настроить разрешение вашего ноутбука для получения оптимального изображения. Mac OS
Нет изображения или черный экран на мониторе компьютераОбновлено: 07.06.2021, Computer Hope Если на мониторе вашего компьютера отображается черный экран без изображения, когда вы включаете компьютер, следующие шаги могут помочь вам устранить неполадки или устранить проблему. Монитор не наЭто может показаться очевидным, но сначала убедитесь, что монитор включен. Если вы не видите индикатор питания (синий, зеленый или оранжевый) на передней или нижней части монитора, нажмите кнопку питания еще раз. Если после нескольких попыток индикатор не загорается, переходите к следующему разделу. Компьютер спитЕсли вы отошли от компьютера ненадолго и вернулись к черному экрану, скорее всего, компьютер спит. Попробуйте переместить мышь, щелкнуть кнопками мыши или нажать любую клавишу (например,g., пробел), чтобы разбудить его. Если ни одно из этих действий не помогло, нажмите кнопку питания. Ослабленные или ненадежные соединенияЕще одна причина появления черного экрана в том, что компьютер не обменивается данными с монитором должным образом из-за ненадежных или ненадежных кабельных соединений. Следующие шаги помогут вам убедиться, что монитор правильно подключен к компьютеру. Проверить кабель передачи данныхУбедитесь, что кабель передачи данных монитора правильно подключен к компьютеру. Он должен быть вставлен полностью и прочно на месте.В старых мониторах используется кабель VGA, но в большинстве новых дисплеев используется кабель и порт DVI или HDMI. КончикУбедитесь, что кабель подключен к правильному видеопорту. Большинство новых видеокарт имеют несколько подключений, и ваша материнская плата также может иметь собственное подключение. Проверить кабель питанияЗатем убедитесь, что в мониторе есть питание, посмотрев на синий, зеленый или оранжевый свет. Этот индикатор находится на передней или нижней части лицевой панели монитора. Если вы не видите индикаторов на мониторе, убедитесь, что он подключен к исправной розетке.Если шнур питания отсоединяется от задней панели монитора, попробуйте заменить его другим шнуром питания. Если вы по-прежнему не можете включить монитор после попытки использования другой розетки и кабеля, монитор неисправен и его необходимо заменить. Проверьте состояние светодиодаЕсли индикатор состояния монитора горит оранжевым или мигает, убедитесь, что монитор не находится в режиме ожидания, перемещая мышь или нажав Esc . Если это не помогает, повторно подключите кабель для передачи данных к компьютеру и задней панели монитора, а затем перезагрузите компьютер. Попробуйте другой кабельЕсли на ваш монитор подается питание, но вы по-прежнему не видите изображения, возможно, проблема связана с кабелем для передачи данных. Попробуйте использовать с монитором другой кабель DVI, HDMI или DisplayPort. Увеличьте яркость и контрастЕсли вы можете просматривать меню настроек монитора даже на пустом экране, вероятно, вам нужно увеличить яркость и контрастность. Нет постаЕсли компьютер не прошел POST, он не включится, а ваш монитор останется черным.Если вы слышите звуковой сигнал при включении компьютера, выполните действия по устранению неполадок POST, чтобы определить проблему. Проблема с оборудованиемЕсли вы выполнили приведенные выше рекомендации, но проблема не исчезла, возможно, у вашего компьютера неисправный монитор, видеокарта (видеокарта) или материнская плата. Лучший способ определить это — попробовать следующие предложения. Одолжите монитор чужого компьютера и подключите его к компьютеруЕсли на вашем компьютере работает другой монитор, можно с уверенностью предположить, что неработающий монитор неисправен и его следует заменить.Хотя возможно обслуживание монитора, часто бывает дешевле и проще купить новый. Отключите монитор и подключите его к другому компьютеруЕсли ваш монитор работает на другом компьютере, значит видеокарта неисправна. Попробуйте удалить видеокарту с пораженного компьютера и установить ее на другой компьютер. Если на другом компьютере не работает, скорее всего, видеокарта неисправна и ее необходимо заменить. |