display: block;
По умолчанию присвоен p, div, form, ul, h1 и т.д.
- на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; } </style> <div class="temnyi"> <div class="svetlyi">А</div> </div>
какой-то текстwidth: 30%;какой-то текст
- если не задано значение width, элемент растягивается на весь родительский контейнер.
какой-то текстwidth: auto;какой-то текст - если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
какой-то текстwidth: 100%;какой-то текст
border: 4px double red; - если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
- при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
- не действуют такие свойства, как vertical-align.
- не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
<style type="text/css"> .raz { background-color: #ffff00; } .raz li { background-color: #fff; } .raz li a { background-color: #ccc; } </style> <ol class="raz"> <li><a href="#on">маленькая</a></li> <li><a href="#on">с длинным текстом</a></li> </ol>Для того, чтобы вся строка была ссылкой
<style type="text/css"> .raz { background-color: #ffff00; } .raz li { background-color: #fff; } .raz li a { background-color: #ccc; display: block; } </style>Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)
<style type="text/css"> .raz { background-color: #ffff00; padding: 0; margin: 0; } .raz li { background-color: #fff; padding: 0; margin: 0; list-style: none; } .raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; } </style>
display: inline;
По умолчанию присвоен a, span, b, em и т.д.
- элементы следуют друг за другом.
<div class="temnyi"> <span class="svetlyi">А</span> </div>
какой-то текст прямоугольник А переносится на новую строку какой-то текст - width и height игнорируются. Его ширина - это ширина содержимого плюс margin, border и padding.
- margin-top и margin-bottom игнорируются.
- совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут "наезжать" друг на друга.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { padding: 10px; background-color: rgba( 255, 255, 255, 0.7); } </style>
какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст - не может иметь text-align. Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.
<style type="text/css"> .raz { background-color: #ffff00; padding: 0; margin: 0; } .raz li { background-color: #fff; padding: 0; margin: 0; display: inline; } .raz li a { background-color: #ccc; text-decoration: none; border: solid 1px; border-color: #46F #238 #238 #238; padding: 5px; line-height: 28px; } </style> <ol class="raz"><li><a href="#on">маленькая</a></li><li><a href="#on">с длинным текстом</a></li></ol>
display: inline-block;
По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.
- элементы следуют друг за другом.
- имеет width и height, margin-top и margin-bottom.какой-то текстwidth: 40%;какой-то текст
margin-top: 50px;
display: inline-block; - если не задано значение width (max-width), растягивается по ширине самого длинного элемента внутри. Удобно при использовании модального окна, где нужно уйти от фиксированных размеров, поскольку картинки могут быть совершенно разными.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; text-align: center; font-size: 150%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; display: inline-block; padding: 10px; } </style> <div class="temnyi"> <div class="svetlyi"> <img src="URL-изо"/> название изо </div> </div>
название изо - на него можно воздействовать посредством text-align и vertical-align.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; } .temnyi div { background-color: #fff; width: 20%; margin: 5px; display: inline-block; vertical-align: top; } .temnyi div:nth-child(2) { width: 10%; } .temnyi div:nth-child(3) { width: 30%; } .temnyi div:nth-child(4) { width: 20%; } .temnyi div:nth-child(5) { width: 30%; } .temnyi div:nth-child(6) { width: 40%; } </style> <div class="temnyi"> <div> 111 </div> <div> 2 </div> <div> 33 </div> <div> 4 </div> <div> 55 </div> <div> 6 </div> </div>
Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.1
1
123
345
56
1
1
123
345
56
<style type="text/css"> .raz, .raz li { padding: 0; margin: 0; } .raz li { display: inline-block; border: solid 1px; border-color: #46F #46F #238 #238; padding: 5px; vertical-align: top; max-width: 120px; } .raz li a { text-decoration: none; display: block; height: 80px; line-height: 15px; } .raz li a:after { display: block; text-align: center; } .raz li:nth-child(1) a:after { content: url(http://www.blogger.com/img/icon_28_followers.png); } .raz li:nth-child(2) a:after { content: url(http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif); } </style> <ol class="raz"><li><a href="#on">маленькая</a></li><li><a href="#on">с длинным текстом в две строки</a></li></ol>
display: list-item;
По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.
display: run-in;
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; display: run-in; } </style> <div class="svetlyi">А</div> <div class="temnyi">какой-то текст</div>
вторая строка
display: table;
По умолчанию присвоен table.
- на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.какой-то текстwidth: auto;какой-то текст
display: table; - не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
- не действуют такие свойства, как vertical-align.
- применимы свойства border-collapse и border-spacing.
display: inline-table;
Аналогичен display: inline-block.
- применимы свойства border-collapse и border-spacing.
display: table-row;
По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.
- на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
- элемент растягивается по длине содержимого.
- width, border, padding, margin, vertical-align игнорируются.
- можно изменить значение height.
- не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
display: table-cell;
По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.
- элементы следуют друг за другом.
- если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
- высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
- margin игнорируется. Это свойство заменяется border-spacing у родителя.
- на его содержимое можно воздействовать посредством text-align и vertical-align.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; display: table; border-collapse: separate; border-spacing: 10px 7px; } .temnyi > div { display: table-row; } .temnyi > div > div { background-color: #fff; width: 20%; vertical-align: middle; display: table-cell; text-align: center; } .temnyi > div > div:nth-child(2) { width: 10%; } .temnyi > div > div:nth-child(3) { width: 30%; } .temnyi > div > div:nth-child(4) { width: 20%; } </style> <div class="temnyi"> <div> <div> 111 </div> <div> 2 </div> <div> 33 </div> <div> 4 </div> </div> <div> <div> 55 </div> <div> 6 </div> </div> </div>
1
1
3
5
Пример использования
<style type="text/css"> .raz { display: table; } .raz div { display: table-row; } .raz a, .raz span { display: table-cell; line-height: 15px; width: 120px; padding: 5px; background-color: #fff; border-left: 1px solid #46F; border-right: 1px solid #238; } .raz div:nth-child(1) a { border-top: 1px solid #238; } .raz span { border-bottom: 1px solid #238; } .raz div:nth-child(2) a, .raz span { text-align: center; vertical-align: middle; } </style> <div class="raz"> <div> <a href="#on">маленькая</a> <a href="#on">с длинным текстом в две строки</a> </div> <div> <a href="#on"><img src="http://www.blogger.com/img/icon_28_followers.png"/></a> <a href="#on"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif"/></a> </div> <div> <span>цена</span> <span>цена</span> </div> </div>
display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)
По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.
display: none;
Элемент становится невидимым, не сохраняя занимаемое место.
Пример использования<style type="text/css"> .raz, .raz li, .raz ol { padding: 0; margin: 0; list-style: none; } .raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; } .raz li a + ol { display: none; } .raz li:hover a + ol { display: block; } </style> <ol class="raz"> <li><a href="#on">маленькая</a><ol> <li><a href="#on">подпункт1</a></li> <li><a href="#on">подпункт2</a></li> </ol></li> <li><a href="#on">с длинным текстом</a></li> </ol>
<style type="text/css"> .raz, .raz li, .raz ol { padding: 0; margin: 0; list-style: none; position: relative; } .raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; } .raz li input { position: absolute; right: 5px; top: 5px; } .raz li input + ol { display: none; } .raz li input:checked + ol { display: block; } </style> <ol class="raz"> <li><a href="#on">маленькая</a><input type="checkbox"/><ol> <li><a href="#on">подпункт1</a></li> <li><a href="#on">подпункт2</a></li> </ol></li> <li><a href="#on">с длинным текстом</a></li> </ol>
<style type="text/css"> .raz13, .raz13 li, .raz13 ol { padding: 0; margin: 0; list-style: none; position: relative; } .raz13 ol { position: absolute; left: 0px; top: 25px; right: -200px; } .raz13 > li { display: inline; } .raz13 li a { background-color: #ccc; text-decoration: none; border: solid 1px; border-color: #46F #238 #238 #238; padding: 5px; line-height: 25px; } .raz13 li ol { display: none; } .raz13 li:hover ol { display: block; } </style> <ol class="raz13"> <li><a href="#on">маленькая</a><ol> <li><a href="#on">подпункт1</a></li> <li><a href="#on">подпункт2 длинный</a></li> </ol> </li><li><a href="#on">с длинным текстом</a></li> </ol>
10 комментариев:
в чем м.б. ошибка?
применяю к ul display:block; но это не работает(
Возможно нужно это http://shpargalkablog.ru/2013/07/justify.html или это http://shpargalkablog.ru/2013/12/border.html#box-sizing-border-box (причины, почему съезжает элемент вниз). К последней ссылке http://shpargalkablog.ru/2013/01/skachet-menu.html
У меня есть один вопрос. Он относиться к описанию стиля "display: table-cell;"
Все ячейки, т.е. элементы "див" со стилем display:table-cell? имеют заданные индивидуальные величины ширины.
Ячейка1 - "111" - 20%
Ячейка2 - "2" - 10%
Ячейка3 - "33" - 30%
Ячейка4 - "4" - 20%
Итого: суммарно 80% от всей ширины содержащего их контейнера.
Вопрос: Почему в таком случае они заполняют весь контейнер? Смысл в таком случае устанавливать значения ширины?
Получается так: при указании максимальной ширины ( >=20%) для последней ячейки - все четыре предыдущие занимают свою ширину согласно задекларированным значениям, а последняя - всё оставшееся место.
Если же указать ширину последней ячейки меньше оставшегося пространства ( <20%), например - 5%, то ячейки "растягиваются" на всю ширину контейнера (по какому-то своему правилу для таблиц).
Вы можете указать пару ссылок на статьи в вашем стиле - в стиле шпаргалки (описание - пример), - где можно ознакомиться с пониманием того - как браузер будет отображать таблицу в том или ином случае. Скиньте, пожалуйста.
... или это только в Спецификацию?...