Приховування елементів на css.

Відео: Вертикальне і горизонтальне вирівнювання на CSS. повне керівництво

існує безліч способів приховати елемент на сторінці, проте кожен з них має свої особливості. У цій статті ми розглянемо властивості, за допомогою яких можна це зробити, і їх плюси і мінуси.

Display

Кожен елемент в html є прямокутником. Приховування елемента за допомогою властивості display означає, що цей прямокутник не генерується взагалі.

Хоча елемент все ще знаходиться в розмітці, він не відображається на сторінці. Жодна частина коробочки моделі - область контенту, margin, padding, border не з`являється на сторінці і не генерується.

Будь-контент в межах елемента або його внутрішні елементи функціонально не існують. Якщо це дієвий елемент, наприклад, button або a, він не буде працювати. Елемент і його контент також ігноруються пристроями читання з екрану.

.foo { 
 display: none- 
}

Visibility

При використанні цієї властивості прямокутник буде генеруватися, але не буде відображатися на сторінці. Оскільки блок генерується, його блокова модель буде впливати на відображення інших елементів на сторінці.

Незважаючи на те, що блокова модель генерується, використання властивості visibility, щоб приховати елемент, схоже на властивість display. Елемент не працює і не читається пристроями читання з екрану.

.foo { 
 visibility: hidden- 
}

Opacity

властивість opacity стосується тільки того, як елемент відображається на сторінці, а конкретніше - його прозорості.

Відео: jаvascript (JS-Lynda.com) 08 3 Приховати, показати

Коли прозорість елемента встановлена в мінімальне значення, хоча він і стає невидимим на сторінці, його функціональність не відрізняється від елемента, що має який-небудь колір фону. Елемент також займає так багато простору, як йому потрібно, читається пристроями читання з екрану і є активним.

.foo { 
 opacity:0- 
}

Position

Дана властивість не призначене конкретно для приховування елемента, але може бути для цього використано. Елемент не буде відображений на сторінці і не впливатиме на макет, але зможе бути прочитаний пристроями читання з екрану і буде активним.

Існує два способи використання властивості position з іншими властивостями, щоб досягти цього.

Використання властивостей left і top, щоб висунути елемент за межі області видимості.

.foo { 
 position: absolute- 
 top:-9999px- 
 left:-9999px- 
}

Або ви можете використовувати властивість clip, щоб зменшити розмір блоку до незначного, тим самим приховавши його.

Відео: Відеокурс Html і Css, урок 39, Горизонтальне меню, що випадає

.foo { 
 position: absolute- 
 clip: rect(1px1px1px1px) -/ * Синтаксис для IE6 та IE7 * / 
 clip: rect(1px,1px,1px,1px) - 
}

Результат використання першого або другого методу буде однаковим.

Хоча ці рішення є трохи "Хакамі", в даний час це найкраще, що можна зробити, щоб приховати елемент з області видимості, залишивши при цьому функціонал.

висновок

	display	visibility	opacity	position
Генерується чи блокова модель?	✗	✓	✓	✓
Чи впливає блок на макет?	✗	✓	✓	✗
Поправді кажу вам елемент?	✗	✗	✗	✗
Чи буде вміст елемента прочитано пристроями читання?	✗	✗	✓	✓
Чи є елемент активним?	✗	✗	✓	✓

Поділися в соціальних мережах:

Схожі