CSS - Блочный.inline: Полное руководство для начинающих

Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы окунемся в чудесный мир CSS inline-block. Как ваш доброжелательный соседний компьютерный учитель, я проведу вас через это понятие шаг за шагом, с множеством примеров, чтобы сделать его crystal clear. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это захватывающее путешествие вместе со мной!

Что такое Inline-Block?

Прежде чем мы углубимся в детали, давайте поймем, что такое inline-block. Представьте, что вы расставляете книги на полке. Some книги вы хотите поставить вертикально (как inline элементы), а некоторые положить горизонтально (как block элементы). Но что, если вы хотите, чтобы книга стояла вертикально И занимала определенное количество места? Вот где и приходит на помощь inline-block!

Свойство CSS display: inline-block combines функции как inline, так и block элементов. Оно позволяет элементам располагаться рядом, как inline элементы, но также уважает свойства ширины и высоты, как block элементы.

Давайте посмотрим на простой пример:

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

В этом примере мы создали три div элемента с классом inline-block-element. Они будут出现在 рядом (inline), но мы также можем задавать их ширину и высоту (block).

CSS Inline Block - С Different Поведением

Одна из cool вещей в inline-block - это то, как он ведет себя по-разному в зависимости от содержимого. Давайте рассмотрим это на примере:

<style>
.container {
font-size: 0; /* Это удаляет пространство между inline-block элементами */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* Reset шрифт для содержимого */
vertical-align: top; /* Выравнивает ящики сверху */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

В этом примере мы создали три ящика с разной высотой. Обратите внимание, как они все выравниваются сверху благодаря vertical-align: top. Поиграйте с этим свойством, чтобы увидеть, как оно влияет на выравнивание!

CSS Inline Block - Ссылки для навигации

Один из распространенных способов использования inline-block - это создание меню навигации. Давайте создадим простую панель навигации:

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

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

CSS Inline Block - Группы кнопок

Inline-block идеально подходит для создания групп кнопок. Вот как это сделать:

<style>
.btn-group {
font-size: 0; /* Удаляет пространство между кнопками */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>

Это создает nice группу кнопок, где кнопки связаны между собой无缝но.

CSS Inline Block - Изображения и текст

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

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* Adjust based on image width */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Placeholder">
<p>This is some text that appears next to the image. The inline-block property allows us to align the image and text vertically.</p>
</div>

Это создает nice макет с изображением, выровненным с текстом рядом с ним.

CSS Inline Block - Полосы прогресса

Наконец, давайте создадим полосы прогресса с помощью inline-block:

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

Это создает простые полосы прогресса с индикаторами процента.

Заключение

И вот мы иili-block и его различные применения. От меню навигации до полос прогресса, это свойство предлагает гибкий способ разметки элементов на вашей веб-странице.

помните, ключ к овладению CSS - это практика. Так что не бойтесь экспериментировать с этими примерами и создавать свои уникальные designs. Счастливого кодирования!

Credits: Image by storyset