Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство display

Дата:28.09.15 в 17:49
Справочник: 

Характеристики свойства

В каких браузерах работает?

6.0+ 2.0+ 7.0+ 1.0+ 1.0+ 2.1+ 1.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- + + +

Для чего используется?

Определяет способ отображения объекта на веб-страничке. В зависимости от него объект может по-разному вести себя при верстке.

Как правильно задавать?

display: block;

Какие могут быть значения?

Свойство имеет достаточно широкий список возможных значений, однако не каждое из них поддерживаются всеми браузерами. Ниже представлены универсальные значения, которые поддерживаются любым браузером:

  • block - присваивает выбранному объекту функции блочного элемента.
  • inline - отменяет свойства блочных элементов, присваивая особенности строчного.
  • inline-block - совокупность свойств блочного и строчного элемента. По отношению к соседним объектам такой элемент будет вести себя как строчный, однако внутренняя его часть будет проявлять свойства блочного элемента.
  • list-item - присваивает свойства блочного элемента, однако плюс к этому добавляет особую функцию списка - маркеры.
  • none - скрывает объект из вывода на веб-странице.

Пример использования

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Свойство display</title>
  <style>
   .conteiner1, .conteiner2 {
		display:inline-block;
		vertical-align:top;
   }
  </style>
 </head>
 <body>
  <ul class="conteiner1">
   <li>Золото</li>
   <li>Серебро</li>
   <li>Алюминий</li>
  </ul>
 
  <ul class="conteiner2">
   <li>Сталь</li>
   <li>Чугун</li>
   <li>Железо</li>
  </ul>
 </body>
</html>

По итогу получаем

display

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: