Свойство display указывает если/как отобразить элемент, и свойство visibility указывает если элемент должен быть видимым или скрытым.
Ящик 1
Ящик 2
Ящик 3
Скрытие элемента - display:none или visibility:hidden
Скрытие элемента может быть сделано путем установки свойства display в "none" или свойства visibility в "hidden". Однако, обратите внимание, что эти два метода дают разные результаты:
visibility:hidden скрывает элемент, но он будет по-прежнему занимать то же место, как раньше. Элемент будет скрыт, но он по-прежнему влияет на макет документа.
Пример 1
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h1.hidden { visibility:hidden; }
</style>
</head>
<body>
<h1>Это видимый заголовок</h1>
<h1 class="hidden">Это скрытый заголовок</h1>
<p>Обратите внимание, что скрытые заголовки все еще занимают много места.</p>
</body>
</html>
display:none скрывает элемент, и он больше не занимает места. Элемент будет скрыт, и страница будет отображаться как будто элемента не существует:
Пример 2
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h1.hidden { display:none; }
</style>
</head>
<body>
<h1>Это видимый заголовок</h1>
<h1 class="hidden">Это скрытый заголовок</h1>
<p>Обратите внимание, что скрытые заголовки не занимают места.</p>
</body>
</html>
CSS Отображение - блоковые и встроенные элементы
Блоковый элемент это элемент, который занимает всю доступную ширину, и имеет разрыв строки до и после него.
Пример блокового элемента:
Встроенный элемент занимает столько места, сколько ему необходимо, и не имеет разрыва строк.
Пример встроенного элемента:
Изменения - как отобразить элемент
Изменение встроенного элемента в элемент блока, или наоборот, может быть полезным для того чтобы страница выглядела определенным образом, и по-прежнему следовала веб-стандартам.
Следующий пример отображает список элементов, как встроенные элементы:
Пример 3
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li { display:inline; }
</style>
</head>
<body>
<p>Показывает список ссылок в виде горизонтального меню:</p>
<ul>
<li><a href="/ru/html" target="_blank">HTML</a></li>
<li><a href="/ru/css" target="_blank">CSS</a></li>
<li><a href="/ru/jQuery" target="_blank">jQuery</a></li>
</ul>
</body>
</html>
Следующий пример отображает элементы span как блоковые элементы:
Пример 4
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span { display:block; }
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>
Примечание: Изменение типа отображения элемента изменяет только как элемент
отображается, а НЕ тип элемента. Для примера: Встроенный элемент, установленный в display:block не допускает, чтобы блоковый элемент был вложен внутрь него.
Больше примеров
Пример 5
Этот пример демонстрирует, как отображать элемент, как встроенный элемент.Пример 6
В этом примере показано, как отобразить элемент как блочный элемент.Пример 7
Этот пример демонстрирует, как обрушить элемент таблицы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
tr.collapse { visibility:collapse; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>Ваня</td>
<td>Школьников</td>
</tr>
<tr class="collapse">
<td>Лиза</td>
<td>Семенова</td>
</tr>
</table>
<p><b>Примечание:</b> Internet Explorer поддерживает visibility:collapse только если указан !DOCTYPE.</p>
</body>
</html>
Была ли эта информация полезной?
