...
WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Введение в свойство отображения CSS

387

На стилизацию веб-страниц уходит гораздо больше, чем на цвета и шрифты. Даже самые простые веб-страницы нуждаются в правилах макета, чтобы хорошо выглядеть, что требует знания таких свойств CSS, как позиция, плавающее положение и тема этой публикации, свойство display.

Если вы создаете веб-сайт с нуля или учитесь программировать на HTML, эти свойства имеют фундаментальное значение. Хотя сначала легко импровизировать свой код CSS по мере продвижения, вы в конечном итоге потратите много времени на исправление ошибок CSS в будущем.

Поверьте мне – я написал много CSS, не зная точно, что делаю, и я понял, что лучше понимать, что делают правила CSS, а не просто раздумывать.

Кроме того, даже если вы не начинающий веб-разработчик, наличие базовых знаний о свойствах CSS, таких как отображение, позволит вам при необходимости внести небольшие изменения в внешний вид вашего сайта – нет необходимости обращаться к разработчику, который сделает это за вас.

Чтобы помочь вам, это руководство объяснит, что делает свойство CSS display и что оно может добавить в ваш набор инструментов CSS. Я расскажу о наиболее распространенных применениях свойства вместе с наглядными примерами.

Что такое свойство отображения CSS?

Каждый элемент HTML представлен полем, содержащим контент и определяющим расстояние вокруг контента. Свойство отображения CSS определяет, как это поле отображается на веб-странице относительно других элементов, а также поведение его дочерних элементов (т. Е. Элементов внутри него).

В CSS есть два «уровня», которые может принимать это поле: блочный и встроенный. Элементы уровня блока существуют на отдельной строке и охватывают всю ширину страницы, если не указана другая ширина.

и

являются примерами элементов уровня блока.

Элементы встроенного уровня не нарушают поток контента – в одной строке может существовать несколько встроенных элементов. , и – это элементы встроенного уровня.

Свойство display нацелено на эти уровни и позволяет нам изменять их в соответствии с нашими требованиями к стилю. Дисплей правило записывается следующим образом:

дисплей: значение;

… где значение определяет способ отображения элемента – другими словами, его уровень. Давайте теперь посмотрим на наиболее распространенные значения свойства display.

Отображаемые значения CSS

По умолчанию браузеры отображают определенные элементы на разных уровнях. Например, элементы

по умолчанию отображаются как блоки, а элементы по умолчанию отображаются встроенными, как показано ниже:
<body>
<div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style type="text/css">
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>

Введение в свойство отображения CSS

Здесь первые три элемента

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

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

CSS Display: встроенный

Рядный значение дисплея превращает любой элемент в строковый элемент. Эти элементы будут отображаться в одной строке без разрывов, как и элементы .

<body>
<div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style type="text/css">
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
border-radius: 5px;
display: inline;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>

Введение в свойство отображения CSS

Обратите внимание, что я удалил правило заполнения, чтобы лучше проиллюстрировать эффект inline. Кроме того, ширина и высота встроенных элементов определяется содержимым, которое они содержат. Вы не можете установить их ширину и высоту с помощью CSS:

Если мы добавим текст между нашими элементами

, мы ясно увидим, как они вписываются в строку:

Введение в свойство отображения CSS

CSS Display: блок

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

. Перед этими элементами и после них есть разрывы строк.
<body>
<div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
display: block;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>

Введение в свойство отображения CSS

Отображение CSS: встроенный блок

Значение inline-block представляет собой гибрид inline и block. Элементы, которым назначено отображение: встроенный блок появляются в одной строке с другими встроенными элементами, что характерно для встроенных элементов. Однако встроенные блочные элементы также похожи на блочные элементы, поскольку вы можете изменять их ширину и высоту с помощью CSS.

<body>
<div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
display: inline-block;
width: 200px;
height: 50px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>

Введение в свойство отображения CSS

Отображение CSS: элемент списка

Элементы, которым назначен display: list-item, ведут себя как элементы

  • . Весь элемент становится элементом уровня блока, текст внутри становится отдельным встроенным элементом, а слева добавляется маркер:
    <body>
    <div id="div-0"> This is my first div.</div>
    <div id="div-1"> This is my second div.</div>
    <div id="div-2"> This is my third div.</div>
    <br>
    <span id="span-0">This is my first span.</span>
    <span id="span-1">This is my second span.</span>
    <span id="span-2">This is my third span.</span>
    </body>
    <style>
    body { font-family: "Avenir Heavy"; }
    div, span {
    background-color: #2e3f50;
    padding: 10px;
    border-radius: 5px;
    display: list-item;
    margin-left: 30px;
    }
    div { color: #fd8f59; }
    span { color: #1ebda5; }
    </style>
    

    Введение в свойство отображения CSS

    Обратите внимание, что без правила margin-left: 30px; наши маркеры выпадут за пределы области просмотра. Я увеличил левое поле, чтобы сделать их видимыми.

    Добавьте правило list-style-position: inside; чтобы разместить маркеры внутри элемента элемента списка:

    Введение в свойство отображения CSS

    Отображение CSS: нет

    display: none удаляет целевой элемент (и все его дочерние элементы) со страницы. Это приводит к тому, что сопутствующие элементы ведут себя так, как будто этого элемента не существует. В этом примере display: none применяется ко второму

    и второму :
    <body>
    <div id="div-0"> This is my first div.</div>
    <div id="div-1"> This is my second div.</div>
    <div id="div-2"> This is my third div.</div>
    <br>
    <span id="span-0">This is my first span.</span>
    <span id="span-1">This is my second span.</span>
    <span id="span-2">This is my third span.</span>
    </body>
    <style>
    body { font-family: "Avenir Heavy"; }
    div, span {
    background-color: #2e3f50;
    padding: 10px;
    border-radius: 5px;
    }
    div { color: #fd8f59; }
    span { color: #1ebda5; }
    #div-1, #span-1 {
    display: none;
    }
    </style>
    

    Введение в свойство отображения CSS

    Чтобы скрыть элемент, не влияя на макет страницы, используйте вместо этого свойство видимости CSS :

    /* display: none; */
    visibility: hidden;
    

    Введение в свойство отображения CSS

    CSS Display: сетка

    Значение отображения сетки делает назначенный элемент контейнером сетки, а его дочерние элементы ведут себя как элементы сетки. Узнайте, как создавать сетки CSS, в нашем подробном руководстве.

    CSS Display: гибкий

    Наконец, значение гибкого отображения устанавливает элемент как гибкий контейнер – еще один способ создания динамических и отзывчивых элементов страниц. Вы можете узнать больше об этом модуле CSS в этом полном руководстве от CSS Tricks.

    Измените свои макеты с помощью свойства отображения

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

    Источник записи: https://blog.hubspot.com

  • Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее