Видимость элементов

Кроме отсечения и переполнения, можно также управлять видимостью всего элемента. Тут все довольно просто. Если для элемента задано visibility: visible, то он, конечно же, видимый. Если для элемента задано visibility: hidden, то он становится «невидимым» (invisible, формулировка из спецификации). В состоянии невидимости элемент все еще оказывает влияние на компоновку документа так, как если бы был видимым. Иначе говоря, элемент находится на своем месте, но мы его не видим. Заметьте отличие от объявления display: none. В последнем случае элемент не отображается и удаляется из документа, поэтому никак не влияет на его компоновку. Абзац определен как hidden на основании следующих стилей и разметки:

em.trans {visibility: hidden; border: 3px solid gray; background: silver;
margin: 2em; padding: 1em;}


This is a paragraph that should be visible. Lorem ipsum, dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



Все видимые детали – такие как содержимое, фон и рамки – для скрытого элемента станут невидимыми. Обратите внимание, что остается пустое пространство, потому что элемент все еще является частью компоновки документа.


Вы просто не можете видеть его. Также заметьте, что элементы-потомки невидимого элемента можно делать видимыми. Это обусловливает появление элемента там, где он должен быть, несмотря на тот факт, что его предок (и, возможно, сестринские элементы) невидимы. Для этого надо прямо объявить элементпотомок как visible, поскольку свойство visibility – наследуемое:

p.clear {visibility: hidden;}
p.clear em {visibility: visible;}

Что касается visbility: collapse, это значение используется в CSS при генерировании визуального представления таблиц, что рассматривается в следующей главе. Согласно спецификации CSS2, если значение collapse применяется для нетабличных элементов, его поведение аналогично hidden.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Задание ширины и высоты
Запрет на обтекание
Запрет перемещения