Соотношение между display, position и float

1. Если 'display' имеет значение 'none', браузеры обязаны игнорировать 'position' и 'float'. В этом случае элемент не генерирует бокса.

2. Иначе, если 'position' имеет значение 'absolute' или 'fixed', 'display' установлен в 'block', а 'float' установлен в 'none'. Позиция бокса будет определяться свойствами 'top', 'right', 'bottom' и 'left' и содержащим блоком бокса.

3. Иначе, если 'float' имеет значение не 'none', 'display' установлен в 'block', и бокс всплывает.

4. Иначе, оставшиеся свойства 'display' применяются так, как специфицированы.

 

Визуальные эффекты

Overflow

Возможные значения:

[1] visible - содержимое не сжимается, т.е. может отображаться за пределами бокса блока

[2] hidden - содержимое сжимается и механизм прокрутки не предоставляться для просмотра содержимого вне сжимаемой области

[3] scroll - содержимое сжимается и что если браузер использует механизм прокрутки, этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет

[4] auto - зависит от браузера, но должно вызывать предоставление механизма прокрутки для переполняемых боксов

*Применимо: к элементам уровня блока и к замещаемым элементам

Описание: сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента

ПРИМЕР:

overflow: hidden

Clip

Возможные значения:

[1] auto - сжимаемая область имеет тот же размер и размещение

[2] rect (<top> <right> <bottom> <left>) - специфицирует смещение относительно соответствующих сторон бокса

*Применимо: к элементам уровня блока и к замещаемым элементам

Описание: размер сжимаемой области (применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible')

ПРИМЕР:

clip: rect(5px, 10px, 10px, 5px)

clip: rect(5px, -5px, 10px, 5px)

 

Visibility

Возможные значения:

[1] visible - генерируемый бокс виден

[2] hidden - генерируемый бокс невидим (полностью прозрачен), но влияет на структуру

[3] collapse - если используется не с рядами или столбцами, имеет то же значение, что и 'hidden'

*Применимо для: всех элементов

Описание: предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним

ПРИМЕР:

visibility: hidden

 

Opacity

Возможные значения:

[1] числовое значение 0-1 (1-по умолчанию). Дробная запись 0.5 (.5). Процент не допустим.

*Применимо для: всех элементов

Описание: уровень прозрачности элемента

ПРИМЕР:

opacity: 0.3