CSS qutu modelini nümunələrlə izah etdi.

Bu gün CSS-in background-clip və fon mənşəli əmlakın köməyi ilə box-modeli izah edəcəyəm. Fon klipi və fon mənşəli xüsusiyyətlər hansılardır? Nə üçün istifadə olunur və hər biri arasındakı fərq?

Yaxşı, bu başlanğıc ağılından veb inkişaf etdiricilərinin aralıq səviyyəsinə qədər gedən bir sual. Bəziləri bununla bir qədər tanışdırlar, bəziləri isə hələ də bu 2 xassədən harada istifadə edə biləcəklərini düşünürlər.

Yaxşı, bu 2 xassəni başa düşməzdən əvvəl, CSS box-modelini başa düşməlisiniz. Beləliklə, bundan başlayaq.

Əvvəlcə "div" yaradın və içərisinə "p" etiketi qoyun,

buradakı bəzi məzmunu ...

sonra bir neçə üslub verin.

div {
 fon: # 666;
 eni: 300px;
 hündürlüyü: 250px;
}
p {
 eni: 200px;
 fon: qırmızı;
}

Gördüyünüz kimi, "div" elementinə heç bir boşluq və ya sərhəd verməmişik, buna görə "div" elementində hələ boşluq qutusu və ya sərhəd qutusu yoxdur və bütün qutu məzmun qutusu hesab olunur.

Aşağıdakı bu şəkildə göstərildiyi kimi.

Xrom geliştirici alətini açaraq özünüzü yoxlaya bilərsiniz

İndi "div" -ə yuxarıdan, altdan, soldan, sağdan 50px boşluq verin.

div {
 fon: # 666;
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px; // yuxarıdan, altdan, soldan, sağdan doldurma
}

İndi 50px boşluq qutusu var və məzmun qutusu aşağıdakı şəkildə göstərildiyi kimi doldurma qutusunun içərisindədir.

İndi nəhayət 50px boşluq qutusu var

İndi genişliyi "p" elementindən çıxartaq, beləliklə məzmun qutusunun tam genişliyini götürək.

p {
 fon: qırmızı;
}

Nəticəni aşağıdakı şəkildən görə bilərsiniz.

'P' elementi məzmun qutusunun tam genişliyini almaq üçün genişlənir

İndi deyək ki, "div" -ə fon şəkli əlavə edib, ölçüsünü qutunun içərisinə uyğunlaşdırmaq üçün arxa ölçüsünü "ehtiva et" vəziyyətinə qoyursunuz və sərhəd də verin, çünki sərhəd olmadan sərhəd qutusu yoxdur.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') təkrarlanmır;
 fon ölçüsü: ehtiva edir;
 haşiyə: 10px bərk qara;
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px;
}

Sonra aşağıdakı şəkildəki kimi görünəcək.

Bunu xrom geliştirici alətinə girərək və şəkildə göstərildiyi kimi qutu model üzərində gəzərək yoxlaya bilərsiniz

Varsayılan olaraq, div fon mənşəli padding qutusuna qoyulmuşdur və o deməkdir ki, görüntü sərhəd qutusundan başlayacaq və məzmun qutusu içəridə olduğundan məzmun qutusunda görünəcəkdir.

fon mənşəli: yastıq qutusu; /* cari dəyər */

Deyək ki, görüntünün boşluq qutusundan başlamağını istəyirik, ancaq görüntü hissəsini məzmun qutusuna daxil etmək istəyirik, sonra div fonuna klipi məzmun qutusuna qoymalıyıq.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') təkrarlanmır;
 fon ölçüsü: ehtiva edir;
 background-clip: məzmun qutusu;
 haşiyə: 10px bərk qara;
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px;
}

Aşağıdakı şəkildəki nəticələrdən görə bilərsiniz ki, məzmun qutusundakı görüntünün yalnız hissəsi görünə bilər, ancaq “background-orgin” -ın standart dəyəri olduğu üçün şəkil doldurma qutusundan başlayır.

Gördüyünüz kimi, görüntünün yalnız məzmun qutusunun içərisində və qalan hissəsinin gizli olduğu hissəsi görünür

İndi padding qutusuna daxil olan arxa planın hissəsini də açıqlayaq. Bunun üçün div fon planşetini dəyişdirməzdən əvvəl standart dəyəri olan padding-box-a geri qoymalıyıq.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') təkrarlanmır;
 fon ölçüsü: ehtiva edir;
 fon-klip: padding-box;
 haşiyə: 10px bərk qara;
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px;
}

Aşağıdakı nəticələrdən görə bilərsiniz ki, indi padding qutusuna daxil olan görüntü hissəsi də görünür, çünki arxa klipi padding-box-a geri qoymuşuq.

İndi görüntünün padding qutusundakı hissəsini də görə bilərik

İndi divimizin arxa görüntüsünün sərhəd qutusundan başlandığına və bunun üçün "div" -imizə haşiyə qutusuna mənşəli bir şəkil verməyimizə əmin olun. Ancaq əvvəlcə fərqi görmək üçün haşiyənin ölçüsünü artıraq.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') təkrarlanmır;
 fon ölçüsü: ehtiva edir;
 fon mənşəli: haşiyə qutusu;
 fon-klip: padding-box;
 haşiyə: 20px bərk qara; / * Sərhəd genişliyi indi 20px * /
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px;
}

Aşağıdakı şəkildən də göründüyü kimi fon şəkli artıq sərhəd qutusundan başlandığından görüntünün kiçik bir hissəsi qara haşiyəyə bürünür, başqa sözlə görüntünün bir hissəsi qara haşiyənin arxasındadır.

İndi görüntü sərhəd qutusundan başlayır

İndi görüntünün haşiyə qutusundan başladığını və buna görə görüntünün kiçik bir hissəsinin qara haşiyənin arxasında olduğuna dair fikrimi sübut etmək üçün gəlin haşiyəyə bir qədər qeyri-şəffaflıq verək ki, sönməsin və görüntünün hissəsini görə bilək. sərhədin arxasındadır.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') təkrarlanmır;
 fon ölçüsü: ehtiva edir;
 fon mənşəli: haşiyə qutusu;
 fon-klip: padding-box;
 haşiyə: 20px bərk rgba (0,0,0,0.5); / * rgba () * istifadə edərək
 eni: 300px;
 hündürlüyü: 250px;
 padding: 50px;
}
Burada solğun haşiyənin arxasındakı görüntünü görə bilərsiniz

Gedin, indi görüntünün haşiyənin arxasında olan hissəsini görə bilərsiniz və bu da görüntünün haşiyə qutusundan başlandığını sübut edir, çünki biz fon mənşəsini sərhəd qutusuna təyin etdik.

İndi fon mənşəli və background-clip arasındakı fərqi bildiyinizi və CSS box-modelini də bilirsiniz, getmək və onunla birlikdə bəzi gözəl əşyalar hazırlamaq vaxtıdır. # Yaxşılıq

İnternetlə tanışlıq barədə əvvəlki məqaləmi qaçırırsınızsa, onda buraya keçid var, onu oxumağı unutmayın. BURA BASIN