курс css

Курс CSS. Урок 39. Видимість елементів. Властивості visibility: і display :.

Курс CSS. Урок 39. Видимість елементів.
Властивості visibility: і display :.

Для того, щоб зробити елемент невидимим використовують властивості visibility (в такому вигляді: visibility: hidden;) і display (в такому вигляді: display: none;).

Зверніть увагу, що ці дві можливості дають різні результати.

visibility: hidden; - (видимість: захований;) елемент буде захований, але він як і раніше буде займати те ж саме місце, як і раніше.

display: none; - (відображати: немає;) також елемент буде захований, але він тепер НЕ буде займати те ж саме місце. Сторінка буде відображатися, как-будто даного елемента немає взагалі.

Розглянемо обидві можливості на прикладах.

Приклад 1. visibility: hidden;

Натискання кнопки праворуч додасть мені властивість visibility: hidden;
Натисніть цю кнопку прямо зараз.

Це текст у великому діві спеціально для того, щоб показати обтікання цим текстом маленького дива. При натисканні кнопки зверніть увагу яким чином змінюється (і чи змінюється взагалі) розташування цього тексту.

Приклад 2. display: none;

Натискання кнопки праворуч додасть мені властивість display: none;
Натисніть цю кнопку прямо зараз.

Тепер перейдемо до теорії.

Властивість visibility: може мати два значення:

visibility: visible; - видимість включена, це значення за замовчуванням.
visibility: hidden; - видимість вимкнути, елемент захований, см приклад 1 вище, як працює ця властивість.

Що ж стосується властивості display. то тут можливих значень набагато більше. Розглянемо їх у таблиці нижче.

Можливі значення властивості display:

За замовчуванням. Показує елемент як інлайновий (як ).
Default. Displays an element as an inline element (like )

Показує елемент як блоковий (як

).
Displays an element as a block element (like

)

Показує елемент як блоковий контейнер інлайнового рівня. Середина блоку сформатована як прямокутна область блочного рівня. Сам елемент сформатував як прямокутна область інлайнового рівня.
Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.

Показує елемент як таблицю інлайнового рівня.
The element is displayed as an inline-level table.

Дозволяє елементу вести себе як елемент

.
Let the element behave like a

element.

Показує елемент або як блоковий, або як інлайновий, в залежності від контексту.
Displays an element as either block or inline, depending on context.