Параметры отображения
Параметрами отображения элементов html-страницы управляют атрибуты стиля visibility и display.
Атрибут стиля visibility определяет будет или нет элемент отображаться на html-странице. Данный атрибут стиля применяется для создания специальных эффектов.
Значения visibility:
- visible - элемент отображается (стандартное значение);
- hidden - элемент не отображается, но под него выделяется место. Фактически браузер на месте невидимого элемента отображает "пустое место";
- collapse - элмент не отображается, место под него не выделяется, но браузер "считает", что элемент присутствует на html-странице. Данное значение можно применять только к строкам, секциям, столбцам и группам столбцов таблицы.
Атрибут стиля display задает вид элемента html-страницы: блочный, встроенный, пункт списка. Значение по умолчанию данного атрибута стиля зависит от элемента html-страницы: для абзаца - это значение block; для изображения - inline.
Значения display:
- none - элемент не отображается на html-странице, как-будто его вовсе нет в html-коде;
- inline - встроенный элемент;
- block - блочный элемент;
- inline-block - блочный элемент, который "обтекается" соседними блочными элементами;
- list-item - пункт списка;
- run-in - встраивающийся элемент. Если за таким элементом идет блочный элемент, он в него "встраивается", ставится его частью; в противном случае - это блочный элемент;
- table - таблица;
- inline-table - таблица, которая отформатирована как встроенный элемент;
- table-caption - заголовок таблицы;
- table-column - столбец таблицы;
- table-column-group - группа столбцов таблицы;
- table-header-group - секция заголовка таблицы;
- table-row-group - секция тела таблицы;
- table-footer-group - секция завершения таблицы;
- table-row - строка таблицы;
- table-cell - ячейка таблицы.
Наиболее часто используются значения none, block, inline. Остальные значения атрибута стиля display используются редко по причине своей специфичности.
ПРИМЕР:
.hdn {display: none} - данный стиль делает элемент, к которому он будет применен, невидимым;
IMG.blk {display: block} - изображение отображается как блочный элемент;
LI {display: inline} - пункты списков будут выводиться в одну строку (встроенные элементы).
|
