Модел ЦСС кутије објашњен примерима

Ако планирате да направите сјајан изглед веб странице, мораћете да знате о маргинама, ивицама, улошцима и садржају. Сваки елемент у веб дизајну, било да се ради о слици или тексту, користи оквир са овим својствима. Можете лако да направите сложене распореде играјући се са моделом кутије. У овом чланку ћемо сецирати ЦСС Бок модел и показати вам како да користите ова својства са практичним примерима.

Шта је ЦСС Бок модел?

Модел ЦСС кутије је стандард који је креирао Ворлд Виде Веб Цонсортиум. Он описује све елементе у ХТМЛ документу као правоугаоне кутије са сопственим димензијама. Ови оквири садрже подручје са садржајем и опционална подручја маргина, ивица и поља за заокруживање. Дакле, хајде да истражимо делове ЦСС кутије.

Откријмо четири слоја модела ЦСС кутије.

Први слој: Садржај

Подручје садржаја садржи главни садржај елемента који може бити слика, текст или било који облик медијског садржаја. Димензије елемената на нивоу блока можете изменити помоћу висина и ширина својства.

Други слој: Подлога

Паддинг је простор између оквира са садржајем и његовог оквира са рубом. Иако се налази око вашег садржаја као празан простор, можете користити боју позадине да бисте визуализирали разлику. Можете се пријавити паддинг-топ, паддинг-ригхт, паддинг-боттом, и паддинг-лефт својства за измену простора.

Трећи слој: Граница

Обруб обухвата садржај и подручје за унос. Можете да промените величину и обликујете ивицу помоћу ивица-ширина, гранични стил, и боја ивице својства.

Четврти слој: Маргина

Последњи слој модела кутије широко се користи за стварање простора између елемената. Маргина обухвата садржај, подлогу и рубну област. Можете користити маргина-топ,маргин-ригхт, маргин-боттом, и маргин-лефт својства. Такође можете дати својству марже негативну вредност или ауто да бисте постигли неке сјајне технике постављања.

Подешавање пројекта за ЦСС Бок модел

Изградимо мини пројекат који ће демонстрирати основни модел кутије са оквиром за садржај и паддингом, обрубима и маргинама. Можете користити текстуални, сликовни или медијски садржај. Почећемо тако што ћемо се уверити да је правилно структурирано.

Структура са ХТМЛ -ом

Излаз:

Можете да користите уграђене функције прегледача, попут Цхроме алатке за програмере, да видим шта се дешава. Користимо две слике из програма Унспласх. Ради једноставности, сакрићемо слику паметног телефона помоћу дисплаи: ноне; док нам касније не затреба.

Стилизовање помоћу ЦСС -а

/*************************
ОСНОВНИ СТИЛ
*************************/
* {
маргина: 0пк;
паддинг: 0пк;
}
тело {
дисплеј: флек;
смер савијања: ред;
} 
.приказ {
дисплаи: ноне! важно;
}

Сада, обликујмо оквир за садржај. Прво ћемо поставити висина и ширина слике. Такође, давање боје позадине помаже у бољој визуализацији. Дакле, учинимо то.

/*************************
КУТИЈА ЗА САДРЖАЈ
*************************/
.цонтент-бок {
дисплеј: флек;
смер савијања: ред;
јустифи-цонтент: центар;
алигн-итемс: центер;
/ * Стилизовање оквира садржаја помоћу својстава висине и ширине */
бацкгроунд-цолор: #фдф;
висина: 20ем;
ширина: 30ем;
}

Дајте садржају простора за дисање са подставком

Можете поставити или паддинг-топ, паддинг-ригхт, паддинг-боттом, и паддинг-лефт својства појединачно или користите стенографију. Покушајте да користите стенографију ако је могуће, јер вам може уштедети време. Да видимо како функционише паддинг.

 /*************************
ПАДДИНГ
*************************/
/ * Примена подлоге */
паддинг-топ: 5ем;
паддинг-ригхт: 2ем;
паддинг-боттом: 8ем;
паддинг-лефт: 2ем;
/ * Стенографија подлоге */
/ * горе/десно/доле/лево */
паддинг: 5ем 2ем 8ем 2ем;
/ * горе/хоризонтално/доле */
паддинг: 5ем 2ем 8ем;

Излаз:

Нацртајте линије око подлоге помоћу ивице

Док примењујете гранично својство, уверите се да користите боја ивице својство да граници даје посебну боју у односу на позадину. Можете изабрати гранични стил било појединачно или одједном користећи стенографско својство. Исто важи и за ивица-ширина својство.

Такође можете поставити граница-полупречник да би кутија добила заобљене углове са радијусом у пк, рем, ем, или проценат.

 /*************************
ГРАНИЦА
*************************/
/ * Примена својстава ивица */
/ * Подесите боју ивице */
бордер-цолор: ргб (148, 234, 255);
/ * Изаберите стил обруба */
бордура у стилу: чврста;
гранични десни стил: испрекидано;
граница-доњи стил: жлеб;
граница-лево-стил: гребен;
/ * стенографија у граничном стилу */
/ * горе/десно/доле/лево */
обрубљени стил: чврста испрекидана бразда;
/ * Подеси ширину ивице */
ивица-горња ширина: 4ем;
бордер-ригхт-видтх: 2ем;
бордер-боттом-видтх: 2ем;
бордер-лефт-видтх: 2ем;
/* стенографија ширине ивице*/
/ * горе/десно/доле/лево */
ширина ивице: 4ем 2ем 2ем 2ем;
/ * горе/хоризонтално/доле */
ширина ивице: 4ем 2ем 2ем;
/ * стенографија граничне имовине */
/* граница: 4ем солид ргб (148, 234, 255); */
/ * Подеси радијус границе */
бордер-радиус: 5ем;
граница-радијус: 20%;

Излаз:

Додајте размак између поља са маргином

Кутију можете хоризонтално центрирати помоћу маржа: 0 ауто, под условом да има одређену ширину.

 /*************************
МАРГИН
*************************/
/ * Примена својстава марже */
маргин-топ: 4ем;
маргин-ригхт: 5ем;
маргин-боттом: 3ем;
маргин-лефт: 5ем;
/ * Стенографија марже */
/ * горе/десно/доле/лево */
маржа: 4ем 5ем 3ем 5ем;
/ * горе/хоризонтално/доле */
маржа: 4ем 5ем 3ем;
/ * Користећи аутоматску маргину */
маргина: 3ем ауто;

Излаз:

Својство маргине можете навести користећи једну, две, три или четири вредности. Вредности могу бити дужина, проценат или кључна реч ауто. Хајде да разумемо како то функционише:

• Када наведете само једну вредност, то значи да ће све четири стране имати исту маргину.
• Када наведете две вредности, прва вредност означава маргин-топ и маргин-боттом док друга вредност одређује маргин-ригхт и маргин-лефт.
• Када наведете три вредности, прва и последња се примењују на маргин-топ и маргин-боттом редом. Средња вредност је за хоризонтално подручје, тј. маргин-ригхт и маргин-лефт.
• Када наведете све четири вредности, оне се примењују на горњу, десну, доњу и леву страну (у смеру казаљке на сату).

Имајте на уму да ове пречице можете да користите и за својства додавања и обруба.

Такође видети: Тхе Цхесс Схеет Особине ЦСС3 својстава

Да ли сте икада користили негативну маржу? Да бисмо то визуализовали, обришимо приказ: нема да прикажемо нашу другу слику, а затим поставите негативну маргину.

/* .приказ {
дисплаи: ноне! важно;
} */
.цонтент-бок {
дисплеј: флек;
смер савијања: ред;
алигн-итемс: центер;
бацкгроунд-цолор: #фдф;
висина: 20ем;
ширина: 30ем;
паддинг: 5ем 2ем 8ем;
обрубљени стил: чврста испрекидана бразда;
ширина ивице: 4ем 2ем 2ем;
граница-радијус: 20%;
/ * Користећи негативну маржу */
маржа: 3ем -20ем 3ем 5ем;
}

Излаз:

Тхе Бок Модел: Прављење Пикел савршене веб странице

Модел са кутијом вам омогућава да дефинишете простор између елемената, додате ивице и лако изградите изглед сложеног изгледа. Можете одмах почети са стварањем сјајне веб странице. У међувремену, можете истражити бордер-бок својину у детаље и играјте се са горњим кодом.

Морате схватити да постоје и друге методе за постављање садржаја у ЦСС. Ово укључује ЦСС Грид и ЦСС Флекбок. Када се упознате са моделом кутије, требало би да наставите са учењем о овим алтернативама.

ЦСС Флекбок Водич: Основе

Савршено поставите своје ХТМЛ елементе уз помоћ ЦСС Флекбок -а.

Прочитајте следеће

О аутору