Евгений Резниченко - Спецификация CSS2

none

Элемент негенерирует боксы в структуре форматирования(т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не можетбыть переопределено установкой у потомков свойства 'display' .

Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.

run-inи compact

Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cellи table-caption

При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).

Заметьте, что, хотя начальное значение 'display' - 'inline' , правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0в приложении.

Несколько примеров свойства 'display':

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать свойство 'display' .

В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования :

1Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.

2Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.

3Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.

Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы более доступными, позволяя избегать трюков разметки (например, невидимых изображений), используемых для создания эффектов отображения.

Свойства 'position' и 'float'определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'

Значение: static | relative | absolute | fixed | inherit

Начальное: static

Применяется: ко всем элементам, но не к генерируемому содержимому

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Значения имеют следующий смысл:

static

Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.

relative

Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.

absolute

Позиция бокса (и возможные размеры) определяется свойствами 'left' , 'right' , 'top' и 'bottom' . Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.

fixed

Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока.

'right'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

'bottom'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

'left'

Значение: | | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.

Значения для этих четырёх свойств имеют следующий смысл:

Смещением является расстояние от соответствующего края.

Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom' ). Для 'top' и 'bottom' , если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.