display

• Если человек ощущает свое участие в жизни общества, он создает не только материальные ценности для людей - он создает и самого себя. Из работы, в которой ярко выражен дух гражданственности, начинается истинное самовоспитание.

Афоризмы
• Поистине, подобно солнцу, люблю я жизнь и все глубокие моря. И вот что называю я познанием: чтобы все глубокое поднялось на высоту мою!

Афоризмы
• - «Оставайтесь голодными. Оставайтесь безрассудными». И я всегда желал себе этого. И теперь, когда вы заканчиваете институт и начинаете заново, я желаю этого вам.

Афоризмы
• Воспитание личности - это воспитание такого стойкого морального начала, благодаря которому человек сам становится источником благотворного влияния на других, сам воспитывается и в процессе самовоспитания еще более утверждает в себе собственное моральное начало.

Афоризмы

Сегодня

• Кто много знает, с того много и спрашивается.

• Не учись до старости, а учись до смерти.

• Без терпенья нет ученья.

• Знание лучше богатства.

• Учи показом, а не рассказом.

• Не для знания, а для экзамена.
• Знание — сила.

• Без муки нет и науки.

• Всему учен, только не изловчен.

• Велико ли перо, а большие книги пишет.

• Перо пишет, а ум водит.

• Не бойся, когда не знаешь: страшно, когда знать не хочется.
• Учение — путь к умению.

• Много ученых, мало смышленных.

• Наука учит только умного.

• Учи других — и сам поймешь.

• На все руки, кроме науки.

• Наукой люди кормятся.
• Писать — не языком чесать.

• От учителя наука.

• И медведя плясать учат.

• Не пером пишут — умом.

• Мудрым ни кто не родился, а научился.

• Корень учения горек, да плод его сладок.

Меню

Наши новости

Видео уроки

Разместить статью у нас на сайте.

15 март 2020, 12:20

? ССЫЛКА НА Maestro - «Видео уроки - CSS»

Российские ученые открыли новый ген - «пособник» коронавируса - «Интернет и связь»

Наш опрос

Помогли мы вам

Наши новости

21-03-2016, 20:33

display

Рейтинг:

Категория: Справочник CSS

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение	Описание	IE6	IE7	IE8	Cr2	Cr8	Op9.2	Op10	Sa3.1	Sa5	Fx3	Fx4
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <thumb>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
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 class="exampleTitle">Пример</p>
  <p class="example">
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</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.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Комментариев: 2: 21-03-2016, 20:33

Распечатать

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Еще новости по теме:

Другие новости по теме:

Комментарии для сайта Cackle

ДОБАВИТЬ БАННЕР

АВТОРИЗАЦИЯ

РегистрацияЗабыли?

ДОБАВИТЬ БАННЕР
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется."
«Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации.

«Все для веб-дизайнера - CSS»

Афоризмы

Афоризмы

Афоризмы

Афоризмы

• Кто много знает, с того много и спрашивается.

• Знание — сила.

• Учение — путь к умению.

• Писать — не языком чесать.

Учебник CSS

Самоучитель CSS

Новости

Справочник CSS

Афоризмы

? ССЫЛКА НА Maestro - «Видео уроки - CSS»

Российские ученые открыли новый ген - «пособник» коронавируса - «Интернет и связь»

display

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры