CSS кутия-модел, обяснен с примери.

Днес ще обясня кутия-модел с помощта на CSS background-clip и background-origin свойства. Какви са свойства на фонов клип и произход на фона? За какво се използват и разликата между всеки от тях?

Това е въпрос, който минава през ума на начинаещи до средно ниво на уеб разработчиците. Някои от тях са донякъде запознати с него, а други все още се чудят къде могат да използват тези 2 свойства.

Е, преди да можете да разберете тези 2 свойства, трябва да разберете CSS-модела на кутията. Така че, нека започнем с това

Първо създайте „div“ и поставете „p“ таг вътре в него така,

някакво съдържание тук…

и след това му придайте някои стилове.

<Стил>
Разделение {
 фон: # 666;
 ширина: 300px;
 височина: 250px;
}
р {
 ширина: 200px;
 фон: червен;
}

Както можете да видите, че ние не сме дали никакви подложки или рамки на елемент „div“, така че „div“ елемент все още няма кутия за пълнене или рамка и цялото поле се счита за поле за съдържание.

Както е показано на това изображение по-долу.

Можете да проверите себе си, като отворите хромиран инструмент за разработчици

Сега, дайте на „div“ няколко подплънки от 50px отгоре, отдолу, отляво, отдясно.

Разделение {
 фон: # 666;
 ширина: 300px;
 височина: 250px;
 подплънки: 50px; // подплънка отгоре, отдолу, отляво, отдясно
}

Сега, ние имаме подложка от 50px & съдържание-кутия е вътре в padding кутия, както е показано на това изображение по-долу.

Сега най-накрая имаме подложка от 50px

Сега нека премахнем ширината от елемента „p“, така че да се разширява, за да поеме цялата ширина на полето за съдържание.

р {
 фон: червен;
}

Можете да видите резултата на изображението по-долу.

Елементът P се разширява, за да поеме цялата ширина на полето за съдържание

Нека сега да кажем, че добавяте фоново изображение към „div“ и задавате неговия размер на фона на „съдържа“, за да го накарате да коригира размера си в кутията и също така да му дадете някаква рамка, защото без рамка няма рамка.

Разделение {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') без повторение;
 размер на фона: съдържат;
 рамка: 10px плътно черно;
 ширина: 300px;
 височина: 250px;
 подплънки: 50px;
}

Тогава ще изглежда така, както е показано на изображението по-долу.

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

По подразбиране произходът на div на фона е зададен в padding-box и това означава, че изображението ще започне от рамката и също така ще бъде видимо в полето за съдържание, тъй като съдържанието е вътре в padding-box.

произход на фона: кутия за подплънки; /* стойност по подразбиране */

Да речем, че искаме изображението да започва от кутията с подплънки, но искаме само да разкрием частта от изображението, която е вътре в полето за съдържание, тогава трябва да настроим фоновия клип на div в полето за съдържание.

Разделение {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') без повторение;
 размер на фона: съдържат;
 фон-клип: поле за съдържание;
 рамка: 10px плътно черно;
 ширина: 300px;
 височина: 250px;
 подплънки: 50px;
}

Можете да видите резултатите от изображението по-долу, че се вижда само частта от изображението, която е вътре в полето за съдържание, но изображението започва от полето за подплънки, тъй като това е стойността по подразбиране на „background-orgin“.

Както можете да видите, че се вижда само частта от изображението, която е вътре в полето за съдържание, а останалата част е скрита

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

Разделение {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') без повторение;
 размер на фона: съдържат;
 фон-клип: подложка;
 рамка: 10px плътно черно;
 ширина: 300px;
 височина: 250px;
 подплънки: 50px;
}

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

Сега можем да видим и частта от изображението, която е вътре в подложката

Сега, нека се уверим, че фоновото изображение на нашия div започва от граничната кутия и за това трябва да дадем на нашия „div“ фонов произход на border-box. Но първо, нека увеличим размера на рамката, за да забележим разликата.

Разделение {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') без повторение;
 размер на фона: съдържат;
 фон-произход: гранична кутия;
 фон-клип: подложка;
 рамка: 20px плътно черно; / * Ширината на границата е 20px сега * /
 ширина: 300px;
 височина: 250px;
 подплънки: 50px;
}

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

Сега изображението започва от border-box

Сега, за да докажа моето мнение, че изображението започва от рамката и затова малка част от изображението е зад черната рамка, нека да дадем на границата някаква непрозрачност, за да може да избледнее и да видим частта от изображението, която е зад границата.

Разделение {
 фон: # 666 URL ('https://bit.ly/2gzkSPX') без повторение;
 размер на фона: съдържат;
 фон-произход: гранична кутия;
 фон-клип: подложка;
 граница: 20px твърда rgba (0,0,0,0.5); / * използване на rgba () * /
 ширина: 300px;
 височина: 250px;
 подплънки: 50px;
}
Тук можете да видите изображението зад избледняваща граница

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

Сега, когато знаете разликата между background-origin & background-clip и също така знаете за CSS-модел на кутията, Времето е да започнете и да изградите някои невероятни неща с него. #Goodluck

Ако сте пропуснали предишната ми статия за достъпността в мрежата, тогава ето връзката към нея, не забравяйте да я прочетете. НАТИСНИ ТУК