CSS box-modeli misollar bilan tushuntirdi.

Bugun men CSS fon-clip va background-origin xususiyatlarining yordami bilan box-modelini tushuntirib beraman. Fon-clip va fon-kelib chiqish xususiyatlari nima? Ular nima uchun ishlatiladi va ularning har biri orasidagi farq?

Xo'sh, bu savol boshlang'ich ongidan veb-ishlab chiqaruvchilarning o'rtacha darajalarigacha o'tadigan savol. Ulardan ba'zilari bu bilan biroz tanish, boshqalari esa ushbu 2 xususiyatni qayerda ishlatishi mumkinligi bilan qiziqishadi.

Xo'sh, ushbu 2 xususiyatni tushunishdan oldin, CSS box-modelini tushunishingiz kerak. Shunday qilib, bundan boshlaylik.

Avval "div" yarating va uning ichiga "p" yorlig'ini qo'ying,

bu erda ba'zi tarkiblar ...

va keyin unga ba'zi uslublarni bering.

div {
 fon: # 666;
 kengligi: 300px;
 balandligi: 250px;
}
p {
 kengligi: 200px;
 fon: qizil;
}

Ko'rinib turibdiki, biz "div" elementiga biron bir to'ldiruvchi yoki chegara qo'ymaganmiz, shuning uchun "div" elementida hali to'ldirish uchun quti yoki maydonchalar mavjud emas va butun quti tarkib qutisi hisoblanadi.

Quyidagi rasmda ko'rsatilganidek.

Chrome dasturiy vositasini ochib, o'zingizni tekshirishingiz mumkin

Endi "div" ga yuqoridan, pastdan, chapdan, o'ngdan 50px bo'shliqni bering.

div {
 fon: # 666;
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px; // tepadan, pastdan, chapdan, o'ngdan to'ldirish
}

Endi biz 50px o'lchamdagi to'ldirish maydonchasini olamiz va quyidagi rasmda ko'rsatilgandek content-box ichidagi maydonchalar ichida.

Endi biz nihoyat 50px o'lchamdagi qutichaga egamiz

Endi kenglikni "p" elementidan olib tashlaymiz, shunda tarkibiy qutining to'liq kengligi olinadi.

p {
 fon: qizil;
}

Siz natijani quyidagi rasmda ko'rishingiz mumkin.

'P' element tarkibiy qismning to'liq kengligini olish uchun kengayadi

Endi aytaylik, siz fon rasmini "div" ga qo'shasiz va uning o'lchamini qutiga ichiga o'rnatish uchun orqa fon o'lchamini "ichiga" o'rnatasiz, shuningdek siz unga chegara berasiz, chunki chegarasiz chegara qutisi yo'q.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') takrorlanmaydi;
 background-size: o'z ichiga oladi;
 chegara: 10px qattiq qora;
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px;
}

Keyin u quyidagi rasmda ko'rsatilgandek bo'ladi.

Siz buni shuningdek, dastur ishlab chiqaruvchisiga o'tib, rasmda ko'rsatilgandek, box-model ustiga bosib, tekshirishingiz mumkin

Odatiy bo'lib, div-ning kelib chiqishi padding-qutiga o'rnatilgan bo'lib, tasvir chegara maydonchasidan boshlanadi va kontent-qutida ko'rinadi, chunki kontent-quti to'ldirish maydonchasida bo'ladi.

orqa fon: padding-box; / * standart qiymat * /

Aytaylik, biz rasmni to'ldirish maydonchasidan boshlashni xohlaymiz, lekin biz faqat tarkib qutisidagi rasmning qismini oshkor qilmoqchimiz, keyin div fon rasmini tarkib qutisiga o'rnatishimiz kerak.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') takrorlanmaydi;
 background-size: o'z ichiga oladi;
 fon-klip: tarkib-box;
 chegara: 10px qattiq qora;
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px;
}

Quyidagi rasmda natijalarni ko'rishingiz mumkin, chunki kontent qutisidagi rasmning faqat bir qismi ko'rinar, ammo rasm "box-orgin" ning asl qiymati bo'lganligi sababli to'ldirish maydonchasidan boshlanadi.

Ko'rinib turibdiki, kontent qutisidagi rasmning faqat qismi ko'rinib turadi, qolgan qismi esa yashiringan

Endi biz orqa fon rasmini padd-qutiga tushadigan qismni ochib beraylik, buning uchun div fon rasmini padd-box-ga qaytarishimiz kerak, bu uni o'zgartirmasdan oldin odatiy qiymat edi.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') takrorlanmaydi;
 background-size: o'z ichiga oladi;
 fon-klip: padding-box;
 chegara: 10px qattiq qora;
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px;
}

Quyidagi natijalardan ko'rishingiz mumkin, endi biz plash qutisiga tushadigan rasmning qismi ham ko'rinib turibdi, chunki biz orqa fon klipini padd-boxga o'rnatdik.

Endi biz rasm qutisidagi rasmning qismini ham ko'rishimiz mumkin

Endi, bizning div fon rasmimiz chegara qutisidan boshlanganiga ishonch hosil qilaylik va buning uchun biz "div" ga chegara qutisidan kelib chiqqan fonni berishimiz kerak. Birinchidan, farqni ko'rish uchun chegaraning o'lchamini oshiraylik.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') takrorlanmaydi;
 background-size: o'z ichiga oladi;
 fon kelib chiqishi: chegara qutisi;
 fon-klip: padding-box;
 chegara: 20px qattiq qora; / * Chegaraning kengligi hozir 20px * /
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px;
}

Quyidagi rasmda ko'rib turganingizdek, fon rasmlari endi chegara maydonchasidan boshlanganligi sababli tasvirning kichik qismi qora chegara bilan qoplangan, boshqacha qilib aytganda rasmning bir qismi qora chegara ortida joylashgan.

Endi rasm chegara qutisidan boshlanadi

Endi tasvir chegara qutisidan boshlanganini va shuning uchun tasvirning kichik bir qismi qora chegaraning orqasida ekanligi haqidagi fikrimni isbotlash uchun keling, chegara biroz xiralashgan bo'lsin, shunda u so'nib ketishi mumkin va biz tasvirning qaysi qismini ko'rishimiz mumkin. chegara ortida.

div {
 fon: # 666 url ('https://bit.ly/2gzkSPX') takrorlanmaydi;
 background-size: o'z ichiga oladi;
 fon kelib chiqishi: chegara qutisi;
 fon-klip: padding-box;
 chegara: 20px qattiq rgba (0,0,0,0,5); / * rgba () * / yordamida
 kengligi: 300px;
 balandligi: 250px;
 to'ldirish: 50px;
}
Bu erda xira chegara ortidagi tasvirni ko'rish mumkin

Mana, endi siz chegaraning orqasida turgan rasmning qismini ko'rishingiz mumkin va bu men tasvirni chegara maydonchasidan boshlayotgani haqidagi fikrimni isbotlaydi, chunki biz fon kelib chiqishini chegara oynasiga o'rnatdik.

Endi siz fon kelib chiqishi va fon-klip o'rtasidagi farqni bilib oldingiz va shuningdek CSS box-modeli haqida bilasiz, u erga borish va u bilan ajoyib narsalarni yaratish vaqti keldi. #Goodluck

Agar siz Internetga kirish haqida avvalgi maqolamni o'tkazib yuborgan bo'lsangiz, unda havolasi bu erda, uni o'qishni unutmang. BU YERNI BOSING