CSS Display

CSS Display

Комментарии

CSS Display

Каскадные таблицы стилей (CSS) - это важнейшая технология для веб-дизайнеров и разработчиков. Она позволяет им создавать стили и макеты веб-страниц, делая их привлекательными и отзывчивыми. Одним из важнейших свойств CSS является свойство display, которое определяет, как элемент должен отображаться на веб-странице. В этой статье мы рассмотрим различные значения свойства display и то, как они влияют на оформление веб-страниц.

Created By [Author](https://medium.com/@rutikkpatel) ([Rutik Patel](https://medium.com/@rutikkpatel))

1. display: inline;

CSS-свойство display: inline; используется для отображения элемента как элемента уровня inline, то есть он будет обтекать текст строки. В отличие от элементов блочного уровня, установка конкретных значений высоты и ширины для элемента inline-уровня не влияет на его внешний вид.

.sub-container{
  display: inline;
  width: 100px; /* does not have any affect */
  height: 100px; /* does not have any affect */
}
display: inline;

2. display: inline-block;

Свойство CSS display: inline-block; используется для отображения элемента в виде блочного элемента на уровне inline. Разработчик может установить значения высоты и ширины в соответствии с требованиями.

.sub-container{
  display: inline-block;
  width: 57px; /* Applied Successfully */
  height: 100px; /* Applied Successfully */
}
display: inline-block;

→ строчные элементы в HTML

  • - <a>
  • - <img>
  • - <em>
  • - <i>
  • - <strong>
  • - <small>
  • - <span>

3. display: block;

Когда мы используем display: block; для элемента, он будет начинаться с новой строки и занимать всю доступную ширину. Вы также можете задать определенные значения ширины и высоты для элемента.

.sub-container {
  display: block;
  width: 100px;
  height: 40px;
}
display: block;

→ блочные элементы в HTML

  • - <div>
  • - <h1> to <h6>
  • - <li>
  • - <p>
  • - <section>

4. display: flex;

Это свойство display: flex также используется для новых методов компоновки, таких как Flexbox.

После использования display: flex; мы получаем доступ ко многим свойствам flexbox :-.

  • flex-direction
  • flex-wrap
  • order
  • flex-grow
  • flex-flow
  • flex-shrink
  • justify-content
  • flex-basis
  • align-items
  • align-self

5. display: grid;

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

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

  • grid-template
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid-row-start
  • grid-row-end
  • grid-column-start
  • grid-column-end
  • grid-row
  • grid-column
  • grid-area
  • gap
  • row-gap
  • column-gap

6. display: none;

Если мы используем display: none; для скрытия элемента, он не занимает места на странице.

Существует три распространенных способа сделать элемент невидимым с помощью CSS:

  • display: none;
  • opacity: 0;
  • visibility: hidden;

Давайте разберемся, в чем разница между этими методами:

Разница между отображением, непрозрачностью и видимостью

Если мы применим opacity: 0; или visibility: hidden к любому содержимому, это приведет к тому, что содержимое просто исчезнет с экрана, но область, покрытая содержимым, останется такой, какая она есть.

Заключение:

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