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


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



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


display | Свойство CSS

Свойство display устанавливает расположение элементов.




Свойство display применяется для изменения расположения элементов находящихся в коробке дисплея.Благодаря большому количеству дополнительных значений,последовательность расположения элементов может быть самой разной.Свойство применимо ко всем элементам,создано в версии CSS1 но проходит валидацию согласно версии CSS3.




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


Значение
Описание
blockЭлементы выстраиваются как блочные,занимая всю ширину внутри родителя,создавая разрыв и перенос строки.При таком значении строчные элементы начинают вести себя как блочные.
inlineЭлементы выстраиваются как строчные,ориентируясь на соседство блочных моделей,не создавая разрыва и переноса строки
inline-blockЭлементы выстраиваются как строчные,при этом форматирующие значения элементу,добавляются как к блочному
list-itemЭлементы выстраиваются как элементы со свойствами списка,становясь блочным элементом к которому прикрепляются маркеры
inline-tableЭлементы выстраиваются как таблица со свойствами строчного элемента
run-inЭлементы выстраиваются как блочные,но наследуя свойства строчных элементов
tableЭлементы выстраиваются как таблица,аналогично тегу table
table-captionЭлементы выстраиваются как заголовки таблицы,аналогично тегу caption
table-cellЭлементы выстраиваются как ячейки таблицы,аналогично тегу td
table-columnЭлементы выстраиваются как столбцы таблицы,аналогично тегу col
table-column-groupЭлементы выстраиваются как группа столбцов таблицы,аналогично тегу colgroup
table-footer-groupЭлементы выстраиваются как итоговая часть таблицы,аналогично тегу tfoot
table-header-groupЭлементы выстраиваются как группа строк заголовков таблицы,аналогично тегу thead
table-rowЭлементы выстраиваются как строки таблицы,аналогично тегу tr
table-row-groupЭлементы выстраиваются как группа строк таблицы,аналогично тегу tbody
noneЭлементы не имееют построения в дисплее
inheritНаследует значение родителя


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




Пример применения свойства display для всех значений



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство display</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.block {display:block;}
.inline {display:inline;}
.inline-block {display:inline-block;}
.inline-table {display:inline-table;}
.list-item {display:list-item;}
.run-in {display:run-in;}
.table {display:table;}
.table-caption {display:table-caption;}
.table-cell {display:table-cell;}
.table-column {display:table-column;}
.table-column-group {display:table-column-group;}
.table-footer-group {display:table-footer-group;}
.table-header-group {display:table-header-group;}
.table-row {display:table-row;}
.table-row-group {display:table-row-group;}
-->
</style>
</head>
<body>
<div class="block">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="inline">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="inline-block">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="inline-table">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="list-item">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="run-in">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-caption">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-cell">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-column">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-column-group">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-footer-group">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-header-group">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-row">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
<br>
<div class="table-row-group">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
<img src="http://delaisait.ucoz.ru/img/marker/6.gif">
</div>
</body>
</html>

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




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





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






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

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

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