Свойство display

Оцените материал
(0 голосов)

Здравствуйте! Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display. Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

  • inline: элемент становится строчным, подобно словам в строке текста

  • block: элемент становится блочным, как параграф

  • inline-block: элемент располагается как строка текста

  • list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

  • run-in: тип блока элемента зависит от окружающих элементов

  • flexbox: позволяет осуществлять гибкое позиционирование элментов

  • table, inline-table: позволяет расположить элементы в виде таблицы

  • none: элемент не виден и удален из разметки html

 

 Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="/styles.css" rel="stylesheet">
        <title>Свойство display в CSS3</title>
        <style>
            span{
                color: red;
            }
            .blockSpan{
                display: block;
            }
        </style>
    </head>
    <body>
        <div>Это <span>строчный</span> элемент span</div>
        <div>Это <span class="blockSpan">блочный</span> элемент span</div>
    </body>
</html>

Просмотреть  пример

 Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block;. Поэтому этот элемент span переносится на новую строку.

В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline. Элемент span как раз по умолчанию имеет стиль display: inline, поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
        <style>
            div{
                display: inline;
            }
        </style>
    </head>
    <body>
        <div>Первый строчный элемент div.</div>
        <div>Второй строчный элемент div.</div>
    </body>
</html>

Просмотреть  пример

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.

inline-block

Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height, margin.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
        <style>
            span{
                width: 100px;
                height: 30px;
                background-color: #aaa;
            }
            .inineBlockSpan{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
        <p>Проехав с полверсты в хвосте <span class="inineBlockSpan">колонны</span>, он остановился</p>
    </body>
</html>

Просмотреть  пример

Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять свойства width и height. А вот второй элемент span имеет значение inline-block, поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

  • Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block, то есть сам становится блочным

  • Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline, то есть сам становится строчным

  • Во всех остальных случаях элемент считается блочным

Табличное представление

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
        <style>
            ul{
                display: table;
                margin: 0;
            }
            li{
                list-style-type: none;
                display: table-cell;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

Просмотреть  пример

Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell. Фактически вместо этого списка мы могли бы использовать стандартную таблицу.

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
        <style>
            .invisible{
                display: none;
            }
        </style>
    </head>
    <body>
        <p>Первый параграф</p>
        <p class="invisible">Второй параграф</p>
        <p>Третий параграф</p>
    </body>
</html>

Просмотреть  пример

Прочитано 621 раз Последнее изменение Суббота, 10 сентября 2016 12:41
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+