Odatiy bo'lib, blok elementlari avtomatik kenglikdan foydalanadi. Bu shuni anglatadiki, element xuddi shunday gorizontal ravishda cho'ziladi bo'sh joy. Blok elementlarining standart balandligi avtomatik ravishda o'rnatiladi, ya'ni. Brauzer kontent maydonini vertikal ravishda kengaytiradi, shunda barcha kontent ko'rsatiladi. Elementning kontent maydoni uchun maxsus o'lchamlarni o'rnatish uchun siz kenglik va balandlik xususiyatlaridan foydalanishingiz mumkin.

CSS width xususiyati elementning kontent maydonining kengligini, balandlik xususiyati esa kontent maydonining balandligini belgilash imkonini beradi:

E'tibor bering, kenglik va balandlik xususiyatlari faqat kontent maydonining o'lchamini aniqlaydi; blok elementining umumiy kengligini hisoblash uchun siz kontent maydonining kengligini, chap va o'ng to'ldirishni, chap va o'ng tomonning kengligini qo'shishingiz kerak. o'ng chegara. Xuddi shu narsa elementning umumiy balandligi uchun ham amal qiladi, faqat barcha qiymatlar vertikal ravishda hisoblanadi:

Ushbu paragraf uchun biz faqat kenglik va balandlikni o'rnatamiz.

Ushbu paragrafda kenglik va balandlikdan tashqari, ichki to'ldirish, chegara va tashqi to'ldirish mavjud.

Sinab ko'ring »

Misol ikkinchi elementning birinchisiga qaraganda ko'proq joy egallashini aniq ko'rsatadi. Agar formulamiz yordamida hisoblasak, birinchi xatboshining o'lchamlari 150x100 piksel, ikkinchi xatboshining o'lchamlari:

Umumiy balandligi:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	yuqori ramka		yuqori chekinish		balandligi		pastroq chekinish		pastroq ramka

ya'ni 180x130 piksel.

Elementning to'lib ketishi

Element uchun kenglik va balandlikni aniqlaganingizdan so'ng, siz bir muhim nuqtaga e'tibor berishingiz kerak - element ichida joylashgan tarkib belgilangan blok hajmidan oshishi mumkin. Bunday holda, kontentning bir qismi element chegarasidan tashqariga chiqadi.Ushbu yoqimsiz daqiqani oldini olish uchun siz CSS overflow xususiyatidan foydalanishingiz mumkin. Overflow xususiyati brauzerga blokning mazmuni uning hajmidan oshsa nima qilish kerakligini aytadi. Bu xususiyat to'rtta qiymatdan birini qabul qilishi mumkin:

• ko'rinadigan - brauzer tomonidan ishlatiladigan standart qiymat. Ushbu qiymatni o'rnatish, to'ldirish xususiyatini o'rnatmaslik bilan bir xil ta'sirga ega bo'ladi.
• aylantirish - elementga vertikal va gorizontal aylantirish chiziqlarini qo'shadi.
• avtomatik - agar kerak bo'lsa, aylantirish chiziqlarini qo'shadi.
• yashirin - blok elementining chegaralaridan tashqariga chiqadigan tarkibning bir qismini yashiradi.

Vlad Merzhevich

Har qanday blok elementi bir-birining ustiga qo'yilgan karam barglari kabi xususiyatlar to'plamidan iborat. Blokning asosi uning mazmuni (bu matn, rasm va boshqalar bo'lishi mumkin), uning kengligi width xususiyati bilan belgilanadi va balandligi balandligi bo'yicha; kontent atrofida plomba bor, ular tarkibdan chegaralarning ichki chetiga qadar bo'sh joy yaratadi; keyin chegaralarning o'zlari (chegara) keladi va blok chekkalar (chegara) bilan yakunlanadi, chegaralarning tashqi chetidan ko'rinmas bo'sh joy. Blok kengligi murakkab qiymat bo'lib, bir nechta xususiyat qiymatlaridan iborat:

• kengligi - kontent kengligi, ya'ni. blok tarkibi;
• padding-left va padding-right - kontentning chap va o'ng tomonidagi chekka;
• chegara-chap va chegara-o'ng - chap va o'ngdagi chegara qalinligi;
• margin-left va margin-right - chap va o'ng chekka.

Ba'zi xususiyatlar etishmayotgan bo'lishi mumkin, bu holda kenglik ta'sir qilmaydi. Umumiy kenglik rasmda ko'rsatilgan. 1 qora nuqta chiziq sifatida.

Guruch. 1. Blok kengligi

Agar kenglik belgilanmagan bo'lsa, u birlamchi avtomatik ga o'rnatiladi. Bunday holda, blokning kengligi chegaralar, chegaralar va to'ldirish qiymatlarini saqlab qolgan holda butun mavjud kenglikni egallaydi. Bunday holda, mavjud kenglik asosiy blok tarkibining kengligini anglatadi va agar ota-ona bo'lmasa, brauzer tarkibining kengligi.

Aytaylik, qatlam uchun quyidagi uslub yozilgan.

Kengligi: 300px; /* Qatlam kengligi */ chekka: 7px; /* Toʻldirish qiymati */ chegara: 4px qattiq qora; /* Chegara imkoniyatlari */ toʻldirish: 10px; /* Matn atrofidagi chetlar */

Ushbu yozuvga ko'ra qatlam kengligi 342 pikselga teng bo'ladi, bu qiymat kontent kengligining qiymatini plyus chap to'ldirish, chap chegara va chap chekka, ortiqcha o'ng chekka, o'ng chegara va o'ng to'ldirish qiymatini qo'shish orqali olinadi. Keling, barcha raqamlarni jamlaylik.

Kenglik = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Shuni ta'kidlash kerakki, kenglikning shakllanishi bilan blokli model o'zi bilan juda ko'p noqulayliklarni olib keladi. Muayyan blok kengligini o'rnatishingiz kerak bo'lganda siz doimo hisob-kitob qilishingiz kerak. Muammolar birlashtirganda ham boshlanadi turli birliklar o'lchovlar, ayniqsa foizlar va piksellar. Keling, kontent kengligi 90% ga o'rnatilgan deb faraz qilaylik, agar biz piksellarda ko'rsatilgan chekka va chegaralarni qo'shsak, unda blokning umumiy kengligini hisoblash mumkin emas, chunki foizlar to'g'ridan-to'g'ri piksellarga aylantirilmaydi. Bu blokning umumiy kengligi veb-sahifaning kengligidan oshib ketishiga olib kelishi mumkin, natijada gorizontal aylantirish paneli paydo bo'ladi. Ushbu vaziyatdan chiqishning ikkita yo'li bor - blokli model algoritmini o'zgartirish va ichki qatlamlardan foydalanish.

Blok modeli algoritmi

Yuqorida aytib o'tilganidek, blok kengligi tarkibning kengligi va chekka, chegaralar va to'ldirish qiymatlaridan hosil bo'ladi. Brauzerda Internet Explorer Algoritm avtomatik ravishda o'zgaradi va butun blokning kengligi kengligi teng o'rnatiladi. Boshqa brauzerlar algoritmni osonlikcha o'zgartirmaydi va bundan tashqari, siz moslik rejimi yomon ekanligini bilasiz. CSS3 biz uchun foydali bo'ladigan ajoyib quti o'lchamiga ega. Chegara qutisiga o'rnatilganda, kenglik chekka va hoshiyalarni o'z ichiga oladi, lekin to'ldirish emas. Shunday qilib, box-sizing bilan border-box qiymatini uslubimizga bog‘lab, biz kenglikni foiz sifatida belgilashimiz va blokning kengligi o‘zgarishidan qo‘rqmasdan chegara va to‘ldirishni xavfsiz belgilashimiz mumkin. Afsuski, bu xususiyat bilan bog'liq kichik muammo bor, odatda brauzerlarda bo'lgani kabi - hamma brauzerlar buni tushunmaydi. Brauzerlar hech bo'lmaganda brauzerga xos xususiyatlarni qo'llab-quvvatlaganidan xursandman. Jadvalda 1 brauzerni qo'llab-quvvatlashni ko'rsatadi.

Jadval 1. Box-sizing xususiyati uchun brauzerni qo'llab-quvvatlash

Brauzer	Internet Explorer	Chrome	Opera	Safari	Firefox
Versiya	8.0+	2.0+	7.0+	3.0+	1.0+
Mulk	quti o'lchami	-webkit-box-sizing	quti o'lchami	-webkit-box-sizing	-moz-box-sizing

Jadvaldan ko'rinib turibdiki, xususiyatlarda chalkashlik va chalkashlik mavjud, shuning uchun siz gibrid qilishingiz va uchta xususiyatni ko'rsatishingiz kerak bo'ladi (1-misol).

1-misol: Blok kengligi

HTML5 CSS3 IE Cr Op Sa Fx

Ushbu misol jadvalda keltirilgan barcha brauzerlarda ishlaydi. 1, ammo -moz va -webkit bilan boshlanadigan nostandart xususiyatlardan foydalanish tufayli CSS3 da amal qilmaydi. Blok kengligi 100%, shu jumladan to'ldirish qiymatlari. Box-sizing xususiyati bo'lmasa, brauzerda gorizontal aylantirish paneli paydo bo'ladi.

Ichki qatlamlar

Box-sizing xususiyatidan foydalanish hamma uchun yaxshi, faqat IE ning eski versiyalarida ishlamaydi. Agar siz IE7 va IE6 asosida veb-sayt yaratayotgan bo'lsangiz, qatlamlarni joylashtirishning eski isbotlangan usuli sizga mos keladi. G'oya oddiy - tashqi blok elementi uchun faqat kerakli kenglik o'rnatiladi, ichki blok uchun esa hamma narsa o'rnatiladi - chekkalar, chegaralar va to'ldirish. Blokning standart kengligi uning ota-onasining mavjud kengligiga teng bo'lganligi sababli, bloklar qaysidir ma'noda bir-birining ustiga chiqadi, lekin birlashtirilgan elementning haqiqiy kengligi aniq aniqlanadi. 2-misol ichki qatlamlardan foydalanishni ko'rsatadi.

2-misol: Ichki qatlamlar

HTML5 CSS 2.1 IE Cr Op Sa Fx

Natija bu misol shaklda ko'rsatilgan. 2.

Guruch. 2. Blokning kengligi foizda

Uyalangan qatlamlarning afzalligi - chekinishlardan foydalanish (quti o'lchami ularni hisobga olmaydi), usulning ko'p qirraliligi va agar xohlasangiz, fonni u yoki bu qatlamga qo'shish mumkin. Bu biroz o'zgaradi tashqi ko'rinish elementlar, bu, ayniqsa, fon rasmlarini qo'shganda to'g'ri keladi. Usulning kamchiliklari orasida, ayniqsa, usul tez-tez ishlatilsa, kod tuzilishini murakkablashtiradigan qo'shimcha blokni kiritishni ta'kidlash mumkin. Ammo bu foyda bilan solishtirganda kichik narsa deb hisoblanishi mumkin.

Tavsif

Blok darajasidagi yoki almashtiriladigan elementlarning kengligini o'rnatadi (masalan, teg ). Kenglik element atrofidagi chegaralarning qalinligini, to'ldirishni yoki chekka qiymatlarini o'z ichiga olmaydi.

Brauzerlar kengliklarni bir xil tarzda ishlamaydi; ko'rsatish natijasi foydalanilgan brauzerga bog'liq.. Jadvalda 1 beriladi mumkin bo'lgan variantlar va natijada kenglik.

Jadval 1. Brauzerlarda kenglik harakati

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Belgilanmagan (moslik rejimi)	Agar kontent belgilangan kenglikdan oshib ketsa, blok tarkibga mos keladigan darajada o'zgaradi. Aks holda, blokning kengligi kenglik qiymatiga teng bo'ladi.	Barcha holatlarda brauzer CSS spetsifikatsiyasiga muvofiq ishlaydi. Ya'ni, blokning kengligi kenglik, to'ldirish, chekka va chegara qiymatlarini qo'shish orqali olinadi. Blokning tarkibi, agar ular belgilangan o'lchamlarga mos kelmasa, blokning tepasida ko'rsatiladi.	Kenglik kenglik qiymatiga teng.
O'tish HTML
Qattiq HTML	Kenglik kenglik, to'ldirish, chekka va chegara qiymatlarini qo'shish orqali hosil bo'ladi. Agar blokning tarkibi belgilangan o'lchamlarga mos kelmasa, ular tepada ko'rsatiladi.		Kenglik kenglik qiymatiga, ortiqcha to'ldirishga, chekka va chegaraga teng. Agar blokning tarkibi belgilangan o'lchamlarga mos kelmasa, ular tepada ko'rsatiladi.
HTML 5
XHTML

Sintaksis

kenglik: qiymat | qiziqish | avto | meros

Qiymatlar

CSS-da qabul qilingan har qanday uzunlik birliklari qiymat sifatida qabul qilinadi - masalan, piksel (px), dyuym (dyuym), nuqta (pt) va boshqalar. Foiz belgilaridan foydalanganda elementning kengligi kengligiga qarab hisoblanadi. asosiy element. Agar ota-ona aniq ko'rsatilmagan bo'lsa, u holda brauzer oynasi uning vazifasini bajaradi.

Avto Element turi va mazmuniga qarab kenglikni o'rnatadi. inherit Ota-ona qiymatini meros qilib oladi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ushbu misolning natijasi, Safari brauzerida ko'rinib turganidek, rasmda ko'rsatilgan. 1.

Guruch. 1. Blok kengligi

Ob'ekt modeli

document.getElementById("elementID").style.width

Brauzerlar

Internet Explorer 6 kenglikni min-width sifatida noto'g'ri belgilaydi. Qurk rejimida Internet Explorer-ning 8.0 gacha bo'lgan versiyalari elementning kengligini unga to'ldirish, chekka yoki chegara qiymatlarini qo'shmasdan noto'g'ri hisoblaydi.

7.0 ga qadar va shu jumladan Internet Explorer versiyalari meros qiymatini qo'llab-quvvatlamaydi.

Div layoutning jadvalli maketga nisbatan afzalliklari haqida hech kimga aytib berishning hojati yoʻqdir.Buni hamma allaqachon tushungan va jadvallardan ularga oʻtgan.Xoʻsh, almashtirmaganlar tez orada oʻz xatolarini tushunib, shunday qilishadi. har qanday saboq - bu erda ham tuzoqlar mavjud: divalar o'zlarini kerakli tarzda tutmaydilar yoki biron bir aniq tuzilmani yotqizishning iloji yo'q, ko'plab to'siqlar mavjud, lekin har doim faqat bitta maket dizayneri bor ...

Ushbu post ko'proq yangi boshlanuvchilar uchun mo'ljallangan, ammo bu erda hatto professionallar ham qiziqarli narsalarni topishlari mumkin. Shunday qilib, keling, biznesga kirishaylik!

Bu har doim esda tutishga arziydi

Iloji boricha tez-tez va to'g'ri bajarilishi kerak bo'lgan tartibning bitta yondashuvi mavjud. Bu DOM daraxtining mineralizatsiyasi. Bu bir nechta asosli afzalliklarga ega: u joylashtirish jarayonining o'zini soddalashtiradi, mumkin bo'lgan xatolar sonini minimal darajaga tushiradi va kod shaffofligini yaxshilaydi. Biz buni doimo eslab qolishimiz va tuzilmani rejalashtirishda unga alohida e'tibor berishimiz kerak.

Asosiy printsiplar quyidagilardan iborat: chekinish uchun biz faqat to'ldirish va chekkadan foydalanamiz (ehtiyojga qarab) - alohida 20 pikselli div qilish shart emas, biz joylashtirishni minimal darajada cheklaymiz, biz uni pozitsiya bilan haddan tashqari oshirmaymiz. : nisbiy va keyingi blok ofsetlari (agar noto'g'ri ishlatilsa, bu yarim soat davomida butun kodni tahrirlashga olib kelishi mumkin), biz kerakli effektga erishish uchun z-indeksdan faol foydalanamiz.

TSS

- Divlarni birin-ketin qanday joylashtirish mumkin? Va buning uchun biz float xususiyatidan foydalanamiz: chap (yoki ehtiyojga qarab o'ng), shunday muqobillardan keyingi keyingi div ularning ostida turishi uchun biz unga aniq xususiyatni o'rnatamiz (masalan, aniq: chap).

- Divni qanday markazlashtirish kerak? Bitta yechim o'xshaydi quyidagi tarzda- chekka-chap va chekka-o'ngni avtomatik qilib belgilang (yoki undan ham oddiyroq - chekka: 0 avtomatik;)

- Divdagi elementlarni vertikal ravishda qanday joylashtirish mumkin? Bu elementga bog'liq, masalan, matn uchun vertical-align:middle ni belgilash kifoya, lekin tasvir uchun chiziq balandligi:Npx ni belgilashingiz kerak.

- Chetga yoki to'ldirishdan foydalanib chekinasizmi? Asosan, chekka bloklar orasidagi chekinish uchun xizmat qiladi; bu "tashqi" chekinishdir, chunki to'ldirish "ichkariga" chekinish bo'lib, ko'pincha matn atrofida chekinishni tashkil qilish uchun ishlatiladi. Bu oddiy narsaga o'xshaydi, lekin ba'zida siz o't o'chiruvchisi kabi marvaridlarga duch kelishingiz mumkin, men buni bu erda eslatib o'tolmayman.

- Horizontal va vertikal siljishlar bilan birgalikda chekka yoki pozitsiyadan foydalanib blokni siljiting? Albatta, bu holatlarda siz marjadan foydalanishingiz kerak. To'g'ri, boshqa joylarda bo'lgani kabi, barchasi muayyan holatga bog'liq, lekin umuman olganda siz hali ham marjdan foydalanishingiz kerak.

- Blok mazmuniga mos keladigan divni qanday cho'zish kerak? Buning uchun siz balandlikni belgilashingiz kerak: avtomatik;

Qanday qilib divni ota-onasining balandligiga cho'zish mumkin, bu esa o'z navbatida birinchi div yonida joylashgan div tarkibining balandligiga cho'ziladi? Kontent divni balandlikka o'rnating: avtomatik, qolgan ikkita divni balandlikka: 100% va displey: jadval;

- Qanday qilib divni ko'rinmas qilish mumkin? Displey xususiyatini manipulyatsiya qilish orqali. Ko'rinmaslik uchun uni "Hech" ga o'rnating.

- Statik balandlikdagi divda tarkibni qanday aylantirish mumkin? Biz to'ldirishni o'rnatdik: xususiyatlarni aylantiring.

- Qanday qilib (masalan) “a” tegini div (blok) sifatida ko'rsatish mumkin? Xususiyatlarda balandlik va kenglikni o'rnating va displeyni o'rnating:blok;

Bu divlarni og'riqsiz terish uchun bilishingiz kerak bo'lgan hamma narsa.Aslida, agar boshqa savollar tug'ilsa, javoblar darhol shu yerda paydo bo'ladi!Ammo, umuman olganda, qo'rqadigan hech narsa yo'q - yarim soatlik mashg'ulot va siz. 'allaqachon pro bo'lib, bu eskirgan jadvallarni bir chetga surib qo'ying va evolyutsiyaning yangi bosqichiga o'ting!

Teglar: tez-tez so'raladigan savollar, div, tartib, o'quv qo'llanma

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 juda ahamiyatsiz yechim oddiy vositalar bilan CSS spetsifikatsiyasining yana 2 ta versiyasi.

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). Yana biz faqat foydalanamiz CSS vositalari 2.0. 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.