Четверг, 14 Марта 2013 15:47

CSS свойство display

Written by 
Оцени эту запись
(1 Голос)

Свойство display используется для задания иного типа отображения HTML элемента и изменения его места в потоке. Свойство display используется очень часто, без него просто невозможно обойтись при верстке страниц достаточно большого проекта. Но чаще всего он используется в двух случаях - изменение элемент со строчного на блочный или наоборот(display: block/inline) и скрытие элемента (display: none). В данной статье мы рассмотрим возможные значения свойства display, некоторые особенности значений и примеры.

Пластинка Спасение в интернет-магазине Artystyff

 

Значения свойства display

 

none - скрывает элемент со страницы, убирает его их потока

 

block - элемент становится блочным, начинается с новой строки, можно задавать размеры

 

inline - элемент становится строчным, расположен в строке, ведет себя как элемент текста; можно задавать внутренние отступы, но не размеры

 

inline-block - строчно-блочный элемент; расположен в строке, но на него действуют блочные свойства - отступы, размеры

 

inline-table - отображается как строчная таблица

 

list-item - отображается как элемент списка ol, ul

 

run-in - позволяет отображать блочные элементы в строке(подробнее)

 

table - ведет себя как таблица

 

table-caption - ведет себя как заголовок таблицы caption

 

table-cell - ведет себя как ячейка таблицы; например, поддерживает vertical-align в отличие от display:block

 

table-column-group - ведет себя как группа колонок таблицы

 

table-column - ведет себя как колонка таблицы

 

table-footer-group - ведет себя как группа строк таблицы внизу

 

table-header-group - ведет себя как группа строк таблицы снизу

 

table-row - ведет себя как строка таблицы

 

table-row-group - ведет себя как группа строк таблицы

 

box и inline-box - модель тянущихся боксов. Подробнее в статье.

 

Значение по умолчанию - inline.

 

Свойства table-caption, table-column-group, table-column, table-footer-group, table-header-group, table-row, table-row-group соответствуют HTML элементам, которые могут быть дочерними таблицы.

 

Особенности типов отображения display

 

Элементы с разными значениями свойства display по разному реагируют на работу других свойств.

1. Строчные элементы ведут себя примерно как текст - расположены в той же строке, после себя не переводят элементы на новую строку. Строчному элементу можно задавать свойства оформления текста внутри, цвет фона, внутренние отступы. Строчному элементу, расположенному в строке, можно задавать внешние отступы (margin) справа и слева. Внешние отступы margin сверху и снизу не подействуют на строчный элемент, как и заданные размеры. Размеры строчных элементов зависят от размеров их содержимого. 

 

<span style="background: blue; color: white; margin-top: 20px; margin-bottom: 20px; width: 100px; height: 50px;">Text</span>

 

Text

 

Ни размеры, ни вертикальные отступы не подействовали на элемент. Но повлияют горизонтальные внешние отступы и внутренние:

 

<p>First <span style="background: blue; color: white; margin-left: 20px; margin-right: 20px; padding: 10px;;">Text</span> Last</p>

 

First Text Last

 

 

2. При переносе содержимого строчного элемента на новую строку, он переносится на новую строку со всеми свойствами.

 

 

<p>Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с <span style="background: blue; color: white; margin-left: 20px; margin-right: 20px; padding: 10px;">таблицами стилей и скриптами</span>. Полезная информация, работающие примеры, решение конкретных задач.</p>

 

Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.

 

 


Отступы начались вначале элемента и закончились в конце, но не продублировались в месте разрыва.
 
 

3. Блочные элементы начинаются с новой строки, после себя переводят на новую строку. Им можно задавать внешние и внутренние отступы. Им же можно задавать размеры. 

 

<span style="display: block; background: blue; color: white; margin-top: 20px; margin-bottom: 20px; width: 100px; height: 50px;">Text</span>

 

Text

 

 

4. Свойство display: none в отличие от visibility: hidden полностью скрывает элемент, убирая его из потока, тогда как visibility: hidden прячет элемент и оставляет за ним место.

 

В первом случае "display: block", а во втором - "visibility: hidden":

 

 

<div style="float: left; padding: 20px; background: violet;"><div style="width: 50px; height: 50px; background: blue; display: none;"></div><div style="width: 50px; height: 50px; background: green;"></div></div>
<div style="float: left; padding: 20px; background: violet;"><div style="width: 50px; height: 50px; background: blue; visibility: hidden;"></div><div style="width: 50px; height: 50px; background: green;"></div></div>

 

 

Результат(во втором случае синего блока нет, но осталось его место над зеленым):

 

 
 
 
 

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов