Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
display

Будьте внимательны, несмотря на то, что большинство значений данного свойства поддерживаются свременными браузерами, редкие значения, например run-in и compact поддерживаются не всеми браузерами. FF 3.6 не поддерживает значение run-in и compact, как IE 6-7. IE 8, Opera 10 не поддерживают значение compact.

Каждый блок в спецификации CSS2 имеет определенный тип. Тип блока определяется свойством display.

Первый тип блоков - блочный.

Данные блоки визуально формируют структуру документа, создавая структурные единицы документа (например, элемент P). Блочный тип создаётся с помощью значений свойства display - 'block', 'list-item', 'compact', 'run-in', 'table'.

Второй тип блоков – строковые блоки.

Данные типы блоков создаётся с помощью значения 'inline', 'inline-table', 'compact' and 'run-in' свойства display. Блоки данного типа не создают структурные блоки в DOM структуре документа.

Свойства строковых блоков

  1. Ширина строкового блока определяется шириной его содержимого. Это основное отличие от блочных типов блоков.
  2. Высота строчного блока определяется как расстояние между верхней нижней границами блока.
  3. Пустые сточные элементы все равно имеют внешние (margin) и внутренние (padding) отступы, рамку (border) и высоту строки (line-height), которые учитываются при рассечете размера блока с содержимым.
  4. Если все блоки находящиеся в строчном блоке выровнены по его нижней границе, то высота строчного блока будет определяться высотой самого высокого блока.

Все строчные элементы по общему правилу, согласно спецификации CSS2, поддерживают свойства padding и margin, однако браузер Internet Explorer 5 версии данные свойства не поддерживает.

Выделяют анонимные строчные блоки. Пример анонимного строчного блока:

  1.<P>Some <EM>emphasized</em> text</P>
  2.

В этом примере блочный элемент P содержит несколько блоков выстроенных в линию – EM и текст «Some» и «text». Данный текст представляет собой анонимный блок. Анонимным блок называется так, потому что его содержимое не имеет связанного блока.

Основное, что Вам необходимо запомнить при использовании анонимных блоков – то, что данные блоки наследуют наследуемые свойства их родительских блоков. В нашем случае анонимные блоки, - с текстом «Some» и «text» наследуют свойство color (цвет текста) и свойство backgroumd(фон). Фон здесь представлен значением transparent.

Третий тип блоков – компактный.

Свойства компактных блоков:

  1. Компактный блок создаётся с помощью значения compact свойства display.
  2. Если компактный блок следует сразу за блочным блоком, то он становится строчным блоком.
  3. Во всех иных случаях данный тип блока заставляет блок рассматриваться как блочный.

Пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Элемент compact </TITLE>
  5. <STYLE type="text/css">
  6. DT { display: compact }
  7. DD { margin-left: 4em }
  8. </STYLE>
  9. </HEAD>
10. <BODY>
11. <DL>
12. <DT>Заголовок
13. <DD><P>Описание
14. <DT>Новый заголовок
15. <DD><P>Новое описание
16. </DL>
17. </BODY>
18.</HTML>
19.
20.

Четвёртый тип блоков- Run-in

Особенности блоков со свойством run-in:

  1. Если блочной элемент следует за элементом, в отношении которого установлено свойство display: run-in, то последний становится первой строкой блочного элемента.
  2. Во всех других случаях элемент с данным типом рассматривается как блочный.

Пример:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>A run-in box example</TITLE>
  5. <STYLE type="text/css">
  6. H3 { display: run-in }
  7. </STYLE>
  8. </HEAD>
  9. <BODY>
10. <H3>Заголовок с типом run-in</H3>
11. <P>Текст параграфа,
12. следующий за элементом со свойством display:none;
13. </BODY>
14.</HTML>
15.

Блочный тип элемента и взаимоотношения элементов

Блочные элементы располагаются вертикально друг за другом, при этом расстояние между ними определяется свойством margin.

Строчный тип блока и взаимоотношения блоков

Строчные элементы располагаются горизонтально друг за другом. При этом расстояние между ними определяется тремя CSS свойствами: padding, margin, border. Строчные блоки выравниваются различными способами; вертикально, горизонтально, по центру.

Свойство vertical-align и строчные блоки. Строчные блоки позволяют применить свойства text-align и verical-align для выравнивания содержимого строчного блока. Первое свойство ответственно за горизонтальное выравнивание, второе за вертикальное.

Следует помнить, что длина строчного элемента определяется максимально допустимыми размерами элемента, содержащего строчный элемента, если содержащий элемента достаточно широк, то строчный элемента может разместить все своё содержимое в линию по ширине всего содержащего элемента.

Если содержащий элемент не может вместить всё содержимое строчного элемента, то последний разделяется на несколько строчных элементов. При этом свойства padding и margin воздействуют на сточный элемент несколько иначе чем на блочный элемент. Хотя строчный элемент и разделяется на несколько строчных элементов и переносится на новую строку, его первоначальные границы не меняются. Уяснить данное свойство строчного блока Вам поможет следующий пример

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Пример распределения строки строчного элемента</TITLE>
  5. <STYLE type="text/css">
  6. EM {
  7. padding: 2px;
  8. margin: 1em;
  9. border-width: medium;
10. border-style: dashed;
11. line-height: 2.4em;
12. }
13. </STYLE>
14. </HEAD>
15. <BODY>
16. <P>Несколько <EM>выделенных слов</EM> указаны здесь.</P>
17. </BODY>
18.</HTML>
19.
Перенос строчного элемента.
Перенос строчного элемента.

Свойство margin устанавливается до и после элемента em, то есть слов "emphasized" и "words".

Свойство padding устанавливается до, над и с низу элемента em, то есть слова "emphasized" и после, над и с низу слова "words".

Значения свойства display:

block Данное значение заставляет элемент отображаться как основной элемент.
inline Данное значение заставляет элемент отображаться как строчный.
list-item Элемент соответствует элементу списка.
marker Данное значение применяется к содержимому, созданному до или после маркера. Данное значение допустимо при его использовании с псевдо-элементами :before и :after, применяемых в отношении блочных элементов. В других случаях, данное значение интерпретирует блок как 'inline'. Дополнительная информация находится в раздел.
none Данное значение исключает существование элемента в структуры документа. Ни дочерние элементы ни любые другие элементы не создаются, даже установка свойства display для дочерних элементов не изменяет данного правила. Данное свойство не создаёт невидимый элемент, при его использовании элемент вовсе отсутствует. Если Вам необходимо создать элемент в структуре документа, но который должен быть невидим, то применяйте свойство visibility.
run-in и compact Данные значения позволяют создать или блочный элемент или строчный элемент, в зависимости от типа смежных документов.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption Данные значение заставляет элемент отображаться как элемент таблицы (в соответствии с правилами для отображения элементов таблиц tables).

По умолчанию значение свойства display соответствует inline.

Простой пример использования свойства display:

  1.P { display: block }
  2.EM { display: inline }
  3.LI { display: list-item }
  4.IMG { display: none } /* изображение не отображается */
  5.
  6.
Примечание: некоторые браузеры игнорируют данное свойство.


Доступ и установка с jQuery

  • Получить свойство display: val = $("div").css("display");
  • Установить свойство display: $("div").css({"display":"..."});
  • Установить свойство display: $("div").css("display","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org