Keling, div tegi haqida bir necha so'z aytaylik. Qanday qilib HTML-da blok yaratish va uni veb-sahifangizga qanday joylashtirishni mohirlik bilan o'rganish Div bloklaridan veb-sahifalarga misollar

Layout o'z sayohatini kod HTMLda yozilgan va jadvallar yordamida belgilash amalga oshirilgan paytdan boshlanadi. Vaqt o'tishi bilan ular bundan uzoqlashdilar va belgilash CSS-ga o'tkazildi. Endi bir nechta tartib usullari mavjud. Zamonaviylarga Flex-box, Bootstrap vositalari to'plami, shuningdek, ijodkorlar uchun ulkan imkoniyatlar taqdim etuvchi eng yangi Grids kiradi. Internetni rivojlantirishning o'tish variantlaridan biri bu bloklarni joylashtirishdir. Ilgari butun sahifa belgilarini yaratish uchun foydalanilgan bo'lsa, endi u eskirgan deb hisoblanadi, ammo shunga qaramay, maxsus holatlarda keng qo'llaniladi.

Blok tartibi nima?

U eskirgan va nomukammal jadvalni almashtirdi. Sahifa qatlamlar yoki bloklardan iborat bo'lib, yopilish yorlig'i qurilish bloklari bo'lib xizmat qiladi.

. Bu asosiy elementning butun kengligini va tarkibga mos keladigan balandlikni egallagan blok tegidir. Keyinchalik bunday tartib "ajoyib" deb atala boshlandi. Sahifani yo'naltirish uchun asos sinflar deb ataladi.

Hozirgi vaqtda ushbu turdagi tartib sezilarli darajada eskirgan va tegning o'zi

faqat belgilangan maqsadda foydalanish kerak. Kodda harakat qilishni osonlashtiradigan ko'plab semantik to'g'ri teglar paydo bo'ldi. Masalan, navigatsiya menyusi uchun maxsus teg mavjud

Aniqlik uchun blok tartibini quyidagicha ifodalash mumkin:

mazmuni

Sinf o'ramiga ega div asosiy konteynerni yoki boshqacha aytganda, o'rashni ifodalaydi. Elementlar sinfiga ega elementlar bizning murakkab tuzilmamizning o'ziga xos "qurilish bloklari" dir. E'tibor bering, elementlarning tuzilishi va ierarxiyasini aniqlashni osonlashtirish uchun kodda ravshanlik uchun asosiy elementga nisbatan chetdan farqli chegara qo'llaniladi.

Jadvallardan foydalanish

Jadvalli veb-sayt tartibi uzoq vaqtdan beri barcha dasturchilar uchun bosh og'rig'i bo'lib kelgan. Veb-saytlarning blokli modeliga o'tgandan so'ng, jadvallardan foydalanish, hatto mo'ljallangan maqsadlarda ham, ma'lum vaqt davomida rag'batlantirilmadi.

Bunday yondashuv, albatta, noto'g'ri va hatto zararli. Bu oddiy ishlarni yanada murakkab va noqulay usullarda bajarishga majbur qiladi. Endi jadval faqat tegishli ma'lumotlarni ko'rsatish uchun ishlatiladi. Boshqacha qilib aytganda - mo'ljallangan maqsad uchun.

Rollarni ajratish

Agar ilgari barcha qurilish HTML-da amalga oshirilgan bo'lsa, bloklar tartibi o'zi bilan rollarni to'liq ajratishni olib keldi. Hozirgi vaqtda HTML faqat belgilash, mantiqiy formatlash va sahifa ramkasini yaratish uchun ishlatiladi. Uslublar butunlay olib tashlanadi va hujjatga kiritilgan alohida faylga kiritiladi. CSS elementlarni joylashtirish va jozibali va sezgir dizaynni yaratish uchun ishlatiladi. Blokka kirish uchun element nomi berilgan sinflardan foydalaniladi. Masalan, sarlavha bloki uchun biz sinf sarlavhasini tayinlaymiz. Bu shuningdek, kodni boshqarishni osonlashtiradi. Endi bu qisman HTML5 da paydo bo'lgan ixtisoslashtirilgan teglar orqali amalga oshiriladi.

Bloklardan foydalanish

Blok tartibida teg faol ishlatiladi

. Binoni qurishda u g'ishtga o'xshaydi. Saytning asosi va dizayni bo'lsa-da, bu yagona emas. Eshiklar, derazalar, shamollatish, balkonlar va shunga o'xshashlar kabi, boshqa HTML elementlari tartib uchun ishlatiladi. Bular havolalar, shakllar, rasmlar, ro'yxatlar va jadvallardir.

Teg foydalanish

kodni yanada ixcham va tushunarli qilishimizga imkon berdi. Bloklash tartibiga o'tish HTMLni keraksiz narsalardan, ya'ni uslublardan xalos qilish imkonini berdi. Haddan tashqari yuklangan va harakat qilish qiyin bo'lgan jadval tartibini butunlay olib tashlash imkonini berdi.

CSS bloki tartibidan faol foydalanadi. Mavjud vositalardan foydalanib, siz piksel aniqligi bilan har qanday sahifa tartibini yaratishingiz mumkin. Ushbu tartib piksel mukammal deb ataladi. Bu sayt va tartib o'rtasidagi mukammal moslikni nazarda tutadi. Yuqoridagi fotosurat blok tartibida hamma narsa unchalik oddiy emasligini ko'rsatadi. Avvaliga jadvallarsiz qilish mumkin emas edi. Ular sahifalarning asosiy tartibini yaratish uchun ishlatilgan va bloklar alohida elementlar uchun ishlatilgan. Ular bloklarning balandligini o'rnatishni o'rganmaguncha shunday bo'lgan.

Afzalliklar

Veb-sayt tartibini bloklash quyidagi afzalliklarga ega:

Keyingi rivojlanish

Hozirgi vaqtda blok div tartibi eskirgan va faqat ma'lum holatlar uchun maxsus holat sifatida cheklangan va faqat cheklangan foydalanishga ega. U tartibdagi joylashishni aniqlash va oqim bilan almashtirildi. Ularning kamchiliklari juda ko'p edi, lekin umuman olganda ular bloklarni joylashtirishdan ko'ra ko'proq ruxsat berdilar.

Keyingi inline-blok elementlari yordamida qurilish keldi. Bu dasturchilar ishini ancha osonlashtirdi. Ushbu usul ikkala turdagi bloklardan ham foydalanadi va sizga yanada sezgir va moslashuvchan dizaynni yaratishga imkon beradi. Shuni ta'kidlash kerakki, ushbu usullarning barchasi u yoki bu tarzda div elementidan iborat bo'lib, unga "ajoyib tartib" nomini berdi.

Hozirda sahifani yaratish uchun Flex-box va bootstrap ishlatiladi. Ular kodni sezilarli darajada kamaytiradi va yuqori sifatli sezgir dizaynni yaratishni tezroq va osonlashtiradi. Ular butun sahifani buzmasdan bloklarni ko'chirishga imkon beradi.

Taraqqiyotning boshida yangi texnologiya - Grids turibdi. Bu sizga har qanday murakkablikdagi dizaynni juda tez va oson yaratish imkonini beradi. Va bloklar, oqim, joylashishni aniqlash, bir vaqtning o'zida jadvallar bilan sodir bo'lgani kabi, faqat mo'ljallangan maqsadlar uchun ishlatiladi.

Div layout - bu veb-sayt yaratish uchun joriy model.

Internetda doimiy ravishda yangi saytlar paydo bo'ladi - yangiliklar portallari, bloglar va shaxsiy sahifalar. Ularning deyarli har biri DIV bloklari bo'lgan blokli model asosida yaratilgan. Bugun biz ushbu texnologiyani tushunamiz, div tartibining asosiy nuanslarini ko'rib chiqamiz.

HTML hujjat oqimi

Agar HTML tili gipermatnli ma'lumotni tuzishga imkon berishini eslasak, har qanday sayt o'z asosini bloklar to'plami: rasmlar, matnlar, havolalar va boshqalar ekanligi ayon bo'ladi. Biz hozirda DIVlar haqida gapirmayapmiz, lekin ular bir-biri bilan chambarchas bog'liq mavzular.

Shunday qilib, bizda HTML sahifasi yig'ilgan ma'lum bir ma'lumotlar oqimi mavjud. Hozirgi vaqtda strukturaviy elementlarning ikki turi mavjud: blokli va inline. Oddiy HTML oqimidagi blok bloklari birin-ketin vertikal tartibda joylashgan. Shu bilan birga, sukut bo'yicha blok kengligi sahifa yoki asosiy elementga nisbatan barcha mavjud bo'sh joyni egallaydi. O'z navbatida, inline elementlar gorizontal tartibda birin-ketin joylashtiriladi.

Bu ikki toifaning asosiy vakillari div va span teglaridir.

Shunga ko'ra, agar biz oddiy HTML oqimi haqida gapiradigan bo'lsak, barcha div bloklari bir-birining ostida joylashadi va oraliq bir qatorda bo'ladi.

Siz tushunganingizdek, siz inline elementlardan foydalangan holda veb-sayt uchun oddiy belgilar yarata olmaysiz. Shuning uchun, bir necha yil oldin, stol tartibini almashtirish uchun ular DIV bloklari asosidagi tartibdan foydalanishga qaror qilishdi.

DIV veb-sayt tartibi

Shunday qilib, saytni belgilash uchun DIV bloklari qo'llanila boshlandi. Ulardan foydalanib, asosiy tartibni chizish va barcha kerakli tarkib turlari uchun qo'shimcha bloklarni yaratish mumkin edi.

Keling, ushbu jarayonni standart sahifa misolida ko'rib chiqaylik, uning tarkibiga sarlavha, kontent bloki, yon panel va altbilgi kiradi.

Bu klassik variant. Logotip ko'pincha saytning sarlavhasida, navigatsiya havolalari esa yon blokda joylashgan. Asosiy blok ma'lumotlarni ko'rsatish uchun ishlatiladi - maqolalar, kompaniya tavsiflari, fotosuratlar arxivi va boshqalar. Pastki blokda siz manzil, kontaktlar va boshqa xizmat ma'lumotlarini kiritishingiz mumkin.

Rasmda ko'rib turganingizdek, biz sxemani joylashtirish uchun quyidagi asosiy bloklardan foydalanamiz:

sarlavha
mazmuni
altbilgi

Asosiy blok barcha kontent uchun konteyner sifatida ishlatiladi. Sarlavha - sayt sarlavhasi. Nav - navigatsiya bloki. Kontent - asosiy ma'lumotlar va tarkib. Altbilgi - sayt altbilgisi.

Ushbu bloklarning har biri DIV konteyneridir. Ammo nazariyaga asoslanib, bloklar bir-birini kuzatib borishi kerak. Bloklar quyidagi tuzilishga ega bo'lishi uchun biz yuqorida muhokama qilingan tartibni olishimiz kerak:

ASOSIY
- sarlavha
- mazmuni
- altbilgi

Bundan tashqari, ular shablonda ko'rib turganimizdek sahifada joylashgan bo'lar edi. Bunga qanday erishishimiz mumkin? Shu maqsadda biz DIV bloklari uchun xususiyatlardan foydalanamiz, bu bizga ularni kerakli tarzda, bir-biriga va butun sahifaga nisbatan joylashtirish imkonini beradi.

Lekin, avvalo, maketimizning HTML asosini yaratamiz va uslublar jadvallari bilan ishlashimiz uchun bloklarga nom beramiz.

HTML ramka

Agar biz barcha xizmat teglarini o'tkazib yuborsak, saytimizning skeleti shunday ko'rinadi.

Tarkib

Navigatsiya

Har bir blok uchun bizda sinf ajratilgan. Uning yordami bilan biz blok uchun uslublarni o'rnatamiz - bu sahifada kerakli joyga erishishimizga yordam beradi.

Saytning div tartibida qo'llaniladigan uslublar va xususiyatlar bilan tanishish vaqti keldi.

CSS uslublari

Agar kimdir bilmasa, CSS uslublar jadvallari veb-saytlarni ishlab chiqishda uzoq vaqt davomida ishlatilgan. Ularning yordami bilan siz sahifadagi istalgan elementni o'zgartirishingiz mumkin. Bu blokning vizual dizayniga ham, uning joylashuvi va miqyosiga ham tegishli.

Float

Birinchidan, DIV ni sahifaning o'ng yoki chap tomoniga yoki uning asosiy konteyneriga nisbatan joylashtirish imkonini beruvchi xususiyatni ko'rib chiqamiz.

Kichkina dam olish. Har doim blokga uslub tayinlaganimizda, u asosiy konteynerga nisbatan uning xususiyatlarini (hajmi, joylashuvi) o'zgartiradi.

Float xususiyati to'rtta qiymatga ega: none, right, left, inherit.

Bizni "chap" va "o'ng" ma'nosi qiziqtiradi.

Float qiymati bizning blokimiz qaysi tomonda ko'rsatilishini ko'rsatadi. Boshqa barcha bloklar uning atrofida qarama-qarshi tomondan oqadi.

Bizning holatda, navigatsiya bloki uchun biz qiymatni belgilashimiz kerak chap , va asosiy tarkib uchun qiymat o'ng . U uslublar faylida shunday ko'rinadi:

Nav ( float:chap; ) .content ( float:o'ng; )

Aytgancha, siz xususiyatni faqat navigatsiya bloki uchun o'rnatishingiz mumkin. Kontent bloki avtomatik ravishda navigatsiyaning o'ng tomonida joylashgan bo'ladi. Bunga float xususiyatini o'rnatish orqali olingan float tufayli erishiladi.

CSS-dagi chegaralar: chekka va to'ldirish

Endi div-ga asoslangan tartibda ishlatiladigan ikkita muhim xususiyatni tushunamiz. Ular chekinish uchun javobgardir. Ularning ishining mohiyatini tushunishning eng oson usuli - bu misol.

Tasavvur qilaylik, bizning asosiy blokimiz MAIN sayt sarlavhasidan biroz chekinish bo'lishi uchun nima qilishimiz kerak. Bunga asosiy sinf bilan divga margin xususiyatini belgilash orqali erishish mumkin. U blokning tashqi qoplamasi uchun javobgardir.

Margin xususiyati quyidagi qiymatlarga ega: [qiymat | qiziqish | avto] (1,4) | meros.

Shunday qilib, ofsetni piksellarda, foizlarda, har bir tomon uchun navbat bilan belgilashingiz mumkin.

Faqat ma'lum bir chekinishni o'rnatish mumkin, masalan, yuqori tomonda. Bu aynan bizning holatimizda. Bu qanday amalga oshiriladi:

Asosiy (chet-tepasi: 10px; )

Endi bizning asosiy blokimiz 10 pikselli yuqori to'ldirishga ega bo'ladi.

Endi navigatsiya va tarkibga ega blokni loyihalashtiramiz. Tasavvur qiling, bizda allaqachon tayyor veb-sayt bor. Navigatsiyadagi barcha havolalar sahifaning chap chetiga yaqin joylashgan. Va kontent blokidagi matn, aksincha, o'ng tomonga yaqindan qo'shni. Juda yoqimsiz dizayn. Biz ichki qoplamani yasashimiz kerak.

Buning uchun quyidagi qiymatlarga ega bo'lgan to'ldirish xususiyati javobgardir: [qiymat | foiz] (1, 4) | meros

Bu erda printsip margin xususiyati bilan bir xil - siz har bir tomon uchun alohida chekinishni o'rnatishingiz mumkin.

Nav ( float:chap; padding-chap: 15px; ) .content ( float:o'ng; padding-o'ng: 20px; )

Ushbu asosiy xususiyatlardan foydalanib, siz DIV bloklarining kerakli tartibiga erishishingiz mumkin. Natijada siz tayyor veb-sayt tartibini olasiz va uni kerakli ma'lumotlar bilan to'ldirish qoladi.

Maqola uchun video:

Xulosa

Biz faqat asosiy xususiyatlarni ko'rib chiqdik. Aslida, ularning ko'plari bor. Lekin har qanday holatda, taqdim etilgan ma'lumotlar har doim div tartibida ishlatiladi.

Agar hamma narsa bu erda to'plangan bo'lsa, nima uchun boshqa saytlardan ma'lumot izlash kerak?

ga bag'ishlangan muallifning turkum maqolalari veb-saytni blokirovka qilish asoslari. Bu mavzuni o'rganishni boshlash uchun birinchi joy. veb-sayt yaratish. Darslar asoslarni o'rganmoqchi bo'lganlar uchun foydali bo'ladi HTML va CSS nafaqat nazariy, balki amalda ham.

Mavzuni o'rganar ekanmiz, biz hech qanday maxsus qo'ng'iroq va hushtaksiz veb-sayt, oddiy veb-sayt yaratamiz, lekin juda yaxshi.

Darslarda men blokka asoslangan veb-sayt tartibi va boshqalar haqida oddiy va aniq gapiraman. Agar siz asoslarni tezda tushunmoqchi bo'lsangiz veb-sayt maketlari, keyin ushbu maqolalar seriyasi sizga kerak bo'lgan narsa bo'ladi.

Blok tartibi nima?

Nima bo'ldi veb-sayt tartibini bloklash va uni nima bilan yeysiz?

Ilgari veb-saytlar jadvallar yordamida yaratilgan. Sahifaning har bir elementi, xoh u sarlavha, matn yoki rasm bo'lsin, o'z katakchasida joylashgan edi. Bu hujayralar boshqa, kattaroq hujayralarda to'planib, ular o'z navbatida asosiy hujayrada, ya'ni sayt sahifasining o'zida yotardi.

Jadvalli tartib endi eskirgan, garchi ko'plab veb-ustalar undan foydalanishda davom etmoqdalar. Uning katta kamchiligi uning og'ir kodidir. Axir, har bir kichik hujayra ma'lum teglar bilan belgilanishi kerak.

Blok tartibi- butunlay boshqacha qo'shiq. Bu yerda barcha sahifa elementlari divs deb nomlangan maxsus bloklarda joylashgan. Ularning mohiyatiga ko'ra, ular bir xil jadvallarga biroz o'xshaydi. Quti Afrikada ham qutidir. Ammo bloklar ancha qulay, sodda va funktsionaldir.

Bloklash veb-sayt tartibida bu oddiy to'rtburchaklar maydon bo'lib, bir qator xususiyatlarga ega, masalan: ramka, chekka va chekinish. Blokning mazmuni har qanday bo'lishi mumkin - matn, rasm, ro'yxat, to'ldirish uchun ariza, navigatsiya menyusi va boshqalar.

Ramka- bu blokning konturi bo'lib, uning uchun qalinligi, rangi va turi (nuqta, qattiq, nuqta) kabi xususiyatlarni o'rnatishingiz mumkin.

Maydonlar (to'ldirish)- blokning mazmunini uning ramkasidan ajrating, shunda matn, masalan, blokning devorlariga "teshilib ketmasligi" kerak.

Chegaralar- bu turli bloklar orasidagi bo'sh joy bo'lib, ikkita blokni ma'lum masofada bir-biriga nisbatan joylashtirish imkonini beradi.

Bloklar, xuddi jadvallar kabi, sahifada har doim vertikal ravishda joylashtirilgan. Ya'ni, agar sahifa kodida ikkita blok ketma-ket yozilsa, ular brauzerda bir-birining ostida ko'rsatiladi. Agar biz bir qatorda gorizontal ravishda bir nechta bloklarni joylashtirishimiz kerak bo'lsa, ularning xususiyatlarida biz " kabi parametrni o'rnatamiz. atrofida oqim"(suzuvchi). Ammo bu haqda keyinroq.

Saytni bloklash tartibi. Teglar

teg HTML tilining maxsus konstruktsiyasidir. Farqlash ochilish Va yopilish teglar. Ularni ijtimoiy tarmoqlardagi hashtaglar yoki veb-saytlardagi teglar bilan aralashtirib yubormang, bu boshqa narsalar!

Eng oddiy holatda teg bolalar qurilish majmuasining bir qismiga o'xshaydi, u o'zining qat'iy maqsadiga ega: bar - bar, g'ildirak - g'ildirak va boshqa hech narsa emas. Masalan, paragraf tegi:

Paragraf matni.

har doim p harfi bilan belgilanadi va boshqa hech narsa yo'q. Bu uning ismi.

Teglar har doim burchakli qavslar ichiga olinadi. Misoldan ko'rinib turibdiki, ochilish va yopish tegi mavjud. Yopuvchi tegda ismdan oldin slash qo'shilgan - oldinga chiziq / .

Hamma teglar ham yopish juftligiga ega emas. Misol uchun, img rasm tegida u umuman yo'q. Ammo zamonaviy standartlarga va XHTML spetsifikatsiyasi talablariga javob berish uchun ular hali ham yopilish burchagi qavs oldidan slash bilan bo'sh joy qo'shadilar. Bu shunday ko'rinadi:

div yorlig'i

Div yorlig'i bloklarni joylashtirishning asosidir. Bu butun sayt qurilgan kublardir. Bu teg neytral hisoblanadi. Tarkibiga qat'iy bog'langan standart HTML teglaridan farqli o'laroq (p - paragraflarga, a - havolalarga, img - rasmlarga), div tegi istalgan narsani va shu kabi narsalarni o'z ichiga olishi mumkin. Uni barcha o'yinchoqlar tashlangan katta quti kabi ko'rib chiqing.

div tegi aniqlash uchun ishlatiladi sahifadagi funktsional maydonlar. Masalan, bizning fikrimizcha: "sarlavha", navigatsiya bloki, asosiy tarkib bloki, "kolontiter" yoki pastki kolontiter.

Div tegi, boshqa teglar kabi, o'z atributlariga ega.

Xususiyat- tegning tavsiflovchi xususiyatlari. Ya'ni, u nima qila oladi va qanday qilib. Masalan, rasm tegini olaylik:

Bu holda src, width, height, alt teg atributlari hisoblanadi. Qo'shtirnoq ichida (va bu ham zamonaviy standartlarning majburiy talabi) berilgan qiymatlar atributlar.

Bunday yozuvni shifrlash qiyin emas. Teg sahifaning ushbu joyiga rasmlar papkasidan risunok.jpg rasmini biriktirishingiz kerakligini bildiradi. Tasvirning kengligi 200 piksel, balandligi 50 piksel. Va to'plamga rasmda ko'rsatilgan narsalarni tushuntiruvchi muqobil matn qo'shildi.

Aytgancha, muqobil matn injiqlik emas, balki zaruriy talabdir. Hamma netizenlarning ko'rish qobiliyati yaxshi emas. Kimdir matnni aniqlash va o'qish dasturidan foydalanadi. Va ba'zi odamlar shunchaki brauzerda tasvirlarni ko'rsatishni o'chirib qo'yishadi. Shuning uchun chizmalar uchun muqobil sarlavhalar mavjud.

Agar ularga imzo qo'yishning ma'nosi bo'lmasa (masalan, ro'yxat belgisi yoki biron bir o'q), u holda alt atributi tirnoqlar orasidagi bo'sh joy bilan qoladi.

div teg atributlari

Div tegi faqat ikkita atributga ega:

id - belgilash imkonini beruvchi atribut noyob qiymat, ya'ni sahifada ishlatiladigan qiymat faqat bir marta. Masalan, sarlavha yoki altbilgi.

Shunday qilib, biz id atributi va sarlavha qiymatiga ega div yorlig'i uchun uslublar jadvalida ba'zi sozlamalarni, pastki qism uchun esa butunlay boshqacha sozlamalarni o'rnatishimiz mumkin. Brauzer ushbu matn qismi "sarlavha" ga tegishli ekanligini va masalan, katta va qizil shriftda yozilishini to'g'ri tan oladi, ammo bu "kolontitr" ga tegishli va kichik va kulrang shriftda yoziladi. Va hech qanday chalkashlik yo'q!

class - bir nechta elementlarga bir xil qiymat berish imkonini beruvchi atribut. Misol uchun, sahifadagi barcha rasmlarga bir xil qalinlikdagi va rangdagi ramka qo'shing. Bir nechta tasvirlar mavjud bo'lganligi sababli, id atributidan endi foydalanib bo'lmaydi, shuning uchun biz class dan foydalanamiz.

Birinchi marta, menimcha, bu etarli. Agar veb-saytlarning blokirovkasi haqida biror narsa tushunarsiz bo'lsa, sharhlarda so'rang.

Davomi bor. Aloqada bo'l!

Div bloklari bilan tartib uzoq vaqtdan beri standart bo'lib kelgan va jadval tartibiga nisbatan bir qator afzalliklarga ega. Biroq, aslida, Ajam ishlab chiquvchilar xuddi shu bloklarning xatti-harakatlari haqida chalkashib ketishadi.

Keling, bloklarni joylashtirishning asosiy nuqtalarini ko'rib chiqaylik. Endi biz html5 standartini hisobga olmaymiz, shunchaki div bloklari bilan tartib asoslarini ko'rib chiqamiz, bu tartib yoki ba'zi individual sahifa komponentlarini yaratishda ishlatiladi.

Blok elementi nima deb hisoblanadi?

Sahifadagi bunday elementning maydoni to'rtburchaklar bilan ifodalanadi, sukut bo'yicha u butun mavjud kenglikni egallaydi va yangi satrdan boshlanadi.
Bloklarni joylashtirishda ishlatiladigan eng keng tarqalgan element universal elementdir

Shunday qilib, oddiydan murakkabga. Keling, divlar sukut bo'yicha qanday paydo bo'lishini ko'rib chiqaylik, ularning holatiga uslublar ta'sir qilmaydi. Aniqlik uchun biz uslublar atributi orqali inline elementlarga uslublar qo'shamiz.

Blok 1

Blok 2

Blok 3

Keling, har bir blok uchun kenglik qiymatini qo'shamiz:

Blok 1

Blok 2

Blok 3

Ko'rinib turibdiki, har bir blok, spetsifikatsiyaga muvofiq, yangi chiziqda joylashgan. Bu ularning odatiy xatti-harakati.

Endi savol tug'iladi, qanday qilib joylashtirish kerak div bloklari bir qatorda, birin-ketin?

Shu maqsadda blokning qaysi tomoniga moslashishga majbur bo'lishini aniqlaydigan xususiyat mavjud. Shu bilan birga, boshqa chetidan u boshqa elementlar atrofida oqishi mumkin.

Float xususiyati quyidagi ma'nolarga ega:

chap - blok o'ng tomonga oqib, chap chetiga hizalanadi
o'ng - blok chapga oqib o'ng chetiga hizalanadi
none - hech qanday o'rash belgilanmagan, blok avvalgi misollarda bo'lgani kabi sukut bo'yicha o'zini tutadi.

Bloklar chapga tekislanishi uchun bloklarimizga float:left qo'shamiz:

Blok 1

Blok 2

Blok 3

Natijada bloklar bir chiziqqa tizilgan. Mayli, deylik, biz pastki qismga boshqa div qo‘shmoqchi edik va buni float xususiyatini ko‘rsatmasdan bajaramiz:

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Birlik 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Birlik 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua.

Nima uchun bu sodir bo'ldi? Muxtasar qilib aytganda, bu suzuvchi elementlar hujjat oqimidan tushib qolganligi sababli sodir bo'ladi. Biroq, bu alohida maqola uchun mavzu. Bu erda biz suzuvchi elementlarning harakatini boshqaradigan yangi xususiyat bilan tanishamiz:

chap - chap tomonga o'rashni o'chirib qo'yadi, barcha elementlar yangi satrda ko'rsatiladi (element ostida)
o'ng - elementni o'ng tomonga o'rashni oldini oladi
ikkalasi ham - elementni ikkala tomonga o'rashni taqiqlaydi; elementni yangi satrda aniq ko'rsatish kerak bo'lganda yoki boshqa elementlarni qaysi tomondan o'rash mumkinligi noma'lum bo'lganda foydalanish tavsiya etiladi

4-blokga clear:left xossasini qo‘shamiz, bu elementning chap tomondagi boshqa suzuvchi elementlar atrofida oqib chiqishini oldini oladi.