Tarkib
- Yuqoridagi nozik narsalar
- Chiroyli qadoqlangan futbolkalar
- Bo'shliqlarni to'ldiradigan paypoqlar
- Xayrli safarlar
Yarim tunda va u ham div saytingizda hali ham bolaning o'yinchoq ko'kragiga o'xshaydi. Barcha elementlar shov-shuvli tartibsizlikdir va har safar CSS-lar bilan o'ynaganingizda displey mulk, ular o'zlarini butunlay boshqacha bema'nilikka aylantirmoqdalar.
Agar siz menga o'xshasangiz, ehtimol buni labingiz ostida ming'irlash va klaviatura bilan doimiy ravishda tajovuzkor bo'lish orqali hal qilasiz. Garchi bu strategiya men uchun ilgari ishlagan bo'lsa-da, yaqinda men buni tushunishning eng yaxshi usulini topishga kirishdim displey mulk.
Ning asoslari chiqadi displey dastlab o'ylaganimdan ancha sodda. Aslida, ular chamadonni qadoqlash bilan bir xil printsiplardan foydalanadilar. Men qamrab olaman displey: blokirovka, ichki blok va mos ravishda. Agar ilgari chamadonni tartibli qilib joylashtirgan bo'lsangiz, siz parallellikni ko'rasiz. Agar siz barcha kiyimlaringizni bexosdan qo'chqor qiladigan odam bo'lsangiz - yaxshi, men sizga juda ko'p narsa qila olaman.
Bizning chamadonimizda uch xil kiyim bo'ladi:
- Yoqimli ko'ylak kabi nozik narsalar
- Yig'ish mumkin bo'lgan futbolkalar
- Bo'shliqlarga to'ldirilishi mumkin bo'lgan paypoq yoki ichki kiyim
Ma'lumot uchun, agar biz chamadonni HTML-da modellashtirsak, u quyidagicha ko'rinadi:
div class = 'chamadon'> div class = 'nozik'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'paypoq'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Yuqoridagi nozik narsalar
Displey: blokirovka aksariyat HTML elementlari uchun standart hisoblanadi. Bu shuni anglatadiki, element o'z konteyneridagi butun gorizontal maydonni egallaydi div. Agar u boshqa birodar elementlarning yonida bo'lsa, u yangi qatorni boshlaydi va uning qatorida boshqa elementlarga yo'l qo'ymaydi. Bu chamadonning yuqori qismiga qo'ygan nozik narsalarga o'xshaydi. Bu yoqimli ko'ylak kabi nozik yoki aqlli maqolalar. Ularning ajin tushishini xohlamaysiz, shuning uchun ular boshqa kiyim qismlariga surilmasligiga ishonch hosil qiling.
Bu eng qiyin qismlardan birini keltirib chiqaradi displey: blokirovka. Qanday qilib yoqa ko'ylak chamadonning butun kengligini egallamaganiga e'tibor bering? Bu boshqa narsalar o'z darajasiga ko'tarilishini anglatmaydi. Aytaylik, bu ko'ylak chamadon kengligining 60 foizini tashkil qiladi; u hali ham boshqa elementlarning yuqori darajadagi qo'shilishiga to'sqinlik qiladi.
Shuning uchun rasmda to'q sariq chegara mavjud. A displey: blokirovka butun gorizontal bo'shliqni egallamasa, element avtomatik ravishda uning atrofiga hoshiya qo'shadi.
Chiroyli qadoqlangan futbolkalar
Sizning chamadoningizning katta qismi, ehtimol sizning sayohatingiz uchun qolgan kiyimlarga to'la. Oddiylik uchun biz buni shunchaki futbolkalarga qisqartiramiz. Internetda katlama yoki prokatning samaraliroq ekanligi to'g'risida katta munozaralar mavjud. Men katlanadigan turdagi odamman.
Yaxshiyamki, eng ko'p narsalarga mos kelish uchun siz futbolkalarni yonma-yon turasiz. Aynan shu narsa displey: inline-blok uchun mo'ljallangan. Ushbu elementlar bir xil satrda bir-birining yonida, shuningdek yonida o'tirishi mumkin displey: inline elementlar.
Aksincha displey: inline elementlar, an ichki blok element tarkibiga mos kelmasa, keyingi qatorga o'tadi div boshqasi bilan bir qatorda ichki blok elementlar. Keyingi qatorga futbolka to'kilmasligi uchun uni yarmini kesib, yangi qatorni boshlash uchun qolgan yarmidan foydalanish kerak. Ichki blok elementlar chiziqqa to'g'ri kelmasa, ikkiga bo'linishiga yo'l qo'yilmaydi.
Bo'shliqlarni to'ldiradigan paypoqlar
Asl HTML-ni tekshiring, shunda bitta paypoq borligini ta'kidlaysiz div> sakkizta futbolka orasida. Ammo o'ngdagi chamadonning gorizontal ko'rinishini ko'rib chiqing. Agar bitta paypoq bo'lsa div>, u qanday qilib o'rta qatorni tugatishi va pastki qatorni boshlashi mumkin? Bu maqsad displey: inline!
An mos ravishda ning kengligidan oshib ketgan bo'lsa, element keyingi qatorga to'kiladi div (shu tarzda u farq qiladi ichki blok yoki blokirovka qilish). Bizning paypog'imizdan beri div bo'shliqlarga betartib ravishda to'ldirilgan paypoq bilan to'la, u o'rta qatorning o'ng tomonidagi bo'shliqni osongina to'ldirishni boshlashi va pastki qatorni boshlash uchun to'kilishi mumkin.
Buning uchun hech qanday paypoqni ikkiga qisqartirish kerak bo'lmaydi. Shuning uchun ular bo'lishlari mumkin mos ravishda, futbolkalar esa faqat bo'lishi mumkin ichki blok. Agar o'rta qatorda joylashgan futbolkalar kenglikning faqat 60 foizini egallagan bo'lsa, paypoq div> Qatorning qolgan qismidagi butun maydonni to'ldirish uchun yuqoriga ko'tariladi.
Xayrli safarlar
Bu bizning chamadonimiz uchun so'nggi CSS:
.delicate {display: block; kengligi: 60%; } .tshirt {displey: inline-blok; kengligi: 20%; } .socks {display: inline; }
Displeyning turli xil ishlatilishini ko'rsatish uchun ikkita muqobil senariy mavjud. Agar tepada nozikliklar bo'lsa displey: inline-blok, ular futbolkalarning yoniga to'g'ri kelishgan. Futbolkalarning bir qismi yuqori qatorga ko'tarilib, qolganlari shunga yarasha moslashishardi. Yoqilgan ko'ylakning chap va o'ng tomonida qulay tampon bo'lmaydi.
Agar har bir futbolkada bo'lsa displey-blok, sizda bir-birining ustiga satrda bittadan katta futbolkalar to'plami bo'ladi. Agar paypoq bo'lsa edi displey: inline-blok, ularning barchasi ikkita qator o'rtasida oqishdan ko'ra pastki qatorda o'tirishardi. Ba'zi bir futbolkalar boshqa qatorga surilib, to'rtinchi qatorni hosil qiladi. O'rtacha futbolka qatorining o'ng tomonida bo'sh joy bo'ladi.
Men bu erda bayon qilgan usulim bilan biz mavjud joydan maksimal darajada foydalanadigan, chiroyli tarzda qadoqlangan chamadon bilan ta'minlaymiz.
Ushbu maqola dastlab paydo bo'lgan net jurnal 289-son; bu yerdan sotib oling!
