kengligi 200 piksel (px) ga o'rnating:

Keling, brauzerda qanday ko'rinishini ko'rib chiqaylik.

Kategoriya: . 2 ta fikr. Nashr qilingan: 09/02/2012.

Salom, bugun biz saytning blok kabi muhim elementini ko'rib chiqamiz va ushbu maqola blokli dizayn haqidagi maqola bilan uzviy bog'liq bo'lib, unda biz qanday qilib blokli konteynerlarni va saytimiz uchun o'rnatilgan elementlarni yaratishingiz mumkinligini ko'rib chiqdik. saytida. Ushbu maqolani o'rganib chiqqandan so'ng, biz bloklar bilan qanday ishlashni aniqroq bilib olamiz va bu o'z veb-saytimizni yaratish yo'lidagi juda muhim qadam bo'lishiga aminman.

CSS-da blok balandligi va kengligi.

Endi sayt bloklarining tashqi ko'rinishi va joylashuvini boshqarishga yordam beradigan asosiy funktsiyalarni ko'rib chiqamiz va shundan so'ng biz bu bilimlarning barchasini amalda qo'llashimiz kerak va biz sayt uchun oddiy ramka yaratamiz.

CSS-dagi blokning balandligi buyruq balandligi yordamida o'rnatiladi: auto|<высота в единицах измерения>|inherit va siz allaqachon tushunganingizdek, biz avtomatik buyruq yordamida blokning balandligini o'rnatishimiz mumkin, biz brauzerga buyruq beramiz, uning o'zi blokning o'lchamini aniqlay oladi va shuning uchun blok shunday o'lchamda bo'ladi. barcha elementlarga mos keladi va ortiq emas.

Inherit buyrug'i sizga asosiy elementdan parametrlarni olish imkonini beradi va bu qiymatlar faqat asosiy element uchun parametrlar o'rnatilgan bo'lsa ko'rinadi. Ammo ko'pincha siz blok o'lchamini aniq belgilashingiz kerak, faqat qabul qilingan qiymatlardan birida o'lchamni ko'rsating (ko'pincha bu piksellar).

Shuningdek, biz asosiy elementga nisbatan o'lchamni o'rnatishimiz mumkin va buning uchun biz foizlardan foydalanishimiz kerak. Keling, bu amalda qanday ko'rinishini ko'rib chiqaylik.

Ushbu buyruq brauzerga sahifadagi ma'lum bir elementni asosiy blokning o'lchamining o'n foiziga o'rnatish kerakligini aytadi.

CSS-dagi blokning kengligi width parametri yordamida o'rnatiladi: auto|<ширина>|inherit barcha parametrlar blokning balandligi va kengligi uchun bir xil va men uni yana takrorlashning ma'nosi yo'q deb o'ylayman. Shunchaki shuni aytmoqchimanki, blokning balandligini ham, kengligini ham alohida belgilash shart emas; siz o'rnatishingiz mumkin, masalan, kenglik va balandlik tarkibga qarab oshadi, agar buni qilmasangiz, bu juda qulaydir. ma'lum bir sahifada qanday tarkib bo'lishini biling.

Minimal va maksimal blok kengligi.

Bundan tashqari, har bir blok uchun biz aniq parametrlarni emas, balki saytdagi istalgan blok uchun minimal va maksimal parametrlarni o'rnatishimiz mumkin. Buning yordamida siz bloklarni brauzer oynasidan tashqariga chiqishidan qo'rqmasdan to'ldirishingiz mumkin.

Buni o'rnatish juda oddiy, biz minimal kenglik va balandlikni o'rnatish uchun quyidagi parametrlarni o'rnatishimiz kerak:

min-kenglik:<ширина>

min-balandligi:<высота>

Va maksimal uchun ikkita parametr kerak:

maksimal kenglik:<ширина>
maksimal balandlik:<высота>

Endi biz blok yoki butun sayt uchun maksimal va minimal o'lchamlarni belgilashimiz mumkin va bu kauchuk dizayni bo'lgan sayt uchun muhim, agar u tuzatilgan bo'lsa, bu parametr ishlamaydi.

CSS-da float joylashtirish variantlari.

Biz yaratgan oldingi barcha misollarda konteynerlar va elementlar ketma-ket joylashtirilgan, ammo bu dizaynni yaratish uchun bizga etarli emas, biz elementlarni o'z xohishimiz bilan joylashtirish qobiliyatiga muhtojmiz va mulk bizga bu borada yordam beradi. css da float va endi biz ushbu xususiyatni amalda qo'llashni tahlil qilamiz.

Float parametri bir nechta qiymatlarni qabul qilishi mumkin va endi biz bu parametrlar nima ekanligini aniqlaymiz:

float: chap|o'ng|yo'q|meros

Endi har bir misolni alohida ko'rib chiqamiz.

Float: left buyrug'i blokni chapga tekislash kerakligini anglatadi va boshqa barcha elementlar uning atrofida o'ngga oqib chiqadi.

float:right - oldingi buyruqning to'liq teskarisi va shunga mos ravishda blok o'ngga tekislanadi va barcha elementlar uning atrofida chap tomonga oqib o'tadi.

float:none har bir blok uchun standart xatti-harakatlar bo'lib, bloklarni birin-ketin joylashtiradi. Ushbu parametrdan foydalanish hozirda dolzarb emas va u juda kamdan-kam hollarda va oddiygina savodsizlikdan foydalaniladi.

CSS-dagi parametrni tozalang.

Ko'pincha float buyrug'i yordamida bloklarda dizayn yaratishda siz ba'zi bloklarga buyruq berishingiz kerak, shunda ular blok atrofida aylanmaydi, lekin odatdagidek harakat qiladi, qolganlari ostida joylashtiriladi. Ilgari bu muammo float:none buyrug'i yordamida kerakli blokda hal qilingan, ammo har bir brauzerdagi displey har xil bo'lishi mumkin va shuning uchun bunday hollarda clear buyrug'idan foydalanish ancha oqilona va endi buni qanday qilish mumkinligini ko'rib chiqamiz. .

aniq: chap|o'ng|ikkalasi|hech biri|meros

Buyruqning to'rtta parametri bor va endi biz uning har biri bilan qanday funktsiyalarni bajarishini aniqlaymiz.

Clear: left buyrug'i elementning float: left parametri bilan barcha elementlar ostida joylashtirilishini bildiradi.

clear:right buyrug'i float: right bilan barcha elementlarning ostiga blok qo'yadi.

clear:both parametri elementni ikkala float: left va float: right parametrlari bilan barcha bloklar ostiga qo'yadi.

aniq: hech biri blok uchun oddiy xatti-harakatlar emas. Agar ilgari suzuvchi konteynerlar qo'yilgan bo'lsa, bu parametr ko'rsatilmasligi kerak.

Biz barcha bilimlarni amalda qo'llaymiz.

Shunday qilib, biz bularning barchasini amalda qanday qo'llashimiz mumkinligini ko'rishimiz kerak bo'lgan maqolaning xulosasiga keldik va biz qiladigan birinchi narsa - sayt uchun oddiy ramka yaratish. Bizning ramkamiz shunday ko'rinadi.

Ko'rib turganimizdek, simli ramka uchun biz to'rtta DIV blokini yaratishimiz kerak va ularga o'lcham parametrlarini ham, joylashtirish parametrlarini ham qo'llashimiz kerak bo'ladi.

Biz to'rtta blok yaratdik va endi ularni ma'lumot bilan to'ldirishimiz va har bir blok uchun fonni o'rnatishimiz kerak, shunda biz qaysi blok va qayerda joylashganligini ko'rishimiz mumkin. Orqa fonni o'rnatish haqida bilib olishingiz mumkin. Va bu qanday kodga ega bo'lishimiz kerak.

Shundan so'ng biz uslublar fayliga o'tishimiz va barcha kerakli buyruqlarni yozishimiz kerak. Buyruqlar barcha bloklar uchun bir xil, faqat har birining o'z parametrlari mavjud.

Sarlavha (kengligi: 500px; blok kengligi
balandligi: 100px; blok balandligi
fon rangi:#33CCFF;) blok rangi

Tarkib (kengligi: 400px; blok kengligi
balandligi: 400px; blok balandligi
fon rangi: #33FF33; blok rangi
float: chap;) blok holati

Yon panel (kengligi: 100px; blok kengligi
balandligi: 400px; blok balandligi
fon rangi: #CCCCCC; blok rangi
float:chap;) blok holati

Altbilgi (kengligi: 500px; blok kengligi
balandligi: 100px; blok balandligi
fon rangi: #0000FF; blok rangi
aniq: ikkalasi;) standart blok pozitsiyasi

Va bu buyruqlarning barchasini yozganimizdan so'ng, biz sayt uchun shunday ramka olamiz.

Ma'lumki, veb-dizayner veb-sayt maketini chizadi va maket dizayneri maketni amalga oshiradi, ya'ni yozadi. HTML/CSS kod. Va u aynan nima haqida yozadi HTML sahifa? Barcha dizayn tartibi elementlari bloklarga joylashtirilgan.

Agar manba kodini ko'rib chiqsak, biz juda ko'p divlar mavjudligini va ularning barchasi dizayn bo'laklari bilan to'ldirilganligini ko'ramiz. Butun chizma mozaika kabi hujayralarga sochilib ketgan.

Shunday qilib, barcha dizayn bo'laklari hech qaerga ketmaydi, balki dizayner tomonidan chizilganidek, ularning bloklarida aniq qayd etilgan. Ularning o'zini qanday tutishini yaxshi bilish kerak balandlik va kenglikdagi bloklar.

Keling, blok misolini ko'rib chiqaylik div, keling buni bajaramiz HTML belgilar

Blok balandligi harakati

Sahifada bo'sh blok ko'rinmaydi va uni ko'rinadigan qilish uchun siz uning balandligini belgilashingiz yoki ichiga tarkibni kiritishingiz kerak.

Tana (
fon: #d5d5d5;
}

Div(
fon: # d56287;
balandligi: 100px;
}

Keling, unga 100 piksel balandlik va fon rangini beraylik, shunda sahifa foni va blok turli xil rangda bo'ladi, aks holda biz hech narsani ko'rmaymiz.

Kontent bloklarining xatti-harakati

Balandlikni olib tashlash balandligi va matnni blok ichiga joylashtiring.

Div(
fon: # d56287;
}

Blok balandligi o'zgarishini ko'ramiz, bu tarkib miqdoriga bog'liq. Nima uchun bu sodir bo'lmoqda? Odatiy bo'lib, blok balandligi qiymatga teng avto, ya'ni ota-blokdagi egallagan tarkibning balandligini avtomatik ravishda moslashtiradi.

Bloklash ustuvorliklari

Blok balandligini 100 pikselga qaytaramiz va matnli paragrafni kiritamiz.Matn yetarli bo'lmasa-da, blok aslida sahifada 100 piksel balandlikni egallaydi. Keling, ko'proq matn qo'shamiz va blok berilgan balandlikni e'tiborsiz qoldirib, matn talab qiladigan balandlikni olganini ko'ramiz. Qattiq o'rnatilgan balandlik hali ham tarkibga yo'l berdi.

Haqiqatan ham blokni ma'lum bir balandlikda ushlab turishga va tarkib bilan birga cho'zilmasligiga majburlashning hech qanday usuli yo'qmi? Bu mumkin, lekin faqat belgilangan o'lchamlardan oshib ketadigan matnni avtomatik ravishda kesish tufayli bu xususiyat chaqiriladi toshib ketish.

Blokdagi keraksiz tarkibni yashirish

ga qo'shilishi kerak CSS kod xususiyati toshib ketish: yashirin

Div(
fon: # d56287;
balandligi: 100px;
toshib ketish: yashirin;
}

blokga to'g'ri kelmaydigan hamma narsa yashirin bo'ladi, biz matn qanchalik xunuk kesilganini ko'ramiz.

Agar siz blokning butun tarkibini ko'rsatishingiz kerak bo'lsa, aylantirishdan foydalanishingiz mumkin, keyin blok o'rniga yozishingiz kerak. yashirin.

Overflow: aylantirish;

Amalda, bu tekislash uchun foydali bo'lishi mumkin, shuning uchun qatorda turgan barcha bloklar bir xil balandlikda bo'lishi yoki dinamik ravishda ko'rsatilgan tarkib sayt dizaynini buzmasligi uchun.

Blok kengligi harakati

Agar siz ular uchun kenglik o'rnatmasangiz, bloklar qanday ishlaydi? Biz blokning kengligini belgilamadik, lekin baribir uning kengligi avtomatik ravishda unga ajratilgan barcha joyni egallaydi. Standart blok kengligi 100% ni tashkil qiladi. Ammo, masalan, 200 pikselni o'rnatish orqali kenglikni cheklasak, biz blokning 200 pikselni egallashini vizual ravishda ko'ramiz.

Div(
fon: # d56287;
balandligi: 100px;
kengligi: 200px;
}

Biroq, bu erda bir narsa bor, agar biz Kod inspektoridagi element ustiga sichqonchani olib kelsak, biz aslida blok brauzerning butun kengligini egallashda davom etishini ko'ramiz, lekin buni yashirincha qiladi. Shunday qilib, u 200 pikselni ochiq holda egallaydi va qolgan bo'sh joy ajratilgan va boshqa elementlarning u bilan mos kelishiga yo'l qo'ymaydi.

Keling, blokimizni takrorlaymiz va ikkinchi blok yangi qatorga joylashtirilganini va butun chiziqni egallashini ko'ramiz. Bu blok elementlarining o'ziga xos xususiyati.

Xo'sh, qanday qilib ularni bir qatorda turishga majbur qilish mumkin? Siz ularni inline-blok elementlari qilishingiz kerak va keyin ular bir xil chiziqda bir-birining yonida mukammal turadilar. Har bir blokga xususiyat berilishi kerak.

Displey: inline-block;

Blokning balandligi va kengligi nisbiy birliklarda, masalan,% da ko'rsatilishi mumkin. Shuni hisobga olish kerakki, bolalar bloklarining o'lchamlari ota-onaga, keyin esa blok uchun ota-onaga nisbatan o'rnatiladi. div bo'ladi tanasi.

Menimki sizga nazariyadan amaliyotga o'tishga va birinchi veb-saytingizni yaratishga yordam beradi.

Keyingi loyihani ishlab chiqishda (yoki shunchaki tartib panjarasini loyihalashda) ko'pchilik muammoga duch keldi - belgilangan kenglik yoki brauzer oynasining o'lchamiga mos keladigan "kauchuk" panjaradan foydalanish.

Ushbu echimlarning har biri o'zining ijobiy va salbiy tomonlariga ega; Men kamchiliklarga e'tibor qaratmoqchiman, chunki odatda bu qarorlarning kamchiliklarini aks ettirishda ikkita yomonlik o'rtasida tanlov qilish kerak.

Ruxsat etilgan tartib panjara kengligi

Tartib 960-980 pikselli gorizontal o'lchamga majburlanadi (shuning uchun hamma narsa ko'pchilik qurilmalarda ko'pchilik ruxsatlarda mavjud bo'ladi), bu katta gorizontal oyna o'lchamlari bilan qandaydir sovuq ko'rinadi - foydali sahifa mazmunining ingichka vertikal chizig'i va katta foydasiz maydonlar. yon tomonlarda foydalanilmagan bo'sh joy.

Oynaning kengligi bo'ylab "kauchuk" tartib panjarasi

Shunga qaramay, katta gorizontal oyna o'lchamlari bilan yana bir muammo bor: matn satrlari juda uzun bo'ladi va ularni o'qish biz xohlaganchalik qulay bo'lmaydi.
Ushbu yechim bilan bog'liq yana bir keng tarqalgan muammo shundaki, katta gorizontal oyna o'lchamlari bo'lgan yon chekkalar endi elementlarning gorizontal o'lchamlari bilan vizual ravishda mos kelmaydi, bu ham tartibni ko'rib chiqishda qulaylikni qo'shmaydi.

Men oddiy echimni taklif qilmoqchiman - minimal gorizontal o'lchamni piksellardagi sobit qiymat bilan cheklang va maksimal nisbiyni deraza kengligining foizi sifatida belgilang. Bu CSS spetsifikatsiyasining yana 2 ta versiyasi yordamida juda oddiy tarzda hal qilinadi.

Yangilash: Shuni ta'kidlashni istardimki, biz klassik kauchuk effekti va mutlaqo barcha rezolyutsiyalarga moslashish haqida emas, balki faqat sxemasi ishlab chiqilgan ma'lum bir oqilona diapazon haqida gapiramiz. Quyidagi misollarda bu gorizontal o'lchamlari 1024 piksel bo'lgan klassik ish stoli ruxsati diapazoni.

Yana bir bor ta'kidlayman: Xabar barcha turdagi qurilmalar va barcha ruxsat diapazonlari uchun yechim haqida gapirmaydi. Ushbu muammoni printsipial ravishda bitta sxema doirasida hal qilib bo'lmaydi., uni u yoki bu tarzda hal qilish uchun bir nechta tartib kerak bo'ladi. Alohida uchadi, kotletlar alohida.

Tartib konteynerini yarating:
...


Biz uni oddiy uslublar kodi bilan bezatamiz:
div.page-container (minimum kenglik: 960px; maksimal kenglik: 75%; chekka: 0 avtomatik; toʻldirish: 0; )
Biroq, bu yechim ba'zilar uchun etarli bo'lmasligi mumkin, chunki juda katta gorizontal oyna o'lchamlari bilan chiziq uzunligi bilan bog'liq muammolar yana paydo bo'ladi. Buni bir xil oddiy qo'shimcha texnika bilan hal qilish mumkin: allaqachon tasvirlangan idish ichida qo'shimcha tashqi idish yaratish va uning maksimal kengligini belgilangan qiymat bilan cheklash (sub'ektiv ravishda, menimcha, 1400-1600 piksel oralig'idagi qiymatlar eng mos keladi). Shunga qaramay, biz faqat CSS 2.0 vositalaridan foydalanamiz. Ushbu yechim, birinchi izohda taklif qilinganidek, asl konteyner uchun foiz sifatida kenglikni qo'shish o'rniga, 9-versiyagacha qiymatlarni bir vaqtda ko'rsatishni tushunmaydigan IEda ham ishlaydi.

HTML qo'shish:
...

Va CSS-ni biroz o'zgartiring:
div.page-container (maksimal kenglik: 75%; minimal kenglik: 960px; chekka: 0 avtomatik; toʻldirish: 0; ) div.page-container-inner (min-kenglik: 960px; maksimal kenglik: 1600px; chekka) : 0 avtomatik; to'ldirish: 0; )
Ko'rib turganingizdek, yechim juda oddiy va juda universal bo'lib, u har qanday blok elementlari uchun ishlatilishi mumkin.

Ushbu uzun qo'llanma maqolasi muhim mavzularga bag'ishlangan bo'lib, uning vazifasi blok elementlari bilan ishlash usullarini saralash, o'quvchiga elementlarning kengligi va balandligini hisoblash uchun modelni o'zgartirish nima uchun ishlatilishini, to'lib ketishni qanday boshqarishni tushuntirishdan iborat. blok elementlari haqida, minimal va maksimal elementlar o'lchamlari bilan qanday ishlash kerak.

CSS qutisi modeli bilan tanishar ekanmiz, biz kenglik va balandlik xususiyatlari elementning ichki maydonining kengligi va balandligini belgilashini bilib oldik ( tarkib maydoni), matn, tasvir va boshqa elementlarni o'z ichiga olishi mumkin.

CSS qutisi modelida siz elementga bergan kenglik va balandlik qiymatlari va brauzer uni ko'rsatish uchun ajratadigan joy miqdori o'rtasida farq bor. Elementlarning umumiy kengligi va balandligi to'ldirishning kengligi va balandligi, chegaralar va ular uchun belgilangan maxsus qiymatlardan iborat bo'lgan brauzer oynasining maydonini ifodalaydi.

Elementning umumiy kengligi quyidagi formula bo'yicha hisoblanadi:

div(kengligi: 150px; /* elementning kengligini belgilang */ balandligi: 150px; /* element balandligini belgilang */ to'ldirish: 10px; /* elementning ichki to'ldirishini o'rnating */ chegara: 5px; /* element chegaralarini belgilang */ }

Bizning holatlarimizda bu vaziyatni saqlab qoladi va biz hech qanday hisob-kitob qilishimiz shart emas va kelajakda biz elementlarimiz uchun talab qilinishi mumkin bo'lgan har qanday o'zgarishlardan qo'rqamiz. Keling, ushbu keraksiz hisob-kitoblarni brauzer tomonida qoldirib, misolimiz natijasini ko'rib chiqaylik:

Elementlarning kengligi va balandligini hisoblash uchun ushbu modelni to'liq tushunish uchun keling, quyidagi misol bilan bilimlarimizni mustahkamlaymiz:

Content-box xususiyatining qiymati standart qiymat bo'lib, klassik sxema bo'yicha elementning umumiy kengligi va balandligini hisoblab chiqadi. Misol sifatida kenglikdan foydalanish:

150px (moslashtirilgan kenglik) + 10px (chap toʻldirish) + 10px (oʻng toʻldirish) + 10px (chap chegara) + 10px (oʻng chegara) = 190px.

Biz border-box xususiyatini qo‘llagan ikkinchi elementga kelsak, elementning moslashtirilgan kengligi va balandligi allaqachon element tarkibini, chegarasini va to‘ldirishni o‘z ichiga oladi. Ko'pgina hollarda, sahifalarda chegara qutisi qiymatiga ega xususiyatdan foydalanish afzalroqdir, chunki u elementning yakuniy o'lchamlarini aniq qiladi va yuqorida muhokama qilingan ba'zi kutilmagan vaziyatlardan qochadi.

Bizning misolimiz natijasi:

Blok elementining to'lib ketishini nazorat qilish

Joylashtirish jarayonida siz elementning mazmuni element chegaralaridan tashqarida ko'rsatiladigan holatlarga duch kelasiz. Odatiy bo'lib, brauzer ushbu tarkibni ko'rsatadi (elementning to'lib ketishi ko'rsatiladi), bu ba'zi hollarda vizual xatolarga olib keladi. Overflow CSS xususiyati brauzerning ushbu xatti-harakati uchun javobgardir. Keling, uning mumkin bo'lgan qiymatlarini ko'rib chiqaylik:

Keling, quyidagi misolni ko'rib chiqaylik:

Ushbu misolda biz joylashtirdik to'rtta belgilangan kenglik va balandlik bloklari, ular uchun CSS xususiyatining to'lib ketishining turli qiymatlari ko'rsatilgan:

• Birinchi blok(ko'rinadigan qiymat) - kontent element chegaralaridan tashqariga chiqadi (standart qiymat).
• Ikkinchi blok(qiymat yashirin ) - elementni to'ldiradigan kontent kesiladi.
• Uchinchi blok(aylantirish qiymati) - to'ldirishni qisqartiradi, lekin aylantirish panelini qo'shadi.
• To'rtinchi blok(avtomatik qiymat) - aylantirish qiymatida bo'lgani kabi, agar blok ma'lum bir o'q bo'ylab toshib ketsa, faqat aylantirish paneli avtomatik ravishda qo'shiladi ( x- gorizontal yoki y- vertikal) va sahifada doimiy ravishda ko'rsatilmaydi.

Bizning misolimiz natijasi.