Далее на странице...
В CSS для скрытия элементов используется свойство display со значением none. При этом элемент не просто скрыт, он как бы удаляется со страницы вместе с содержимым. А его место автоматически занимают другие элементы.
Свойство visibility со значением hidden также скрывает элемент, но область ранее им занимаемая остается за ним: другие элементы не могут там располагаться. Значение collapse свойства visibility служит для скрытия элементов таблиц.
Свойства display и visibility применимы ко всем элементам.
Применение свойств display и visibility
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Cкрытие элементов </title>
<style type="text/css">
p {border:#0099CC solid 1px; padding:5px; font-size:18px; color:#CC0066;}
</style>
</head>
<body>
<p> <img src="../img/peng_64.gif"> Скроем пингвина разными методами. </p>
<p> <img src="../img/peng_64.gif" style="display:none;"> Пингвин скрыт и его место занял текст. </p>
<p> <img src="../img/peng_64.gif" style="visibility: hidden;"> Пингвин скрыт, но область, ранее им занимаемая, осталась за ним. </p>
</body>
</html>
Прозрачность элемента
Свойство opacity предназначено для указания степени прозрачности элемента. Свойство принимает значение от 0 до 1.
1 - это значение по умолчанию, ему соответствует нормальному отображению элемента - он непрозрачен.
Соответственно при значении 0 - элемент становится невидим - он прозрачен. Вот таким способом можно скрыть элемент.
Свойство применимо ко всем элементам
<p> Полупрозрачный пингвин! <img src="img/peng_128.gif" style="opacity:0.5;"> </p>
Полупрозрачный пингвин! 
Скрытая и видимая области
Для абсолютно позиционированных элементов применимо свойство clip. Оно обозначает ту область элемента, которая будет видна. Оставшаяся часть отображаться не будет.
Необходимая (видимая) часть элемента определяется заданием координат с помощью ключевых слов top, right, bottom и left, которые указывают расстояния от краев элемента до границ видимой области.
Форма видимой области - это всегда прямоугольник.
За пределами блока
Свойство overflow используется в тех случаях, когда содержимое блока превышает его размеры.
Свойство применимо к блочным элементам.
По умолчанию, если содержимое блока превышает его размеры, то оно будет отображено полностью, но выйдет за границы блока.
При значении hidden свойства overflow будет отображена та часть содержимого, которая вместится в границы блока. Соответственно оставшаяся часть будет скрыта.
Также, при превышении габаритами контента размеров блока, можно воспользоваться полосами прокрутки: при значении scroll свойства overflow они будут присутствовать всегда, а при значении auto будут добавлены при необходимости.
<p style="border:#FF3300 solid 2px; width:100px;">
<img src="img/peng_128.gif">
</p>
Пингвин превышает ширину блока, поэтому выходит за его границу.
Применение свойства overflow
В следующем примере воспользуемся свойством overflow со значениями hidden иauto.
<p style="border:#FF3300 solid 2px; width:100px; overflow:hidden;">
<img src="img/peng_128.gif">
</p>
<p style="border:#FF3300 solid 2px; width:100px; overflow:auto;">
<img src="img/peng_128.gif">
</p>
Курсор
Свойство cursor ничего не скрывает. Однако оно дает возможность изменить вид (тип) курсора при наведении мыши на элемент.
То есть (если можно так сказать) текущий курсор будет скрыт, а заданный появится.
Свойство применимо ко всем элементам.
Пингвина в примере скорее всего занимает какой-то вопрос. О чем он думает? Я хочу задать для пингвина курсор в виде стрелки со знаком вопроса, воспользовавшись свойством cursor со значением help.
<p style="border:#FF3300 solid 2px; width:150px; cursor:help;">
<img src="img/peng_128.gif">
</p>
Наведите на него курсор!
