Ko'pincha zamonaviy veb-saytlar tartibida to'rlarni yaratish uchun ishlatiladi va oddiygina qandaydir blok yoki konteynerni anglatadi. Unga boshqa teglarni joylashtirish ham mumkin, bu barcha blok elementlari bilan mumkin emas, shuning uchun
foydalanish uchun qulay. Bloklar odatda bir-birining ustiga qo'yiladi va ichki elementlarga kiritilmaydi. HTML inline elementlari matn bo'lib, uni uslublash uchun CSS ishlatiladi.
Kontent kengligi hisobga olingan holda, blokning umumiy kengligi o'ng va chap to'ldirish, chekka, chegara va kenglik qiymatlarining yig'indisidir. Berilgan balandlikda - yuqori va pastki to'ldirishdan, chekkalardan, chegaralardan va balandlikdan. Blok elementlaridagi matn sukut bo'yicha chapga tekislangan. Agar ulardan birida blok elementlari bilan birga inline elementlar bo'lsa, u holda inline elementlar atrofida anonim blok yaratiladi. Unga standart uslub qo'llaniladi. Shuningdek, u ota-onasiga tayinlangan belgilangan uslubni meros qilib oladi.
Hujjatlar oqimi Oqim CSS-da ko'rsatilgan xususiyatlar bilan belgilanadigan sahifa elementlarini ko'rsatish tartibini anglatadi. Bunday holda, sukut bo'yicha, bloklar yuqoridan pastgacha qatorlanadi va etarli joy bo'lmasa, ichki teglar yangi qatorga o'tkaziladi va yuqoridan pastga va chapdan o'ngga joylashtiriladi. Elementning sahifadagi joylashuvi uning koddagi o'rniga bog'liq: u qanchalik baland bo'lsa, u shunchalik erta joylashgan. Blok elementlarining har biri qo'shnilarini itarib yuboradigan to'rtburchaklar kabi ko'rinadi. Ushbu xatti-harakatni maxsus xususiyatlar yordamida o'zgartirishingiz mumkin. CSS-da ma'lum bloklarni konteynerning o'rtasiga yoki yon tomonlariga tekislash joylashishni aniqlash deb ataladi.
Joylashtirish elementlari Bloklarni joylashtirish mutlaq va nisbiy joylashishni aniqlash yordamida boshqarilishi mumkin. Joylashtirish sahifaning katta bo'limlariga ma'lum bir joyni berish, murakkab interfeyslar, qalqib chiquvchi oynalar va dekorativ elementlarni yaratish uchun ishlatiladi. CSS-da bloklarni joylashtirish uchun ishlatiladigan asosiy xususiyat bu pozitsiyadir. U to'rtta asosiy xususiyatga ega:
qarindosh; mutlaq; belgilangan; statik.
Ularning yordami bilan siz to'rtta parametrdan birini belgilab, tartib rejimlarini o'zgartirishingiz mumkin: yuqori, o'ng, pastki yoki chap. Qatlamlarni buyurtma qilish xususiyati ham mavjud - z-index. Static xususiyati bilan joylashishni aniqlash odatda ishlatilmaydi, chunki u bloklarning standart joylashuvini bildiradi. Shuning uchun har qanday parametrlardan foydalanish unga hech qanday ta'sir qilmaydi. Qolgan uchta xususiyat tartib uchun ishlatiladi: nisbiy, mutlaq, sobit.
Nisbiy joylashishni aniqlash CSS-da bloklarning nisbiy joylashuvi, ya'ni pozitsiyasi: nisbiy xususiyat elementni ko'chirish va uning asl holatini o'zgartirish mumkinligini anglatadi. Bunday blok hali ham oqimda qolmoqda. Darhaqiqat, uning o'zi emas, balki uning nusxasi ko'chirilgan. Mulk qiymatlari blokning u yoki bu yo'nalishda qanchalik harakatlanishini aniq ko'rsatish uchun o'rnatiladi. Ular ko'pincha piksellarda o'lchanadi. Ammo boshqa birliklardan foydalanish maqbuldir.
Nisbiy joylashishni aniqlash uchun xususiyatlardan foydalanish Yuqori xususiyat muayyan blokning nusxasini xususiyatda ko'rsatilgan piksellar soni bo'yicha yuqoriga yoki pastga siljitadi. Uni ishlatganda, pastda yoki yuqorida joylashgan elementlar o'z joylarida qoladi, chunki aslida siljitilayotgan blok ham hech qaerga siljimaydi.
Pastki xususiyat blokni yuqori xususiyatga qarama-qarshi yo'nalishda siljitadi. Ijobiy qiymat uni yuqoriga, salbiy qiymat esa pastga siljitishga yordam beradi. O'ng va chap xususiyatlar elementni mos ravishda o'ngga va chapga siljitadi. Ularning barchasini birlashtirib, siz sahifadagi blokning aniq joylashishini o'rnatishingiz, uni vertikal va gorizontal koordinata o'qlari bo'ylab siljitishingiz mumkin. Agar siz chegaralarni oshirsangiz, ular blokning chetidan emas, balki uning nusxasi yon tomonga siljishidan hisoblab chiqiladi.
Mutlaq joylashishni aniqlash CSS-da bloklarning mutlaq joylashuvi mutlaq joylashuv xususiyatining qiymati bilan belgilanadi. Mutlaqo joylashtirilgan element hujjat oqimidan chiqib ketadi va uning o'rnini qo'shni bloklar egallaydi. Bunday elementning kengligi uning tarkibiga qarab cho'ziladi va uni yuqori, chap, o'ng, pastki xususiyatlar uchun ma'lum qiymatlarni o'rnatish orqali o'zgartirish mumkin. CSS-da bloklarning mutlaq joylashuvi sarlavhalar uchun foydalidir. Lekin pozitsiya: mutlaq faqat blok elementlari uchun emas, balki inline elementlar uchun ham ishlaydi.
Elementlarni markazga tekislash Joylashtirilgan mutlaqo inline element inline element bilan aynan bir xil harakat qiladi. Shuning uchun joylashishni aniqlash CSS-dagi matnni boshqarish uchun ham ishlatilishi mumkin. Siz unga yangi xususiyatlarni qo'llashingiz mumkin, masalan, balandlik va kenglikni o'zgartirishingiz mumkin. CSS-da markazlashtirish va vertikal tekislash bir nechta xususiyatlarning kombinatsiyasidan foydalanadi. Yuqori xususiyatning vertikal tekislanishini boshqaradi. Agar siz blokni CSS-da markazlashtirmoqchi bo'lsangiz, asosiy konteyner nisbatan joylashtirilgan bo'lishi kerak va tekislangan element mutlaqo joylashtirilgan bo'lishi kerak. Konteyner yuqori xususiyatni o'rnatishi kerak: 50% va elementni o'z balandligining yarmiga ko'chirish uchun "0, -50%" qiymati bilan translate xususiyatidan foydalaning. Mutlaq joylashtirilgan elementlarni yangi turga ajratish mumkin, chunki ularga joylashishning boshqa turlari uchun mavjud bo'lmagan xususiyatlar qo'llaniladi.
Brauzerning yuqori chap burchagiga nisbatan joylashtirish Chap, yuqori, o'ng va pastki xususiyatlar mutlaqo va nisbatan joylashtirilgan elementlarda boshqacha ishlaydi. Nisbiy elementlar uchun bu xususiyatlar element joylashgan joyga nisbatan ofsetni o'rnatadi. Mutlaqo joylashtirilganlar brauzer oynasining o'lchamiga bog'langan ma'lum bir koordinata tizimiga nisbatan joyni egallaydi. Ushbu tizimning boshlang'ich nuqtalari oynaning burchaklaridir. Chap xususiyatdan foydalanganda, chekinish brauzerning chap tomonidan hisoblanadi, lekin hech qanday aylantirish paneli bo'lmaydi. Yuqori xususiyat, mutlaq joylashtirilganda, brauzerning yuqori qismidan u qo'llaniladigan elementning yuqori qismiga ofsetni belgilaydi. Ikkala xususiyatni birlashtirib, element brauzerning yuqori chap burchagiga nisbatan ko'chirilishi mumkin.
Brauzerning yuqori o'ng burchagiga nisbatan joylashtirish Xuddi shunday, o'ng va yuqori xususiyatlardan foydalanib, siz brauzer oynasining o'ng tomonidagi elementni bosishingiz va uning vertikal holatini o'zgartirishingiz, uni yuqori o'ng burchakka ko'chirishingiz mumkin. Agar to'g'ri xususiyat salbiy qiymatga o'rnatilgan bo'lsa, blok oyna chegarasidan tashqariga chiqadi. Shundan so'ng, aylantirish paneli paydo bo'lishi kerak. Elementni pastga siljitish uchun pastki xususiyatdan foydalaning. U brauzer oynasining pastki chetidan blokning pastki qismigacha bo'lgan chegarani belgilaydi. Agar uning qiymati manfiy bo'lsa, element brauzer oynasining pastki chegarasidan tashqariga siljiganligi sababli aylantirish paneli ham paydo bo'ladi.
Mutlaq joylashishni aniqlash uchun koordinatalar tizimi Odatiy bo'lib, mutlaq joylashuv berilgan barcha elementlar bitta koordinata tizimiga - brauzer oynasiga bog'langan. Lekin uni ba'zi bir ota-element nisbiy joylashuvini berish orqali o'zgartirish mumkin. Keyin bolalar bloki ota-onaga qarab o'z o'rnini o'zgartiradi. Agar asosiy elementlar orasida nisbiy joylashuvga ega bir nechta bo'lsa, hisoblash ularning eng yaqin qismidan amalga oshiriladi. Bunday holda, standart joylashuv tana yorlig'ida ko'rsatilganidan bo'ladi.
Mutlaq joylashtirilgan element uchun mos yozuvlar nuqtasi Elementga mutlaq joylashishni berishdan oldin, u biron bir joyda yashirin kelib chiqish deb atalgan. Agar bunday blokga xususiyatlar berilmasa, u harakat qilmaydi. Margin xususiyatini o'rnatish orqali uni o'zgartirishingiz mumkin. U joylashishni aniqlash xususiyatlariga o'xshash ishlaydi. Agar chap xususiyatning qiymatini va boshqalarni aniqlamasangiz, u avtomatik ga teng bo'ladi. Elementlarni asl joylariga qaytarish uchun avtomatik foydalanishingiz mumkin.
Ruxsat etilgan joylashuv Boshqa ma'no aniqlangan. Pozitsiya xususiyati elementni ma'lum bir joyga bog'laydi. Ruxsat etilgan joylashuv ko'pincha CSS-da menyu yaratish uchun ishlatiladi. U mutlaqga o'xshaydi, lekin sobit blok oqimdan tushadi. Sahifani aylanayotganda ham bunday element joyida qoladi, shuning uchun uni CSS-da menyu yaratish uchun ishlatish qulay. Boshlanish nuqtasi brauzer oynasiga bog'lanadi. Agar bir nechta joylashtirilgan bloklar mavjud bo'lsa, ularni buyurtma qilish uchun z-index xususiyatidan foydalaniladi. Uning yordami bilan siz nisbiy bloklarni mutlaq bloklar bilan qoplashingiz mumkin, agar ularga butun son sifatida ko'rsatilgan tegishli indeksni bersangiz. U qanchalik katta bo'lsa, blok qanchalik baland bo'ladi.
CSS-ning eng yaxshi jihatlaridan biri shundaki, uslublar bizga tarkib va elementlarni sahifadagi deyarli har qanday tasavvur qilish imkoniyatini beradi. Bu bizning dizaynimizga tuzilma qo'shadi va kontentni yanada ingl.
Bir nechtasi bor turli xil turlari CSS-da joylashishni aniqlash, bu turlarning har biri o'z doirasiga ega. Ushbu bobda biz bir nechta turli xil foydalanish holatlarini ko'rib chiqamiz - qayta foydalanish mumkin bo'lgan tartiblarni yaratish va bir martalik ishlatiladigan elementlarni noyob joylashtirish - va buni amalga oshirishning bir necha usullarini tavsiflaymiz.
Float orqali joylashishni aniqlash Sahifadagi elementlarni joylashtirish usullaridan biri float xususiyatidir. Bu xususiyat juda ko'p qirrali va uni turli yo'llar bilan ishlatish mumkin.
Aslida, float xususiyati elementni oladi, uni sahifaning oddiy oqimidan olib tashlaydi va uni asosiy elementning chap yoki o'ng tomoniga joylashtiradi. Sahifaning boshqa barcha elementlari bunday elementni o'rab oladi. Misol uchun, agar element bo'lsa, paragraflar tasvirni o'rab oladi
Float xususiyati bir vaqtning o'zida bir nechta elementlarga qo'llanilsa, u ko'p ustunli maketda ko'rsatilganidek, suzuvchi elementlar bilan yonma-yon yoki qarama-qarshi joylashgan maket yaratish imkonini beradi.
Float xususiyati bir nechta qiymatlarni oladi, ikkita eng mashhuri chap va o'ng bo'lib, ular elementni ota-onasining chap yoki o'ng tomonida suzish imkonini beradi.
Img (suzuvchi: chap; )
amalda suzadi Yuqorida sarlavha, markazda ikkita ustun va pastki qismida pastki kolontiter bilan umumiy sahifa tartibini yaratamiz. Ideal holda, bu sahifa elementlar bilan belgilanishi kerak
,
, Va , “HTML bilan tanishtirish” 2-darsda tasvirlanganidek. Element ichida HTML quyidagicha ko'rinishi mumkin:
Floatsiz maketni namoyish qilish Bu erda elementlar Va blokga asoslangan, shuning uchun ular sukut bo'yicha bir-birining ustiga yig'iladi. Biroq, biz bu elementlarning yonma-yon o'tirishini xohlaymiz. floatni o'rnatish orqali chap kabi va uchun to'g'ri bo'lsa, biz ularni bir-biriga qarama-qarshi ikkita ustun sifatida joylashtirishimiz mumkin. Bizning CSS quyidagicha ko'rinishi kerak:
Bo'lim (suzuvchi: chap; ) chetga (suzuvchi: o'ng; )
Malumot uchun, suzuvchi elementlar asosiy elementning chetida joylashgan. Agar ota-ona bo'lmasa, suzuvchi element sahifaning chetiga joylashtiriladi.
Elementni float holatiga o'rnatganimizda, biz uni HTML hujjatining oddiy oqimidan olib tashlaymiz. Bu elementning standart kengligi uning mazmunining kengligiga aylanishiga olib keladi. Ba'zan, masalan, qayta foydalanish mumkin bo'lgan tartib uchun ustunlar yaratayotganimizda, bunday xatti-harakatlar nomaqbuldir. Buni har bir ustun uchun belgilangan qiymatga ega kenglik xususiyatini qo'shish orqali tuzatish mumkin. Bundan tashqari, suzuvchi elementlarning bir-biriga tegib ketishiga yo'l qo'ymaslik va bir elementning mazmunini boshqasiga o'tirishiga yo'l qo'ymaslik uchun biz elementlar orasidagi bo'shliqni belgilash uchun margin xususiyatidan foydalanishimiz mumkin.
Quyida biz istalgan natijani yaxshiroq shakllantirish uchun har bir ustun uchun chekka va kenglik qo'shish orqali oldingi kod blokini kengaytiramiz.
Bo'lim (suzuvchi: chap; chet: 0 1,5%; eni: 63%; ) chetga (suzuvchi: o'ng; chet: 0 1,5%; kenglik: 30%; )
Float bilan tartib demosi float elementning ko'rsatish qiymatini o'zgartirishi mumkin Suzuvchi element uchun, shuningdek, element sahifaning oddiy oqimidan olib tashlanganligini va elementning standart ko'rsatish qiymati o'zgarishi mumkinligini tushunish ham muhimdir. Float xususiyati bloklash uchun sozlangan elementning ekran qiymatiga tayanadi va agar u blok elementi sifatida ko'rsatilmagan bo'lsa, elementning standart ko'rsatish qiymatini o'zgartirishi mumkin.
Masalan, inline sifatida ko'rsatilgan element, masalan, inline , balandlik yoki kenglik xususiyatlarini e'tiborsiz qoldiradi. Biroq, agar siz chiziqli element uchun floatni belgilasangiz, displey qiymati blokirovkaga o'zgaradi va keyin element allaqachon balandlik yoki kenglik xususiyatlarini olishi mumkin.
Elementni suzganimizda, uning displey xususiyati qiymatiga qanday ta'sir qilishiga ehtiyot bo'lishimiz kerak.
Ikkita ustun uchun siz floatni o'rnatishingiz mumkin, bitta ustun chapga, ikkinchisi o'ngga, lekin bir nechta ustunlar uchun yondashuvimizni o'zgartirishga to'g'ri keladi. Masalan, biz elementlar orasida uchta ustundan iborat qator bo'lishini xohlaymiz Va . Agar biz elementimizni tashlasak va uchta elementdan foydalaning , bizning HTML quyidagicha ko'rinishi mumkin:
Ushbu uchta elementni tartibga solish uchun uch ustunli qatorda biz barcha elementlar uchun floatni o'rnatishimiz kerak chap kabi. Shuningdek, biz kenglikni sozlashimiz kerak qo'shimcha ustunlarni hisobga olgan holda va ularni bir-birining yonida joylashtirish.
Bo'lim (suzuvchi: chap; chet: 0 1,5%; kenglik: 30%; )
Bu erda bizda uchta ustun bor, ularning barchasi teng kenglik va chekka qiymatiga ega va float chapga o'rnatiladi.
Float bilan uch ustunli tartibni namoyish qilish Tarkibni tozalash va suzish Float xususiyati dastlab kontentning tasvirlar atrofida aylanishiga imkon berish uchun ishlab chiqilgan. Tasvirga float berilishi mumkin va bu tasvir atrofidagi barcha tarkib tabiiy ravishda uning atrofida oqadi. Bu tasvirlar uchun juda yaxshi ishlayotgan bo'lsa-da, float xususiyati, aslida, tartib va joylashishni aniqlash uchun foydalanish uchun mo'ljallanmagan va shuning uchun bir nechta tuzoqlarga ega.
Ushbu tuzoqlardan biri shundaki, ba'zida tegishli uslublar suzuvchi elementga ulashgan yoki uning ota-onasi bo'lgan elementda ko'rinmaydi. Agar element suzuvchi holatga o'rnatilgan bo'lsa, u sahifaning oddiy oqimidan o'chiriladi va natijada ushbu suzuvchi element atrofidagi elementlarning uslublariga salbiy ta'sir ko'rsatishi mumkin.
Ko'pincha chekka va to'ldirish xususiyatlarining qiymatlari noto'g'ri talqin qilinadi, bu ularning suzuvchi elementga qo'shilishiga olib keladi. Boshqa xususiyatlar ham ta'sir qilishi mumkin.
Yana bir xato shundaki, ba'zida kiruvchi kontent float elementiga o'rala boshlaydi. Hujjat oqimidan elementni olib tashlash suzuvchi element atrofidagi barcha elementlarga uni chetlab o'tish va suzuvchi element atrofida har qanday bo'sh joyni egallash imkonini beradi, bu ko'pincha istalmagan.
Oldingi ikkita ustun misolimizda, elementlarga float qo'shganimizdan so'ng Va , lekin ularning birortasiga width xususiyatini o'rnatishdan oldin element ichidagi tarkib uning ustidagi ikkita soddalashtirilgan element orasida joylashgan bo'lib, barcha mavjud bo'shliqni to'ldiradi. Shuning uchun element elementlar orasidagi bo'shliqda bo'ladi
Float tozalashsiz tartibni namoyish qilish Tarkibni suzuvchi elementlar atrofida o'rashning oldini olish uchun biz floatni tozalashimiz va sahifani normal oqimiga qaytarishimiz kerak. Biz floatlarni qanday tozalashni ko'rib chiqamiz va keyin ularning mazmunini ko'rib chiqamiz.
Floatlarni tozalash Floatni tozalash bir nechta turli qiymatlarni qabul qiluvchi clear xususiyati yordamida amalga oshiriladi: eng ko'p ishlatiladigan qiymatlar chap, o'ng va ikkalasi.
Div (aniq: chap; )
Chapdagi qiymat chap suzuvchilarni tozalaydi, o'ngdagi qiymat esa o'ngdagi suzuvchilarni tozalaydi. Ikkala qiymati ham chap va o'ng suzgichlarni o'chiradi va ko'pincha eng ideal variant hisoblanadi.
Oldingi misolimizga qaytsak, agar biz elementda ikkalasining qiymati bilan aniq xususiyatdan foydalansak , keyin biz floatni tozalashimiz mumkin. Sahifani normal oqimiga qaytarish uchun avval emas, balki suzuvchi elementlardan keyin ko'rsatilgan elementga clear qo'llanilishi muhimdir.
Altbilgi (aniq: ikkalasi; )
Float tozalash bilan tartib namoyishi Kontent suzish Floatni tozalash o'rniga, yana bir variant, tarkibni float holatiga o'rnatishdir. Natija deyarli bir xil bo'ladi, lekin float tarkibi haqiqatan ham barcha uslublarimiz to'g'ri ko'rsatilishini ta'minlaydi.
Float tarkibini o'rnatish uchun suzuvchi elementlar asosiy element ichida bo'lishi kerak, u konteyner vazifasini bajaradi va hujjat oqimini undan tashqarida butunlay normal qoldiradi. Ushbu asosiy element uchun uslub bu erda ko'rsatilganidek, guruh sinfi bilan ifodalanadi:
Group::oldin, .group::after ( kontent: ""; displey: jadval; ) .group::so'ng ( toza: ikkalasi; ) .group ( aniq: ikkalasi; *kattalashtirish: 1; )
Bu erda ko'p narsa bo'lmaydi, lekin aslida CSS-ning barchasi guruh elementi ichidagi barcha suzuvchi elementlarni tozalash va hujjatni normal oqimga qaytarishdir.
Aniqroq qilib aytadigan bo'lsak, 4-darsda muhokama qilinganidek, ::oldin va ::so'ng psevdoelementlar sinf guruhiga ega bo'lgan element ustidagi va ostidagi elementlarni dinamik ravishda hosil qiladi. Ushbu elementlar hech qanday tarkibni o'z ichiga olmaydi va blok elementlariga o'xshash jadval elementlari sifatida ko'rsatiladi. Guruh elementidan keyin dinamik ravishda yaratilgan element, xuddi avvalgidek, guruh elementi ichidagi floatni tozalaydi. Nihoyat, guruh elementi chap yoki o'ng qiymatiga ega bo'lgan float mavjud bo'lsa, undan oldin paydo bo'lishi mumkin bo'lgan barcha floatlarni ham tozalaydi. Bundan tashqari, eski brauzerlarni yaxshi o'ynashga imkon beradigan kichik hiyla ham kiritilgan.
Bu yerda shunchaki aniq: ikkala buyruqdan ko'ra ko'proq kod bor, lekin bu juda foydali bo'lishi mumkin.
Ikki ustunli sahifa tartibini hisobga olsak, biz o'rashimiz mumkin Va asosiy element. Ushbu asosiy element suzuvchi elementlarni o'z ichiga oladi. Kod quyidagicha ko'rinadi:
Group::oldin, .group::after ( kontent: ""; displey: jadval; ) .group::so'ng ( toza: ikkalasi; ) .group ( aniq: ikkalasi; *zoom: 1; ) bo'lim ( float: chap ; chet: 0 1,5%; kenglik: 63%; ) chetga (suzuvchi: o'ng; chet: 0 1,5%; kenglik: 30%; )
Float mazmuni bilan maketni namoyish qilish Bu yerda koʻrsatilgan texnika “clearfix” deb nomlanadi va koʻpincha clearfix yoki cf sinf nomi bilan boshqa saytlarda koʻrinadi. Biz sinf nomi guruhidan foydalanishni tanladik, chunki u elementlar guruhini ifodalaydi va tarkibni yaxshiroq ifodalaydi.
Elementlar suzuvchi holatga o'rnatilganda, ularning sahifa oqimiga qanday ta'sir qilishini kuzatish va sahifa oqimini tozalash yoki suzuvchi tarkib orqali mo'ljallangan tarzda qayta o'rnatilishini ta'minlash muhimdir. Aks holda, floatlarni kuzatish juda ko'p bosh og'rig'iga sabab bo'lishi mumkin, ayniqsa, har birida bir nechta ustunlar bo'lgan bir nechta satrlarni o'z ichiga olgan sahifalarda.
Amalda Keling, Uslublar konferentsiyasi saytiga qaytaylik va ba'zi tarkibga float qo'shishga harakat qilaylik.
Birinchi narsa, har qanday elementga floatni qo'llashdan oldin, keling, CSS-ga aniq tuzatish qo'shish orqali ushbu suzuvchi elementlarga tarkibni taqdim qilaylik. main.css faylida, bizning panjara uslublarimiz ostida, xuddi avvalgidek, guruh klassi nomi ostida aniq tuzatish kiritamiz. /* ================================================ ====== Clearfix ======= =================================== * / .group::oldin, .group::after (kontent: " "; displey: jadval; ) .group::after ( toza: ikkalasi; ) .group ( aniq: ikkalasi; *kattalashtirish: 1; ) Endi float dan foydalanishimiz mumkin, keling, uni asosiy uchun aniqlaymiz
ichki element chap kabi va sarlavhadagi qolgan tarkibni o'ngga oqishiga ruxsat bering.Buning uchun elementga logotip sinfini qo'shing
. Keyinchalik, CSS-da biz asosiy sarlavha uchun yangi uslublar bo'limini qo'shamiz. Ushbu bo'limda biz elementni tanlaymiz logo sinfi bilan va floatni chapga o'rnating.
/* ======================================== Asosiy sarlavha ====== = ==================================== */ .logo (suzuvchi: chap; )Biz shu yerda ekanmiz, keling, logotipimizga biroz ko‘proq ma’lumot kiritaylik. Elementni joylashtirishdan boshlaylik
CSS-da biz logotipning yuqori qismiga chegara qo'shamiz va logotip erkin "nafas olishi" uchun vertikal to'ldirishni qo'shamiz.
Logotip (chegara tepasi: 4px qattiq #648880; toʻldirish: 40px 0 22px 0; float: chap; )
Biz elementni yaratganimizdan beri
soddalashtirilgan, biz tarkibni float qilib o'rnatmoqchimiz. uchun bevosita ota-ona element hisoblanadi shuning uchun biz unga guruh sinfini qo'shamiz. Bu biz ilgari o'rnatgan aniq tuzatish uslublarini qo'llaydi.
Element shakl oladi, shuning uchun elementni ko'rib chiqaylik . Biz qilgan narsaga o'xshash , biz mualliflik huquqimiz uchun floatni chap tomonda o'rnatamiz va boshqa barcha elementlar uning atrofida o'ng tomonga oqib chiqsin.
Elementdan farqli o'laroq ammo, biz sinfni to'g'ridan-to'g'ri suzuvchi elementga qo'llamoqchi emasmiz. Bu safar biz float elementining ota-onasiga sinf qo'shamiz va elementni tanlash uchun noyob CSS selektoridan foydalanamiz va keyin unga float beramiz.
Elementga birlamchi altbilgi sinfini qo'shishdan boshlaylik . Chunki biz ichimizda soddalashtirilgan elementlarga ega bo'lishini bilamiz , keyin biz u bilan shug'ullanayotganimizda guruh sinfini qo'shishimiz kerak.
Endi elementda birlamchi pastki kolontiter sinfi o'rnatilgan , biz ushbu sinfdan elementni maxsus tanlash uchun foydalanishimiz mumkin Bilan CSS yordamida . Biz unga chap kabi float berishni xohlaymiz. Asosiy altbilgi uslubi uchun main.css faylimizda yangi bo'lim yaratishni unutmang.
/* ========================================= Asosiy podval ====== ===================================== */ .asosiy-footer kichik ( float: chap; ) Tekshirish uchun - bu erda biz elementni tanlaymiz , bu bizning elementimiz kabi birlamchi altbilgining sinf atribut qiymatiga ega element ichida bo'lishi kerak
Nihoyat, elementning yuqori va pastki qismiga bir oz plomba qo'shamiz. , bu uni sahifaning qolgan qismidan biroz ajratishga yordam beradi. Biz buni to'g'ridan-to'g'ri asosiy kolontiter sinfi yordamida amalga oshirishimiz mumkin.
Asosiy kolontiter (pastki qism: 44px; toʻldirish tepasi: 44px; )
Elementlardagi barcha bu o'zgarishlarni hisobga olgan holda Va , biz ularni faqat index.html sahifasiga emas, balki har bir sahifaga kiritishimizga ishonch hosil qilishimiz kerak.
Guruch. 5.01. Bir nechta float elementlaridan foydalanish Va Uslublar konferentsiyasining asosiy sahifasida birgalikda ishlash
Inline-blok orqali joylashishni aniqlash Floatdan foydalanishdan tashqari, kontentni joylashtirishning yana bir usuli displey xususiyatidan inline-block qiymati bilan birgalikda foydalanishdir. Inline-blok usuli, biz keyinroq ko'rib chiqamiz, birinchi navbatda sahifalarni joylashtirish yoki elementlarni bir-biriga yaqin qatorda joylashtirish uchun foydalidir.
Eslatib o'tamiz, displey xususiyati uchun inline-block qiymati elementlarni bir qatorda ko'rsatadi va ularga balandlik , kenglik , to'ldirish , chegara va chekka kabi quti modelining barcha xususiyatlarini olish imkonini beradi. Inline-blokdan foydalanish har qanday floatni tozalash haqida tashvishlanmasdan blok modelidan to'liq foydalanish imkonini beradi.
amalda inline-block Keling, uchta ustunli misolimizni boshidan ko'rib chiqaylik. Biz HTMLni quyidagicha saqlashni boshlaymiz:
Endi bizning uchta elementimiz uchun float o'rniga biz ularning ko'rsatish qiymatini inline-block ga o'zgartiramiz va qoldiramiz marj xususiyatlari va kengligi avvalgidek. Natijada, bizning CSS-miz quyidagicha ko'rinadi:
Bo'lim (displey: inline-blok; chekka: 0 1,5%; kenglik: 30%; )
Afsuski, bu kodning o'zi hiyla va oxirgi elementni bajarish uchun etarli emas yangi qatorga suriladi. Esda tutingki, inline-blok elementlari bir-birining yonida joylashgan chiziqda paydo bo'lganligi sababli, ular orasida bitta bo'sh joy mavjud. Har bir alohida bo'shliqning o'lchami qatordagi barcha elementlarning kengligi va gorizontal chegara qiymatiga qo'shilsa, umumiy kenglik juda katta bo'lib, oxirgi elementni itarib yuboradi. yangi qatorga. Barcha elementlarni ko'rsatish uchun bitta satrda har biri orasidagi oq bo'shliqni olib tashlashingiz kerak
Bo'sh joy bilan inline-blok elementlarini namoyish qilish Inline-blok elementlari orasidagi bo'shliqni olib tashlash Inline-blok elementlari orasidagi bo'shliqni olib tashlashning bir necha usullari mavjud va ba'zilari boshqalarga qaraganda murakkabroq. Biz eng ko'p ikkitasiga e'tibor qaratamiz oddiy usullar , ularning har biri HTML ichida sodir bo'ladi.
Birinchi yechim har bir yangi ochiladigan element tegini qo'yishdir oldingi elementning yopilish yorlig'i bilan bir xil satrda . Foydalanish o'rniga yangi qator Har bir element uchun biz bir xil satrdagi elementlarni boshlaymiz. Bizning HTMLimiz quyidagicha ko'rinishi mumkin:
Inline-blok elementlarini shu tarzda yozish HTMLda bunday elementlar orasida bo'sh joy qolmasligini ta'minlaydi. Shuning uchun, sahifa ko'rsatilganda bo'sh joy paydo bo'lmaydi.
Bo'shliqsiz inline-blok elementlarini namoyish qilish Inline-blok elementlari orasidagi bo'shliqni olib tashlashning yana bir usuli - elementning yopish tegidan keyin darhol HTML sharhini ochish. Keyin keyingi elementning ochilish yorlig'i oldidan sharhni yoping. Bu inline-blok elementlarini HTML-da alohida satrlarda boshlash va tugatish imkonini beradi va elementlar orasidagi har qanday bo'sh joyni "sharhlaydi". Olingan kod quyidagicha ko'rinadi:
Ushbu variantlarning hech biri mukammal emas, lekin ular foydalidir. Men yaxshiroq tashkil qilish uchun sharhlardan foydalanishni afzal ko'raman, ammo qaysi variantni tanlashingiz butunlay sizga bog'liq.
Qayta foydalanish mumkin bo'lgan sxemalarni yarating Saytni qurishda har doim boshqa joyda qayta ishlatilishi mumkin bo'lgan modulli uslublarni yozish yaxshidir va qayta foydalanish mumkin bo'lgan tartiblar qayta foydalanish mumkin bo'lgan kodlar ro'yxatining yuqori qismida joylashgan. Layouts floats yoki inline-blok elementlari yordamida yaratilishi mumkin, ammo qaysi biri eng yaxshi ishlaydi va nima uchun?
Sahifa tuzilishi uchun suzuvchi yoki inline-blok elementlari yaxshiroqmi degan savol munozara uchun ochiq. Mening yondashuvim - panjara yoki sahifa tartibini yaratish uchun inline-blok elementlaridan foydalanish va keyin kontent element atrofida aylanishini xohlaganimda floatdan foydalanish (bu tasvirlar bilan ishlashda floatlar uchun mo'ljallangan). Umuman olganda, men ham inline-blok elementlari bilan ishlashni osonlashtiraman.
Biroq, siz uchun eng mos keladiganidan foydalaning. Agar siz bir yondashuvni boshqasidan ko'ra ko'proq bilsangiz, undan foydalaning.
Ishda yangi CSS spetsifikatsiyalari mavjud, xususan, moslashuvchan va grid xususiyatlari - bu sizning sahifalaringizni qanday joylashtirishni tanlashga yordam beradi. Ushbu usullar paydo bo'lganda ularni kuzatib boring.
Amalda Qayta foydalanish mumkin bo'lgan maketlarni qat'iy tushungan holda, uslublar konferentsiyasi saytimizda uni amalga oshirish vaqti keldi.
Uslublar konferentsiyasi veb-sayti uchun biz inline-blok elementlaridan foydalangan holda uch ustunli tartibni yaratamiz. Buni shunday qilamizki, biz bir xil kenglikdagi uchta ustunni yoki umumiy kengligi ularning o'rtasida 2/3, ikkinchisi uchun 1/3 sifatida bo'lingan ikkita ustunni olamiz.
Birinchidan, biz ushbu ustunlar kengligini aniqlaydigan sinflarni yaratamiz. Biz bu ikki sinfni uchdan bir qismi uchun col-1-3 va uchdan ikkisi uchun col-2-3 deb nomlaymiz. main.css faylimizning Grid bo'limida keling, oldinga siljiymiz va bu sinflarni va ularga mos keladigan kengliklarni aniqlaymiz.
Col-1-3 (kengligi: 33,33%; ) .col-2-3 (kengligi: 66,66%; )
Biz ikkala ustun ham inline blok elementlari sifatida ko'rinishini xohlaymiz. Shuningdek, ularning vertikal hizalanishi har bir ustunning tepasiga o'rnatilganligiga ishonch hosil qilishimiz kerak.
Keling, displeyni va vertikal tekislashni taqsimlovchi ikkita yangi selektor yarataylik.
Col-1-3, .col-2-3 (displey: inline-blok; vertikal tekislash: tepa; )
CSS-ni qayta ko'rib chiqing. Biz vergul bilan ajratilgan ikkita col-1-3 va col-2-3 sinf selektorlarini yaratdik. Birinchi selektor oxiridagi vergul undan keyin boshqa selektor kelishini bildiradi. Ikkinchi selektordan keyin ochiladigan jingalak qavs bor, bu uslub tavsifi boshlanishini bildiradi. Selektorlarni ajratish uchun vergul yordamida biz bir vaqtning o'zida bir nechta selektorga bitta uslubni bog'lashimiz mumkin.
Tarkibni buzishga yordam berish uchun ustunlar orasiga biroz bo'sh joy qo'ymoqchimiz. Buni har bir ustunga gorizontal plomba qo'shish orqali amalga oshirish mumkin.
Bu yaxshi ishlaydi, ammo ikkita ustun bir-birining yoniga qo'yilganda, ular orasidagi bo'shliqning kengligi tashqi chetidan ikki barobar kengroq bo'ladi. Buni muvozanatlash uchun biz barcha ustunlarimizni to'rga joylashtiramiz va unga bir xil to'ldirishni qo'shamiz.
Keling, grid sinfini to'rimizni aniqlash uchun ishlatamiz va keyin grid, col-1-3 va col-2-3 sinflariga bir xil gorizontal to'ldirishni beramiz. Selektorlarimizni yana vergul bilan ajratib, bizning CSS quyidagicha ko'rinadi:
Grid, .col-1-3, .col-2-3 (to‘ldirish-chap: 15px; to‘ldirish-o‘ng: 15px; )
Gorizontal to'ldirishni o'rnatganimizda, ehtiyot bo'lishimiz kerak. Esingizda bo'lsin, oxirgi darsda biz barcha tarkibimizni 960 piksel kenglikdagi sahifaga markazlashtirish uchun konteyner sinfiga ega konteyner yaratdik. IN bu daqiqa , agar biz panjara klassi boʻlgan elementni konteyner klassi boʻlgan element ichiga joylashtirgan boʻlsak, ularning gorizontal toʻldirilishi bir-biriga qoʻshiladi va bizning ustunlarimiz sahifaning qolgan qismining kengligiga mutanosib ravishda koʻrsatilmaydi.
Biz buni eski konteyner qoidalarini quyidagilarga bo'lish orqali qilamiz:
Konteyner, .grid ( hoshiya: 0 avtomatik; kenglik: 960px; ) .konteyner ( toʻldirish-chap: 30px; toʻldirish-oʻng: 30px; )
Endi konteyner yoki panjara sinfiga ega har qanday element 960 piksel kengligida va sahifaning markazida joylashgan bo'ladi. Bundan tashqari, biz konteyner sinfiga ega har qanday element uchun mavjud gorizontal toʻldirishni yangi, alohida qoidalar toʻplamiga koʻchirish orqali saqlab qoldik.
To'rni o'rnatishning barcha qiyin qismi tugallandi. Endi bizning HTML bilan ishlash va bu sinflar qanday ishlashini ko'rish vaqti keldi.
Bosh sahifada, index.html faylida, uchta ustunga tekislangan tizerlardan boshlaymiz. Hozirda tizerlar elementga o'ralgan konteyner sinfi bilan. Ichkarida ustunlarni joylashtirishni boshlashimiz uchun biz konteyner sinfini gridga o'zgartirmoqchimiz.
...
...
...
...
Va nihoyat, har bir ustunimiz inline blok elementi bo'lganligi sababli, biz ular orasidagi bo'sh joyni olib tashlashimizga ishonch hosil qilishimiz kerak. Buning uchun biz sharhlardan foydalanamiz va kodimizni yaxshiroq tartibga solish uchun har bir bo'limga ba'zi hujjatlarni qo'shamiz.
...
...
...
Tekshirish uchun biz 3-qatorda undan keyingi "Speakers" bo'limini aniqlaydigan sharh qoldirdik. 7-qator oxirida biz yopish tegidan keyin darhol izoh ochamiz. Ushbu sharhning 9-qatorida biz quyidagi bo'limni belgilaymiz "Jadval". Keyin 11-qator boshida, ochilish yorlig'i oldidagi izohni yoping . Shunga o'xshash sharh tuzilishi ikki element orasidagi 13 dan 17 gacha satrlarda paydo bo'ladi , Joy boʻlimidan toʻgʻri oldin. Umuman olganda, biz ustunlar orasidagi har qanday bo'sh joyni izohladik, shu bilan birga bo'limlarimizni aniqlash uchun bir xil izohlardan foydalandik.
Endi bizda 1/3 va 2/3 ustun kengligidan foydalangan holda turli tartiblarni qo'llab-quvvatlaydigan qayta foydalanish mumkin bo'lgan uch ustunli panjara mavjud. Bizning bosh sahifamiz endi barcha tizerlarni ajratib turadigan uchta ustundan iborat.
Guruch. 5.02. Bosh sahifa Uslublar konferentsiyasi endi uch ustunli tartibni o'z ichiga oladi
Demo va manba kodi Quyida siz Styles Conference veb-saytini hozirgi holatida ko'rishingiz va yuklab olishingiz mumkin manba kodi hozirda sayt.
Noyob element joylashuvi Ertami-kechmi hamma elementni aniq joylashtirishni xohlaydi, lekin float yoki inline-blok elementlari bunday hiylaga yo'l qo'ymaydi. Sahifaning oqimidan elementni olib tashlaydigan suzuvchi elementlar ko'pincha istalmagan natijalarni keltirib chiqaradi, chunki atrofdagi elementlar suzuvchi elementni o'rab oladi. Inline blok elementlari, agar biz ustunlar yaratmasak, to'g'ri joylashtirishga kelganda juda qiyin bo'lishi mumkin. Shunga o'xshash holatlar uchun biz pozitsiya xususiyatidan blokning ofset xususiyatlari bilan birgalikda foydalanishimiz mumkin.
Pozitsiya xususiyati elementning sahifada qanday joylashishini va u oddiy hujjat oqimida ko'rsatilishini aniqlaydi. U blokning yuqori, o'ng, pastki va chap tomondagi ofset xususiyatlari bilan birgalikda ishlatiladi, ular elementni turli yo'nalishlarda siljitish orqali elementning aniq joylashishini aniqlaydi.
Odatiy bo'lib, har bir elementning joylashuv qiymati statik ga o'rnatiladi, ya'ni element hujjatning normal oqimida mavjud va uni joylashtirish uchun hech qanday xususiyatni olmaydi. Statik qiymat ko'pincha nisbiy yoki mutlaq qiymat bilan qayta yoziladi, biz buni keyin ko'rib chiqamiz.
Nisbiy joylashishni aniqlash Pozitsiya xususiyatini nisbiyga o'rnatish elementlarning sahifaning normal oqimida paydo bo'lishiga imkon beradi, element uchun bo'sh joyni mo'ljallangan tarzda ajratadi va boshqa elementlarning uning atrofida oqib chiqishini oldini oladi. Shu bilan birga, u ofset xususiyatlaridan foydalangan holda elementning o'rnini o'zgartirishga ham imkon beradi. Masalan, quyidagi HTML va CSS-ni ko'rib chiqing:
...
...
...
Div (balandligi: 100px; eni: 100px; ) .ofset (chap: 20px; pozitsiya: nisbatan; tepa: 20px; )
Nisbatan joylashishni aniqlash namoyishi Bu erda ikkinchi element uchun
ofset sinfi bilan pozitsiya qiymati nisbiy o'rnatiladi, shuningdek, ikkita ofset xususiyati - chap va yuqori. Bu elementning asl holatini saqlab qoladi va boshqa elementlarning ushbu hududga o'tishiga ruxsat berilmaydi. Bundan tashqari, ofset xususiyatlari elementni asl joydan chapdan 20 pikselga va yuqoridan 20 pikselga surish orqali harakatlantiradi.
Nisbatan joylashtirilgan elementlar uchun blokning ofset xususiyatlari elementning dastlabki holatini hisobga olgan holda qaerga ko'chirilishini aniqlashini bilish muhimdir. Shunday qilib, qiymati 20 piksel bo'lgan chap xususiyat aslida elementni o'ngga 20 pikselga suradi. 20px qiymatiga ega boʻlgan yuqori xususiyat elementni 20px pastga suradi.
Biz elementni ofset xususiyatlaridan foydalangan holda joylashtirganimizda, element chegara yoki to'ldirish xususiyatlari kabi pastga surish o'rniga, uning ostidagi elementni yopishadi.
Mutlaq joylashishni aniqlash Pozitsiya xususiyati uchun mutlaq qiymat nisbiy qiymatdan farq qiladi, chunki mutlaq joylashtirilgan element hujjatning normal oqimida ko'rinmaydi va mutlaq joylashtirilgan elementning asl maydoni va pozitsiyasi saqlanmaydi.
Bundan tashqari, mutlaq joylashtirilgan elementlar eng yaqin nisbiy joylashtirilgan asosiy elementga nisbatan harakatlanadi. Agar nisbatan joylashtirilgan ota-ona mavjud bo'lmasa, u holda mutlaq joylashtirilgan element elementga nisbatan joylashtiriladi
. Bu kichik ma'lumot; Keling, ba'zi kodlar ichida qanday ishlashini ko'rib chiqaylik:
Bo'lim (pozitsiya: nisbiy; ) div (pozitsiya: mutlaq; o'ng: 20 piksel; tepa: 20 piksel; )
Mutlaq joylashishni aniqlash namoyishi Ushbu misolda element nisbatan joylashtirilgan, lekin hech qanday ofset xususiyatlarini o'z ichiga olmaydi. Shuning uchun uning pozitsiyasi o'zgarmaydi. Element ofset sinfi bilan pozitsiya qiymatini mutlaq sifatida o'z ichiga oladi. Elementdan beri
nisbatan eng yaqin joylashgan asosiy element hisoblanadi , keyin element
elementga nisbatan joylashadi
.Nisbatan joylashtirilgan elementlar uchun ofset xususiyatlari elementning o'ziga nisbatan qaysi yo'nalishda harakatlanishini aniqlaydi. Mutlaq joylashtirilgan elementlar uchun ofset xususiyatlari elementning eng yaqin nisbiy joylashtirilgan ota-onasiga nisbatan qaysi yo'nalishda harakatlanishini aniqlaydi.
O'ng va yuqori xususiyatlar natijasida element
o'ngdan 20 piksel va yuqoridan ichki tomondan 20 piksel paydo bo'ladi
.Elementdan beri
to'liq joylashtirilgan bo'lsa, u sahifaning normal oqimida joylashmaydi va uni o'rab turgan har qanday elementlarni bir-biriga yopishadi. Bundan tashqari, boshlang'ich pozitsiyasi
saqlanmaydi va boshqa elementlar bu joyni egallashi mumkin. Umuman olganda, joylashishni aniqlashning aksariyati joylashuv xususiyatlari va ofset xususiyatlaridan foydalanmasdan amalga oshirilishi mumkin, lekin ba'zi hollarda ular juda foydali bo'lishi mumkin.
Xulosa HTML va CSS-da kontentni qanday joylashtirishni o'rganish bu tillarni o'zlashtirish yo'lidagi katta qadamdir. Bunga blokli modelni qo'shing va biz front-end dasturchi bo'lish yo'lidamiz.
Ushbu o'quv maqolasi sahifadagi elementlarni joylashtirish bilan bog'liq bo'lgan juda muhim mavzuga bag'ishlangan bo'lib, sizdan maksimal darajada e'tibor talab qiladi. Siz elementlarni joylashtirishning quyidagi turlari bilan tanishasiz: mutlaq , qarindosh , belgilangan Va statik .
Joylashuvni aniqlash sizga u yoki bu elementni kerakli joyga joylashtirish imkonini beradi, ushbu maqolaning maqsadi bu qanday qoidalar bilan sodir bo'lishini, qanday CSS xususiyatlaridan foydalanish kerakligini va nima uchun kerakligini tushunishdir.
Elementlarni joylashtirish turlari
Asoslar CSS xususiyati Sahifadagi elementlarning joylashishini boshqarishga imkon beradigan narsa bu pozitsion xususiyat bo'lib, u brauzerga element uchun qanday joylashishni aniqlash turidan foydalanilayotganligini bildiradi ( statik -statik qarindosh - qarindosh, mutlaq – mutlaq yoki belgilangan - belgilangan).
Elementlarning har qanday sahifada qanday joylashishini to'liq tushunish uchun siz joylashishni aniqlashning barcha turlarini batafsil o'rganishingiz kerak. Ushbu o'quv maqolasi sizga bunday imkoniyatni taqdim etadi, endi biz har bir joylashtirish turi haqida alohida gaplashamiz va hujjatdagi elementlarning siljishi qanday va nimaga nisbatan sodir bo'lishini tahlil qilamiz.
Mutlaq joylashishni aniqlash
Siz sezganingizdek, mavjud elementlar mutlaq joylashishni aniqlash , asosiy sahifa oqimidan ajratilgan , bu elementlarning bir-birining ustiga qatlamlanishiga olib kelishi mumkin. Yana bir nuance mavjud elementlar bilan ishlash mutlaq joylashishni aniqlash , ular shunday suzuvchi bo'lishi mumkin emas . Suzuvchi elementlar faqat mavjud bo'lgan elementlar bo'lishi mumkin statik joylashishni aniqlash (statik), ya'ni element uchun sukut bo'yicha o'rnatilgan. Biz suzuvchi elementlar bilan ishlash usullarini darslikning "" maqolasida muhokama qildik.
Nisbiy joylashishni aniqlash
Biz ko'rib chiqadigan keyingi joylashuv turi nisbiy joylashuv (joylashuvi: nisbiy) siljiydi (joylashtiriladi), yoki boshqacha aytganda.
Keling, to'g'ridan-to'g'ri misolga o'taylik va keyin u bilan ishlashda yuzaga keladigan barcha nuanslar haqida gapiraylik
</span> Elementlarning nisbiy joylashishi
statik
sinf = "nisbiy" > qarindosh
sinf = "statik" > statik
Shunday qilib, biz ushbu misolda nima qildik:
Bloklar uchun (elementlar ), bor
statik joylashishni aniqlash (standart) balandlikni 50 pikselga va fon rangini - ga o'rnating.
qizil .
bilan elementni joylashtirdik nisbiy joylashishni aniqlash (pozitsiya : nisbiy), balandligini 100 pikselga va fon rangiga o'rnating yashil . Bundan tashqari, u ko'rsatilgan hozirgi holatiga nisbatan harakat qiladi yuqori chetidan 50 pikselga, chap chetidan esa 100 pikselga, hujjatning to'lib ketishiga olib keladi.
Bizning misolimiz natijasi:
Bundan farqli o'laroq, bu misoldan shuni ta'kidlash kerak mutlaq joylashishni aniqlash hujjatdagi boshqa elementlar elementlarga munosabat bildiradi nisbiy joylashishni aniqlash . Brauzerga elementni ko'chirish buyrug'ini berganimizga qaramay, brauzer element uchun joy ajratdi va element ko'chirishdan oldin dastlab bo'lishi kerak bo'lgan bo'sh joy qoldirdi.
Amalda, siz mavjud bo'lgan elementlarni ko'chirishingiz shart emas nisbiy joylashuv . asosiy fikr; asosiy g'oya nisbiy joylashishni aniqlash elementni biror joyga ko'chirish emas, balki ega bo'lgan element uchun "konteyner" yarating mutlaq joylashishni aniqlash
. Boshqacha qilib aytganda, ichki o'rnatilgan elementlar brauzer oynasining chetiga nisbatan emas, balki ushbu elementga nisbatan ofset qilinadi, ular nisbiy joylashuv va joylashgan asosiy hujjat mavzusida . Ushbu qo'llanmaning keyingi qismida biz ushbu fikrni batafsil ko'rib chiqamiz.
Ruxsat etilgan joylashuv
Uchinchi biz ko'rib chiqamiz joylashishni aniqlash turi qat'iy joylashishni aniqlash element harakat qiladi brauzer oynasining berilgan chetiga nisbatan . O'ziga xos xususiyat Bu joylashuv sahifani aylantirganda element bir joyda qoladi , ya'ni taxminan aytganda, u sahifa bilan birga aylanadi (element o'rnatilgan).
O'ylaymanki, Internetda sayohat qilish paytida siz tez-tez navigatsiya menyulari, yon panellar yoki hatto bir joyda o'rnatilgan "sahifaning yuqorisi" tugmachalariga duch kelgansiz. Bularning barchasi tufayli mumkin bo'ladi qat'iy joylashishni aniqlash .
Keling, biz qattiq yon panelni loyihalashimiz mumkin bo'lgan misolni ko'rib chiqaylik.
</span> Ruxsat etilgan element joylashuvi
belgilangan
class = "konteyner" >
Keling, ushbu misolda nima qilganimizni ko'rib chiqaylik:
Elementlar uchun o'rnatish Va balandligi 100% ga teng, bu yon panelimiz uchun balandlikni foizda belgilash imkonini beradi. Bundan tashqari, biz ushbu elementlarning chekkalarini olib tashladik, bu brauzerning o'rnatilgan uslublarini olib tashlash uchun kerak.
Yon panelimiz uchun balandlikni asosiy elementga (100%) o'rnating, kenglikni asosiy elementning 15% ga o'rnating va fon rangini o'rnating. qizil . Shuningdek, bizning yon panelimiz borligini ta'kidladi qat'iy joylashishni aniqlash , bu esa ekranga yopishib qolgandek tuyulishiga imkon beradi. Panelimiz o'ng tomonda paydo bo'lishi uchun biz to'g'ri qiymatni 0 ga qo'ydik (brauzer oynasining o'ng chetidan joylashtirilgan elementning siljishi).
Namoyish uchun qat'iy joylashishni aniqlash biz balandligi 2000 piksel bo'lgan konteyner yaratdik. Endi biz sahifani aylantirsak, bizning yon panelimiz joyida qoladi, lekin konteyner tarkibi (asosiy tarkib) aylantiriladi.
Bizning misolimiz natijasi:
Statik joylashishni aniqlash
Xo'sh, joylashishni aniqlashning oxirgi turi statik joylashishni aniqlash (statik), siz va men bu haqda bir necha bor gaplashganmiz. Statik joylashishni aniqlash bu klassik oqimda HTML hujjati
Men sizning e'tiboringizni bir haqiqatga qaratmoqchiman, yuqorida muhokama qilingan elementlarning siljishi uchun javobgar bo'lgan xususiyatlarni ega bo'lgan elementlarga qo'llash mumkin emas. statik joylashishni aniqlash , ya'ni ular sukut bo'yicha o'rnatiladigan joylashuvga ega.
Murakkab mutlaq joylashishni aniqlash
Murakkab ilovalarga o'tishdan oldin mutlaq joylashishni aniqlash , Men sizning e'tiboringizni qaratmoqchiman, agar siz ko'rsatma bilan elementning vertikal joylashuvi qiymati mutlaq joylashishni aniqlash (yuqori yoki pastki) yoki aksincha gorizontal holatga (chapga yoki o'ngga), keyin brauzer elementni umumiy oqimdagi sahifaning o'sha joyida qoldiradi (agar mavjud bo'lsa, tarkibning tepasiga joylashtiriladi).
Biz allaqachon element bilan ekanligini bilib oldik mutlaq joylashishni aniqlash (pozitsiya : mutlaq ) joylashtirilgan ajdodining berilgan chetiga nisbatan , va ajdod qiymat pozitsiyasiga ega bo'lishi kerak standartdan farq qiladi -statik aks holda hisoblash (siljish) amalga oshiriladi brauzer oynasining belgilangan chetiga nisbatan . Bunday misolni ko'rib chiqish vaqti keldi:
</span> Ajdodga nisbatan mutlaq joylashish
qarindosh
class = "konteyner" > idish
sinf = "mutlaq" > mutlaq
Keling, ushbu misolda nima qilganimizni batafsil ko'rib chiqaylik:
Boshlash uchun biz blokni joylashtirdik (element ), bor
nisbiy joylashuv . Biz buning uchun yuqoridan (chekka-yuqori) 100 pikselga teng bo'lgan ichki chegarani belgilab oldik, fonning kengligi, balandligi va rangini o'rnatdik.
Keyinchalik, uning ichiga blok elementi joylashtirildi (element ), balandligi 100 piksel va fon rangiga ega
sariq . Siz tushunganingizdek, bu element mavjud
statik joylashishni aniqlash (standart qiymat) joylashuv xususiyati qiymatidan beri
meros qilib olinmagan , va u asosiy blokdan meros bo'lmadi
nisbiy joylashuv .
Keyin biz konteyner ichiga joylashtirdik statik joylashishni aniqlash ega bo'lgan element mutlaq joylashishni aniqlash . Uning kengligi va balandligini 50 pikselga va fon rangiga o'rnating qizil . E'tibor bering, eng muhim jihat shundaki, bu element brauzer oynasiga nisbatan emas, asosiy elementga nisbatan emas, balki statikdan boshqa joylashuvga ega bo'lgan ajdodiga nisbatan joylashtirilgan! Natijada, biz elementimizni uning ajdodining yuqori o'ng burchagiga joylashtirdik nisbiy joylashishni aniqlash .
Bizning misolimiz natijasi:
Keling, ushbu o'quv maqolasida elementlarni joylashtirish bo'yicha nimani o'rganganimizni umumlashtiramiz:
Statik joylashishni aniqlash bu klassik elementlarni yuqoridan pastgacha joylashtirish (ob'ektlar ro'yxatga olingan tartibda ko'rsatiladi HTML hujjat oqimida ), u barcha elementlar uchun standart qiymat hisoblanadi.Element joylashtirilgan brauzer oynasiga nisbatan agar u bor bo'lsa qat'iy joylashishni aniqlash (element hujjatni aylantirishda o'rnatiladi).
Element joylashtirilgan brauzer oynasiga nisbatan agar u bor bo'lsa mutlaq joylashishni aniqlash , va u dan boshqa joylashuvga ega bo'lgan element ichiga joylashtirilmagan statik
.
U o'rnatilgan element nisbiy joylashuv siljishlar hujjat oqimidagi pozitsiyaga nisbatan (hozirgi lavozimiga nisbatan ).
Element joylashtirilgan boshqa elementning tomonlariga nisbatan agar u ajdodi yoki ota-onasi bor mutlaq , qarindosh yoki belgilangan joylashishni aniqlash .
Mavzu bo'yicha savol va topshiriqlar
Keyingi mavzuga o'tishdan oldin amaliy topshiriqni bajaring:
2016-2019 Denis Bolshakov, siz saytdagi sharh va takliflaringizni [email protected] manziliga yuborishingiz mumkin
Rasmni o'ngga qanday tekislash kerak
Bir nechta jumlalardan iborat uzun paragraf. Unda bayroqlangan xususiyatni tavsiflovchi matn va o'ng tomonning chetiga bosiladigan rasm mavjud.
Elementni oqimdan olib, uni ota-onaning chap yoki o'ng tomonining chetiga suradi. Kodda joylashgan elementlar va matn suzuvchi elementdan keyin uning atrofida qarama-qarshi tomondan oqadi.
Meroslanmagan, barcha elementlarga tegishli. oqimdan elementni oladi va uni qolgan tarkibning ustiga qo'yadi. U yuqori , o'ng , pastki , chap xususiyatlaridan foydalanib, statikdan boshqa pozitsiya qiymatiga ega bo'lgan ota-onasining chegaralariga nisbatan ko'chirilishi mumkin. Qachon yo'nalish: ltr; chap xususiyat auto ga o'rnatilmagan bo'lsa, chap xususiyat o'ng xususiyatdan ustun turadi.
Bir nechta jumlalardan iborat uzun paragraf.
Unda bayroqlangan xususiyatni tavsiflovchi matn va o'ng tomonning chetiga bosiladigan rasm mavjud.
Mulk
matnni tekislash meros qilib olingan, blok elementlariga qo'llaniladi.
Barcha kiritilgan elementlarni va matnni gorizontal ravishda tekislaydi. U elementni o'zi yoki bloklarni siljitmaydi va agar inline elementga berilgan bo'lsa, ishlamaydi. U bir nechta ma'noga ega, jumladan
to'g'ri, kontentni o'ngga ko'chirish imkonini beradi.
Mulk
chekka-chap meros emas, barcha elementlar uchun amal qiladi.
Buning ma'nosi bor
avto, bu blok elementini gorizontal ravishda tekislaydi. Aynan
chap chekka: avtomatik; elementni ota-onaning o'ng chetiga suradi. Bu pozitsiya mulk tomonidan o'zgartirilishi mumkin
chekka o'ng..html">Qachon
chap chekka: avtomatik; Va
o'ng chekka: avtomatik; element ajdodning kengligiga markazlashtirilgan holda joylashtiriladi.
Mulk
suzmoq meros emas, barcha elementlar uchun amal qiladi.
Elementni oqimdan olib, uni ota-onaning chap yoki o'ng tomonining chetiga suradi. Kodda joylashgan elementlar va matn suzuvchi elementdan keyin uning atrofida qarama-qarshi tomondan oqadi.
Mulk
pozitsiya meros emas, barcha elementlar uchun amal qiladi.
pozitsiyasi: mutlaq; oqimdan elementni oladi va uni qolgan tarkibning ustiga qo'yadi. U qiymati bo'lgan ota-ona chegaralariga nisbatan ko'chirilishi mumkin
pozitsiya dan farqli
statik, xususiyatlardan foydalanish
yuqori,
to'g'ri,
pastki,
chap. Da
yo'nalishi: ltr; mulk
chap mulkdan ustun turadi
to'g'ri, mulkdan tashqari
chap ma'noga ega
avto.
Mulk ko'rsatish meros emas, barcha elementlarga tegishli..html">teg stol, A stol-hujayra — td.
Maslahat: yoqilgan
bu misolda Brauzer oynasining o'lchami kichraytirilganda rasm qanday harakat qilishini ko'rish qiziq.
Matnni o'ngga qanday tekislash kerak
O'ng tomonda qisqa matn
O'ng tomonda qisqa matn
Tegishli materiallar:
gorizontal html tekislash yangilandi html asoslash yangilanmoqchi
Blokni o'ngga qanday tekislash kerak
Element ota-onaning balandligi yoki kengligiga ta'sir qilmaydi va uning to'lib ketishiga olib kelmaydi.
Agar float tozalanmasa, element ota-onaning balandligiga ta'sir qilmaydi.
Bir nechta bloklarni o'ngga qanday tekislash kerak
chegara: 0 100% 0 -100%;
/* boshqa oʻram qoʻshishingiz shart emas, lekin oldingi uslubda transformni belgilang: translate(-100%, 0); */ fon: yashil; )
CSS HTML hujjatining tartibiga elementlar daraxti sifatida qaraydi. Asosiy elementi bo'lmagan noyob element chaqiriladi ildiz element. CSS Positioning moduli hujjatning tartibidan qat'i nazar (ya'ni "oqimdan" olib tashlangan) elementlardan qanday birini joylashtirish mumkinligini tavsiflaydi.
CSS2 da hujjat daraxtidagi har bir element quti modeliga amal qilgan holda nol yoki undan ortiq qutilarni hosil qiladi. CSS3 moduli joylashishni aniqlash sxemasini to'ldiradi va kengaytiradi. Ushbu bloklarning joylashuvi tartibga solinadi:
elementning o'lchami va turi,
joylashishni aniqlash sxemasi (normal oqim, oqim va mutlaq joylashishni aniqlash),
hujjat daraxtidagi elementlar o'rtasidagi munosabatlar,
tashqi ma'lumotlar (masalan, ko'rish oynasi o'lchami, ichki tasvir o'lchamlari va boshqalar).
Joylashuv sxemalari
CSS-da element bloki uchta joylashishni aniqlash sxemasiga muvofiq joylashtirilishi mumkin:
1. Oddiy oqim
Oddiy oqim blok formatlash kontekstini (displey bloki, roʻyxat elementi yoki jadvali boʻlgan elementlar), inline formatlash konteksti (inline , inline-block yoki inline-jadvalli elementlar) hamda blok darajasidagi elementlarning nisbiy va yopishqoq joylashuvini oʻz ichiga oladi. chiziqlar.
2. Atrofda oqim
Oqim modelida blok oddiy oqimdan chiqariladi va chapga yoki o'ngga joylashtiriladi. Kontent float bilan elementning o'ng tomoniga o'raladi: chap va float bilan elementning chap tomoni: o'ng .
3. Mutlaq joylashishni aniqlash
Mutlaq joylashishni aniqlash modelida blok oddiy oqimdan butunlay chiqariladi va o'z ichiga olgan blokga nisbatan pozitsiya beriladi. Mutlaq joylashishni aniqlash qiymatlar pozitsiyasi yordamida amalga oshiriladi: mutlaq; va pozitsiyasi: qattiq; .
"Oqimdan tashqari" element float, mutlaqo joylashtirilgan element yoki ildiz elementi bo'lishi mumkin.
Umuman olganda, o'z ichiga olgan blok boshqa elementni o'z ichiga olgan blokdir. Oddiy oqim holatida, ildiz html elementi tana elementi uchun o'z ichiga olgan blok bo'lib, u o'z navbatida uning barcha pastki elementlari uchun o'z ichiga olgan blokdir va hokazo. Joylashuv holatida, o'z ichiga olgan blok butunlay joylashishni aniqlash turiga bog'liq.
Pozitsiyali ildiz bo'lmagan element uchun: statik; yoki pozitsiyasi: nisbiy; uni o'z ichiga olgan blok eng yaqin ota-blok, jadval-hujayra yoki qator-darajali blokning kontent maydonining chetidan hosil bo'ladi.
Pozitsiyali ildiz bo'lmagan element uchun: mutlaq; uni o'z ichiga olgan blok eng yaqin joyga o'rnatiladi asosiy element bu kabi statikdan boshqa pozitsiya qiymati bilan:
agar ajdod blok darajasidagi element bo'lsa, o'z ichiga olgan blok tarkib maydoni va elementning to'ldirish qismi bo'ladi;
agar ajdod chiziq darajasidagi element bo'lsa, o'z ichiga olgan blok kontent maydoni bo'ladi;
agar ajdodlar bo'lmasa, elementni o'z ichiga olgan blok boshlang'ich o'z ichiga olgan blok sifatida aniqlanadi.
"Yopishqoq" blok uchun o'z ichiga olgan blok aylantiriladigan yoki ko'rish oynasining eng yaqin ajdodidir, aks holda.
2. Joylashuv sxemasini tanlash: joylashish xususiyati
Pozitsiya xususiyati blokning o'rnini hisoblash uchun qaysi joylashishni aniqlash algoritmidan foydalanishni aniqlaydi.
Mulk meros qilib olinmaydi.
pozitsiya
Ma'nosi:
statik
Blok normal oqimga mos ravishda joylashtirilgan. Yuqori , o'ng , pastki va chap xususiyatlari qo'llanilmaydi. Standart qiymat.
qarindosh
Blokning holati normal oqimga qarab hisoblanadi. Keyin blok normal holatidan siljiydi va barcha holatlarda, shu jumladan jadval elementlari, keyingi bloklarning holatiga ta'sir qilmaydi. Biroq, bunday ofset bir-birining ustiga chiqadigan bloklarga, shuningdek, agar ortiqcha bo'lsa, aylantirish paneliga olib kelishi mumkin. Nisbatan joylashtirilgan blok o'z o'lchamlarini, shu jumladan chiziqli uzilishlarni va dastlab unga ajratilgan joyni saqlab qoladi.
Nisbatan joylashtirilgan blok o'zining mutlaqo joylashtirilgan bolalari uchun yangi o'z ichiga olgan blokni yaratadi.
Ta'sir etuvchi pozitsiya: nisbiy; jadval elementlari bo'yicha quyidagicha aniqlanadi:
mutlaq
Blokning joylashuvi (va ehtimol o'lchami) yuqori , o'ng , pastki va chap xususiyatlaridan foydalangan holda belgilanadi. Bu xususiyatlar o'z ichiga olgan blokga nisbatan aniq ofsetni belgilaydi. Mutlaqo joylashtirilgan bloklar oddiy oqimdan singil elementlarning joylashishiga ta'sir qilmasdan butunlay chiqariladi. Mutlaq joylashtirilgan bloklarning chekkalari yiqilmaydi.
Mutlaq joylashtirilgan blok normal oqim bolalar va pozitsiyasi bo'lgan bolalar uchun yangi o'z ichiga olgan blokni yaratadi: mutlaq; .
Mutlaq joylashtirilgan elementning mazmuni boshqa bloklarga o'ralmaydi. Mutlaqo joylashtirilgan blok bir-biriga yopishgan bloklarning z-indeks qiymatiga qarab, boshqa blokning mazmunini yashirishi mumkin (yoki o'zi yashirin bo'lishi mumkin).
yopishqoq
Blokning holati normal oqimga qarab hisoblanadi. Keyin blok o'zining eng yaqin aylanuvchi ajdodiga yoki agar ota-bobolarning hech birida aylantirish bo'lmasa, ko'rish oynasiga nisbatan ofset qilinadi. Yopishqoq blok boshqa bloklarni bir-biriga yopishi mumkin va agar u to'lib ketgan bo'lsa, aylantirish satrlarini yaratishi mumkin.
Yopishqoq blok o'z o'lchamlarini, shu jumladan chiziqli uzilishlarni va dastlab unga ajratilgan joyni saqlab qoladi.
Yopishqoq blok mutlaqo va nisbatan joylashtirilgan bolalar uchun yangi o'z ichiga olgan blokni yaratadi.
belgilangan
Ruxsat etilgan joylashuv mutlaq joylashishni aniqlashga o'xshaydi, faqat o'z ichiga olgan blok uchun ko'rish oynasi o'rnatilgan. Bunday blok hujjat oqimidan butunlay olib tashlanadi va hujjatning biron bir qismiga nisbatan hech qanday pozitsiyaga ega emas. Ruxsat etilgan bloklar hujjatni aylantirganda harakatlanmaydi. Shu jihatdan ular sobit fon tasvirlariga o'xshaydi. Chop etishda har bir sahifada sobit bloklar takrorlanadi, o'z ichiga olgan blok ular uchun sahifa maydonini belgilaydi. Sahifa maydonidan kattaroq bo'lgan qat'iy pozitsiyali bloklar kesiladi.
boshlang'ich
Xususiyat qiymatini standart qiymatga o'rnatadi.
meros
Asosiy elementdan xususiyat qiymatini meros qilib oladi.
Sintaksis
Lavozim: statik; pozitsiyasi: nisbiy; pozitsiyasi: mutlaq; pozitsiyasi: yopishqoq; pozitsiyasi: qattiq; pozitsiyasi: boshlang'ich; lavozim: meros;
3. Blok ofset: xususiyatlar yuqori, o'ng, pastki, chap
Agar uning joylashuv xususiyati statikdan boshqa narsaga o'rnatilgan bo'lsa, element joylashtirilgan hisoblanadi. Joylashtirilgan elementlar joylashtirilgan bloklarni hosil qiladi va ularni quyidagi to'rtta jismoniy xususiyatga ko'ra joylashtirish mumkin:
Sintaksis
Yuqori: 10px; yuqori: 2em; yuqori: 50%; yuqori: avto; tepada: meros; yuqori: boshlang'ich;
Yuqori xususiyat mutlaq joylashtirilgan blokning yuqori qirrasi (uning chetiga qarab) o'z ichiga olgan blokning yuqori chetidan pastga siljish masofasini belgilaydi. Nisbatan joylashtirilgan bloklar uchun blokning yuqori chetiga nisbatan ofsetni belgilaydi (ya'ni blokga normal oqimdagi pozitsiya beriladi, so'ngra ushbu xususiyatga ko'ra ushbu pozitsiyadan ofset).
Sintaksis
O'ng: -10px; o'ng: .5em; o'ngda: -10%; o'ngda: avtomatik; o'ng: meros; o'ngda: boshlang'ich;
O'ng xususiyat mutlaq joylashtirilgan blokning o'ng qirrasi (uning chetini hisobga olgan holda) o'z ichiga olgan blokning o'ng chetidan chapga siljish masofasini belgilaydi. Nisbatan joylashtirilgan bloklar uchun blokning o'ng chetiga nisbatan ofsetni belgilaydi.
Sintaksis
Pastki: 50px; pastki: -3em; pastki: -50%; pastki: avtomatik; pastki: meros; pastki: boshlang'ich;
Pastki xususiyat blokning pastki chetining o'z ichiga olgan blokning pastki chetiga nisbatan yuqoriga siljishi masofasini belgilaydi. Nisbatan joylashtirilgan bloklar uchun blokning pastki chetiga nisbatan ofsetni belgilaydi.
Sintaksis
Chapda: 50px; chap: 10em; chap: 20%; chapda: avtomatik; chap: meros; chap: boshlang'ich;
Chap xususiyat chap qirrani o'z ichiga olgan blokning chap chetidan o'ngga siljish masofasini belgilaydi. Nisbatan joylashtirilgan bloklar uchun blokning chap chetiga nisbatan ofsetni belgilaydi.
Ijobiy qiymatlar elementni o'z ichiga olgan blokning ichida, salbiy qiymatlar esa uni o'z ichiga olgan blokdan tashqariga o'tkazadi.
4. O‘rash: float xususiyati
Oʻrash bloklarni joriy satrda chapga yoki oʻngga suzib yurish imkonini beradi. "Suzuvchi blok" uning tashqi qirrasi o'z ichiga olgan blokning chetiga yoki boshqa suzuvchi blokning tashqi chetiga tegmaguncha chapga yoki o'ngga siljiydi. Agar chiziqli birlik bo'lsa, tashqi yuqori qismi suzuvchi blok joriy chiziq blokining yuqori qismiga to'g'ri keladi.
Elementlarda float xususiyatidan foydalanilganda, kenglikni belgilash tavsiya etiladi. Bu brauzerda boshqa kontent uchun joy yaratadi. Agar suzuvchi element uchun gorizontal joy etarli bo'lmasa, u mos kelguncha pastga suriladi. Bunday holda, blok darajasidagi boshqa elementlar uni e'tiborsiz qoldiradi va satr darajasidagi elementlar o'ngga yoki chapga siljiydi, u uchun joy bo'shatadi va uning atrofida oqadi.
Suzuvchi tomonlarning xatti-harakatlarini tartibga soluvchi qoidalar float xususiyati bilan tavsiflanadi.
Mulk meros qilib olinmaydi.
Sintaksis
Float: chap; suzuvchi: o'ng; float: yo'q; float: meros qilib olish;
Suzuvchi blok o'z tarkibining o'lchamlarini to'ldirish va chegaralarni hisobga olgan holda oladi. Suzuvchi elementlarning yuqori va pastki chetlari yiqilmaydi.
Suzuvchi elementlar asosiy elementining kontent maydonidan tashqariga o'tish uchun salbiy chekkalardan foydalanishi mumkin.
Xususiyat avtomatik ravishda displey xususiyatining hisoblangan (brauzerda ko'rsatiladigan) qiymatini ko'rsatish uchun o'zgartiradi: quyidagi qiymatlar uchun blok: inline , inline-block , table-row , table-row-group , table-ustun , jadval-ustun-guruh , jadval-hujayra .jadval sarlavhasi, jadval-sarlavha-guruh, jadval-kosti-guruh. Inline-jadval qiymati jadvalga o'zgaradi.
Xususiyat displeyli elementlarga ta'sir qilmaydi: flex va display: inline-flex . Mutlaq joylashtirilgan elementlarga taalluqli emas.
Guruch. 3. Elementlarni o'rash
5. Suzuvchi elementlar atrofidagi oqimni boshqarish: Aniq xususiyat
Aniq xususiyat element blok(lar)ining qaysi tomonlari dastlabki hujjatda uning ustidagi suzuvchi bloklarga tutashmasligi kerakligini belgilaydi. CSS2 va CSS 2.1 da xususiyat faqat suzuvchi blok darajasidagi elementlarga tegishli.
Mulk meros qilib olinmaydi.
Sintaksis
Aniq: yo'q; aniq: chap; aniq: o'ng; aniq: ikkalasi ham; aniq: meros;
Suzuvchi elementlar ostida fon yoki chegaralar ko'rsatilishiga yo'l qo'ymaslik uchun (overflow: hidden;) qoidasidan foydalaning.
6. Qoplama kontekstni aniqlash: z-index xossasi
CSS-da har bir blok uch o'lchovli pozitsiyaga ega. Gorizontal va vertikal pozitsiyalarga qo'shimcha ravishda bloklar Z o'qi bo'ylab bir-birining ustiga joylashtiriladi. Z o'qi bo'ylab joylashish ayniqsa bloklar bir-birining ustiga tushganda juda muhimdir.
Guruch. 1. Z o'qi bo'ylab elementlarning joylashishi
Hujjatlar daraxtini ekranda chizish tartibi yordamida tasvirlangan overlay konteksti . Har bir blok bitta qatlamli kontekstga tegishli. Berilgan qoplamali kontekstdagi har bir blok butun son darajasiga ega, bu uning Z o'qida bir xil qatlam kontekstidagi boshqa bloklarga nisbatan o'rni.
Yuqori darajali bloklar har doim past darajadagi bloklar oldida paydo bo'ladi va bir xil darajadagi bloklar dastlabki hujjatdagi elementlarning tartibiga ko'ra pastdan yuqoriga joylashtiriladi. Agar z-index xususiyati bilan boshqa daraja berilmagan bo‘lsa, element qutisi ota-ona qutisi bilan bir xil joyga ega.
Z-index xususiyati elementlarning bir-birining ustiga joylashishini o'zgartirishga imkon beradi.
Mulk meros qilib olinmaydi.
Sintaksis
Z indeksi: avtomatik; z-indeks: 0; z-indeks: 5; z-indeks: 999; z-indeks: -1; z-indeks: meros; z-indeks: boshlang'ich;
Bepul dasturlar va foydali maslahatlar dunyosi
