overflow | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 02.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


overflow | Свойство CSS

Свойство overflow устанавливает видимую часть элемента




Свойство overflow устанавливает видимую часть элемента,добавляя скроллинг или обрезая не поместившуюся часть элемента по осям x и y ( по горизонтали и вертикали ).Свойство применимо к блочным элементам,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные свойства overflow

Свойство
Описание
overflow-xУстанавливает видимость элемента по горизотали ( оси x )
overflow-yУстанавливает видимость элемента по вертикали ( оси y )
-ms-overflow-xУстанавливает видимость элемента по горизотали ( оси x )
-ms-overflow-yУстанавливает видимость элемента по вертикали ( оси y )


Дополнительные значения overflow

Значение
Описание
visibleУстанавливает видимость всего элемента ( может выйти за установленные границы блочного элемента )
hiddenОбрежет элемент не поместившийся в блочном элементе ( по границам блочного элемента )
scrollДобавит скроллинг элементу вышедшему за пределы блочного элемента
autoБраузер сам определяет видимость элемента
inheritНаследует значения родителя


Свойство работает в браузерах




Пример применения свойства overflow



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство overflow</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.visible {
overflow:visible;
width:300px;
height:50px;
border:5px double #0ba1d5;
color:#fff;
}
.hidden {
overflow:hidden;
width:300px;
height:50px;
border:5px double #0ba1d5;
color:#fff;
}
.scroll {
overflow:scroll;
width:300px;
height:50px;
border:5px double #0ba1d5;
color:#fff;
}
-->
</style>
</head>
<body>
<div class="visible">
При применении подобного значения всё содержимое будет показано даже если оно выйдет за пределы блочного элемента
</div>
<br>
<br>
<div class="hidden">
При применении подобного значения,содержимое которое выйдет за пределы блочного элемента будет обрезано
</div>
<br>
<br>
<div class="scroll">
При применении подобного значения,содержимому которое выйдет за пределы блочного элемента будет добавлен скроллинг
</div>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
Категория: Позиционирование | Добавил: IZOTOP (28.04.2012) | Автор: Меренков Михаил E W
Просмотров: 828 | Теги: css, свойство, style, для чего, что означает, overflow, что это | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]