Визуальные эффекты в каскадных таблцах стлей.

Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количиство контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки.
В каскадных таблицах стлей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса. А теперь об этом подробнее:

Для начала расмотрим ситуации когда появляется полоса прокурутки:
1)Переполнение по высоте, эта ситуация возникает если контента на странице больше чем размер окна браузера.
2)Перереполнение по ширине возникает если контент не может быть перенесен на другую строку, например текст в теге PRE или слишком широкая картинка или другой объект
3)Явно заданые размеры бокса, но контент в него не помещается.
4)Если бокс позиционирован абсолютно(class{position:absolute})
5) Если задан отрицательный размер бокса.

Чтобы управлять переполнением, т.е. полосой прокрутки в каскадных таблицах стилей существует существует правило overflow, которое может принимать следующие значения:
1)class{overflow:visible} - это значение по умолчанию, его задавать не обязательно кроме тех случаев если вам нужно вернуть умолчания. При использовании этого правила полоса прокрутки будет возникать только при необходимости, т.е. если действтительно будет происходить переполнение блока.
2)class{overflow:hidden} - это правило скрывает полосу прокрутки всегда, даже если происходит переполнение и скрытое содержимое не отображается ни когда.
3)class{overflow:scroll} в этом случае полоса прокрутки будет всегда, независимо происходит переполнение или нет. Очень полезное правило при динамическом содержимом.
4)class{overflow:auto} аналог overflow:visible, но зависит от браузера.
5)class{overflow:inherit} на усмотрение браузера(пользовательского агента).
Свойство overflow не наследуется.

По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезит, в каскадных таблицах стилей мы можем изменять умолчания при помощи свойства clip и отображать нужную нам область.

Свойство правила clip принимает следующие значения:
1)class{clip:auto} Сжимаемая область имеет тот же размер и размещение, что и боксы элемента.
2)class{clip:inherit} На усмотрение браузера.
3)class{clip:rect(верх справа низ слева)} В этом значении мы сами задаем область видимости, значение могут быть auto или единицы длины, например class{clip:rect(auto 10px -20px 50px)}
Свойство clip применяется дополнением к свойству overflow, только в том случае если значение последнего отлизается от overflow:visible. Свойство clip не наследуется.

Свойство правил visibility предписывает отображать ли бокс или нет. Например если вернуться к теме об моделях боксов и вспомнить display: none, не смотртя на то что блок с таким правилом скрыт, он все же занимает место на странице. А свойство visibility управляет этим процесом, т.е. резервирует место под боксы или вообще подавляет.

Свойство visibility принимает такие значения:
1)class{visibility:visible} Место под данный бокс резервируется.
2)class{visibility:hidden} Место под данный бокс вырезается.
3)class{visibility:collapse} Если это значение не используется для тегов TR, TH и TD то используется как и visibility:hidden.