Моделът на CSS кутия, обяснен с примери

Ако планирате да създадете страхотно оформление на уеб страница, ще трябва да знаете за полета, граници, подложки и съдържание. Всеки елемент в уеб дизайна, независимо дали е изображение или текст, използва кутия с тези свойства. Можете лесно да изграждате сложни оформления, като играете с модела на кутията. В тази статия ще анализираме CSS Box модела и ще ви покажем как да използвате тези свойства с практически примери.

Какво представлява CSS Box Model?

Моделът на кутия CSS е стандарт, създаден от World Wide Web Consortium. Той описва всички елементи в HTML документ като правоъгълни кутии със собствени размери. Тези полета съдържат област със съдържание и незадължителни околни полета, граници и области за пълнене. Така че, нека разгледаме частите на CSS кутия.

Нека разкрием четирите слоя на CSS кутия модел.

Първи слой: Съдържание

Областта със съдържание съдържа основното съдържание на елемента, което може да бъде изображение, текст или всякаква форма на медийно съдържание. Можете да променяте размерите на елементи на ниво блок, като използвате височина и ширина Имоти.

Втори слой: Подплата

Подложката е пространството между полето за съдържание и граничното му поле. Въпреки че се намира около вашето съдържание като празни пространства, можете да използвате цвят на фона, за да визуализирате разликата. Можете да кандидатствате подплата, подложка-вдясно, подплата-дъно, и подложка-ляво свойства за промяна на пространството.

Трети слой: Граница

Границата обгръща съдържанието и областта за подплънки. Можете да преоразмерите и оформите границата, като използвате ширина на границата, граничен стил, и цвят на границата Имоти.

Четвърти слой: Марж

Последният слой на кутия модел се използва широко за генериране на пространство между елементите. Полето обгръща съдържанието, подложката и граничната област. Можеш да използваш марж-отгоре,марж-дясно, марж-дъно, и марж-ляво Имоти. Можете също така да дадете на свойството на маржа отрицателна стойност или Автоматичен за постигане на страхотни техники за поставяне.

Настройка на проекта за CSS Box модел

Нека изградим мини проект, който да демонстрира основния модел на кутия с поле за съдържание и подложки, граници и полета. Можете да използвате текстово, графично или медийно съдържание. Ще започнем, като се уверим, че е правилно структурирана.

Структура с HTML

Изход:

Можете да използвате вградени функции на браузъра си, като например Инструменти за програмисти на Chrome, за да видите какво става. Използваме две изображения от Unsplash. За простота ще скрием изображението на смартфона, като използваме дисплей: няма; докато не ни потрябва по -късно.

Стилизиране с помощта на CSS

/*************************
ОСНОВЕН СТИЛИНГ
*************************/
* {
марж: 0px;
подложка: 0px;
}
тяло {
дисплей: гъвкав;
посока на огъване: ред;
} 
.display {
дисплей: няма! важно;
}

Сега, нека оформяме нашата кутия за съдържание. Първо ще зададем височина и ширина на изображението. Също така, придаването на цвят на фона помага за по -добра визуализация. Така че, нека го направим.

/*************************
СЪДЪРЖАНИЕ
*************************/
.content-box {
дисплей: гъвкав;
посока на огъване: ред;
justify-content: център;
align-items: center;
/ * Стилизиране на полето за съдържание с помощта на свойствата за височина и ширина */
background-color: #fdf;
височина: 20em;
ширина: 30em;
}

Дайте на съдържанието място за дишане с подложка

Можете или да зададете подплата, подложка-вдясно, подплата-дъно, и подложка-ляво имоти поотделно или използвайте стенография. Опитайте се да използвате стенографията, ако е възможно, тъй като тя може да ви спести известно време. Нека да видим как работи подложката.

 /*************************
ПАДИНГ
*************************/
/ * Прилагане на подложка */
подплата: 5em;
подложка отдясно: 2em;
подплата-дъно: 8em;
подложка-ляво: 2em;
/ * Подложка стенография */
/ * горе/надясно/отдолу/отляво */
подплата: 5em 2em 8em 2em;
/ * отгоре/хоризонтално/отдолу */
подплата: 5em 2em 8em;

Изход:

Начертайте линии около подложката, използвайки рамка

Докато прилагате граничното свойство, уверете се, че използвате цвят на границата свойство да придава на границата различен цвят от фона. Можете да изберете граничен стил или поотделно, или наведнъж, като използвате свойството за стенография. Същото се отнася и за ширина на границата Имот.

Можете също да зададете граница-радиус за да придадете на кутията заоблени ъгли с радиус в px, rem, им, или процент.

 /*************************
ГРАНИЦА
*************************/
/ * Прилагане на гранични свойства */
/ * Задайте цвят на рамката */
цвят на границата: rgb (148, 234, 255);
/ * Изберете стил на рамката */
бордюрен стил: плътен;
гранично-десен стил: начертан;
бордюрен стил: жлеб;
бордюр-ляв стил: хребет;
/ * стенография в стила на границата */
/ * горе/надясно/отдолу/отляво */
бордюрен стил: плътен пунктиран жлеб;
/ * Задайте ширина на границата */
бордюр-отгоре-ширина: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
граница-ляво-ширина: 2em;
/* стенография с широчина на границата*/
/ * горе/надясно/отдолу/отляво */
ширина на границата: 4em 2em 2em 2em;
/ * отгоре/хоризонтално/отдолу */
ширина на границата: 4em 2em 2em;
/ * стенография на гранична собственост */
/* граница: 4em твърд rgb (148, 234, 255); */
/ * Задаване на граница-радиус */
граница-радиус: 5em;
граница-радиус: 20%;

Изход:

Добавете пространство между полетата с поле

Можете да центрирате кутия хоризонтално с помощта марж: 0 авто, при условие че има определена ширина.

 /*************************
МАРГИН
*************************/
/ * Прилагане на свойствата на маржа */
марж-топ: 4em;
марж вдясно: 5em;
марж-дъно: 3em;
марж-ляво: 5em;
/ * Стенография на маржа */
/ * горе/надясно/отдолу/отляво */
марж: 4em 5em 3em 5em;
/ * отгоре/хоризонтално/отдолу */
марж: 4em 5em 3em;
/ * Използване на автоматичен марж */
марж: 3em автоматично;

Изход:

Можете да зададете свойството на маржа, като използвате една, две, три или четири стойности. Стойностите могат да бъдат дължина, процент или ключова дума Автоматичен. Нека разберем как работи:

• Когато посочите само една стойност, това означава, че и четирите страни ще имат еднакъв марж.
• Когато посочите две стойности, първата стойност означава марж-отгоре и марж-дъно докато втората стойност посочва марж-дясно и марж-ляво.
• Когато посочите три стойности, първата и последната се прилагат за марж-отгоре и марж-дъно съответно. Средната стойност е за хоризонталната област, т.е. марж-дясно и марж-ляво.
• Когато посочите и четирите стойности, те се прилагат съответно отгоре, надясно, отдолу и отляво (по посока на часовниковата стрелка).

Обърнете внимание, че можете също да използвате тези преки пътища за свойства на подложки и рамки.

Вижте също: Кодът за основни свойства на CSS3

Използвали ли сте някога отрицателен марж? За да го визуализираме, нека изтрием дисплей: няма за показване на второто ни изображение, след това задайте отрицателен марж.

/* .display {
дисплей: няма! важно;
} */
.content-box {
дисплей: гъвкав;
посока на огъване: ред;
align-items: center;
background-color: #fdf;
височина: 20em;
ширина: 30em;
подплата: 5em 2em 8em;
бордюрен стил: плътен пунктиран жлеб;
ширина на границата: 4em 2em 2em;
граница-радиус: 20%;
/ * Използване на отрицателен марж */
марж: 3em -20em 3em 5em;
}

Изход:

Моделът на кутията: Създаване на пикселен перфектен уебсайт

Моделът на кутията ви позволява да дефинирате пространство между елементите, да добавяте граници и лесно да изграждате сложно изглеждащо оформление. Можете да започнете веднага да създадете страхотен уебсайт. Междувременно можете да разгледате гранична кутия свойство в детайли и играйте с кода по -горе.

Трябва да разберете, че има и други методи за излагане на съдържание в CSS. Те включват CSS Grid и CSS Flexbox. След като се запознаете с модела на кутията, трябва да продължите да научавате за тези алтернативи.

Урок за CSS Flexbox: Основите

Перфектно позиционирайте вашите HTML елементи с помощта на CSS Flexbox.

Прочетете Напред

За автора