Tarkib sahifa kengligining 70 qismini egallaydi. HTML sahifa elementlarining o'lchamlarini o'rnatish uchun CSS kengligi va balandligi parametrlari
Zamonaviy tartibda veb-sahifalarda siz ko'pincha sahifa kengligining 100% ni egallagan bloklarni topishingiz mumkin.
Bu shunday ko'rinadi:
Keling, ushbu effektga qanday erishish mumkinligini aniqlaylik.
Masalan, quyidagi vaziyatni ko'rib chiqaylik.
Keling, olingan natijani ko'rib chiqaylik.
Umuman olganda, yaxshi, lekin blokning yon tomonlarida butun rasmni buzadigan kichik chuqurliklar mavjud. Men ularni olib tashlamoqchiman.
Aqlga keladigan birinchi narsa blokga kenglik:100% xususiyatni belgilashdir. Ammo bu vaziyatni hech qanday tarzda o'zgartirmaydi. Buni o'zingiz ko'rishingiz mumkin.
Shuning uchun siz kenglik:100% xususiyatni xavfsiz olib tashlashingiz mumkin.
Bunday chekinishlarning asl sababi nimada?
Gap shundaki, biz kengligi 100% ni tashkil qilmoqchi bo'lgan div bloki ikkita asosiy elementda saqlanadi body va html. Odatiy bo'lib, brauzerlar ularga to'ldirish va chegara xususiyatlari uchun maxsus qiymatlarni beradi.
Muammoni hal qilish uchun siz faqat ushbu chekinishlarni tiklashingiz kerak. Buni qilish juda oson:
Keling, blok qanday ko'rinishini ko'rib chiqaylik.
Hammasi yaxshi, yon tomonlardagi bo'sh joy olib tashlandi.
Sizni mening ochilish sahifamni loyihalash xizmati qiziqtirishi mumkin. Keyin bu haqda ko'proq ma'lumot olish uchun quyidagi havolani bosing.
Ochilish sahifasini joylashtirish xizmati.
Bugungi kunda turli xil ruxsatlarga ega bo'lgan juda ko'p ekranlar mavjud, ya'ni saytlar ularda boshqacha ko'rsatiladi. Bu kodni yozishda va qoidalarga rioya qilishda e'tiborga olinishi kerak turli ekranlar uchun tartiblar.
Oldingi maqolada biz turli xil brauzerlar uchun tartiblarni qanday yaratishingiz mumkinligini allaqachon ko'rib chiqdik, ammo bu erda biz turli xil ekranlar va ularning o'lchamlari haqida gapiramiz.
Turli xil rezolyutsiyalarga qarshi "jang qilish" usullaridan biri kauchuk sxemasidan foydalanishdir. Bunday holda, sayt turli o'lchamlarga cho'ziladi va qisqaradi; buni brauzer kengligini o'zgartirganda saytlarda ko'rish mumkin. Mening saytimda, aksincha, statik tartib ishlatiladi.
Turli ekranlar uchun tartibni qo'llash uchun uslublar qoidasi yordam beradi @media. Masalan,
@media (maksimal kenglik: 1024px;) (
Hammasi (toʻldirish: 10px;)
Ushbu yozuv sinf uchun ekanligini bildiradi hammasi chekinish qo'llaniladi 10px ekran o'lchamlari bo'lgan holatda 1024 pikselgacha.
Agar siz oraliq ekranlar uchun qoidani belgilashingiz kerak bo'lsa, unda yozuv quyidagicha bo'ladi:
@media (minimal kenglik: 1024px;) va (maksimal kenglik: 1640px) (
.all (to‘ldirish: 10px;)
jadval (kengligi: 80%)
}
Bunday holda, uslub xususiyatlari 1024 dan 1640 pikselgacha bo'lgan ruxsatlardan foydalanadigan ekranlarga qo'llaniladi.
Agar ma'lum bir rezolyutsiya uchun juda ko'p turli xil uslublar mavjud bo'lsa, ularni alohida faylga qo'yish oqilonaroq bo'ladi. Buni amalga oshirish uchun saytning asosiy sahifasidan yo'lni ko'rsatayotganda, siz ichida bunday yozuvni kiritishingiz kerak :
Faqat mobil qurilmalar (planshetlar, smartfonlar) uchun qoidalarni ko'rsatish kerak bo'lganda, bu holda yozuv ishlatiladi maksimal qurilma kengligi yoki min-qurilma kengligi mos ravishda maksimal va minimal rezolyutsiyalarni ko'rsatish.
Bundan tashqari, atributdan foydalanib, qoidalardan faqat monitor ekranlari uchun foydalanishni ko'rsatishingiz mumkin - ekran. Kirish quyidagicha ko'rinadi:
@media ekrani (maksimal kenglik: 1380px) (… )
Bu shuni anglatadiki, uslublar faqat ekran kengligi 1380 pikselgacha bo'lgan ish stoli kompyuterlarida qo'llaniladi.
Xuddi shu tarzda, ekran o'rniga siz belgilashingiz mumkin qo'lda(mobil qurilmalar), chop etish(printerlar), proyeksiya(proyektorlar), tv(televizorlar).
Agar siz tashrif buyuruvchilarni so'nggi yangiliklar haqida xabardor qilmoqchi bo'lsangiz, so'nggi yangiliklar haqida xabar bering, siz maxsus xizmat yordamida amalga oshiriladigan elektron pochta xabarnomasiga buyurtma berishingiz mumkin. Bu sizga qulay va sifatli axborot byulletenlarini tashvishsiz olib borishga yordam beradi.
kenglik foizda%
Foiz - bu elementni o'z ichiga olgan blokga nisbatan o'lchov birligi. Bu tasvirlar uchun juda yaxshi ishlaydi: bu erda biz tasvir uchun o'lchamlarni o'rnatamiz, uning kengligi har doim konteyner kengligining 50% ni tashkil qiladi. Nima bo'lishini bilish uchun brauzer oynasini toraytirib ko'ring!
Siz hatto maksimal va minimal tasvir hajmini cheklash uchun ham foydalanishingiz mumkin!
foiz kengligi tartibi
Shablonni yaratish uchun siz foizdan foydalanishingiz mumkin, ammo bu yondashuv ko'proq mehnat talab qiladi. Ushbu misolda, brauzer oynasi juda tor bo'lsa, elementning mazmuni yoqimsiz tarzda o'rala boshlaydi. Bularning barchasi sizning kontentingiz bilan eng mos keladigan narsaga bog'liq.
Tartib juda tor bo'lsa, element tekislanadi. Bundan ham yomoni, buni tuzatish uchun navdan foydalana olmaysiz, chunki bu xususiyat o'ngdagi ustunni oldinga siljishiga to'sqinlik qilmaydi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Div balandligini CSS-dagi kenglikka teng qiling
Maecenas nisl est, ultrices nec congue eget, auctor vitae massasi. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. To'g'ridan-to'g'ri lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Biz sahifani brauzer oynasining o'lchamiga moslashtiramiz
Hozirgi vaqtda smartfonlardan tortib 42 dyuymli televizorlargacha va undan yuqori ekran o'lchamiga ega ko'plab raqamli qurilmalar mavjud. Kutilganidek, ushbu qurilmalarning barchasi turli xil ruxsatlarga ega (taxminan 320x240 dan 1920x1200 gacha) va ko'pincha veb-sahifani ushbu ruxsatlarning har biriga moslashtirish kerak bo'ladi. Bu yordamida amalga oshiriladi ommaviy axborot vositalari so'rovlari- selektor doirasini belgilash imkonini beruvchi CSS3 spetsifikatsiyasining bir qismi. Media so'rovlari - brauzer oynasining turi, kengligi va balandligi, o'lchamlari va fazoviy yo'nalishi kabi chiqish qurilmasining parametrlarini ko'rsatadigan blok. Hammasi qoida bilan boshlanadi @media, undan keyin qurilma turlari, mantiqiy operatorlar va media funktsiyalari. Quyidagi ro'yxatda biz barcha 3 mantiqiy operatorni belgilaymiz.
- va— mantiqiy “VA”, bir nechta shartlarni birlashtirish uchun ishlatiladi;
- emas- mantiqiy “EMAS”, har qanday shartni inkor etish uchun ishlatiladi;
- , - mantiqiy "YOKI", agar shartlardan kamida bittasi bajarilsa, uslub qo'llaniladi.
Endi media funktsiyalarini ko'rib chiqaylik. Ularning yordami bilan qurilmalarning texnik tavsiflari o'rnatiladi (masalan, brauzer oynasining o'lchami). Hozirda ulardan 12 tasi bor.
- aspekt-nisbati (min-nisbati, maksimal nisbati)— ko'rsatilgan maydonning kengligi va balandligi nisbatini aniqlaydi. Masalan, 2/3 bilan belgilanadi, ya'ni "/" belgisi bilan ajratilgan 2 ta raqam;
- rang (minimal rang, maksimal rang)— rang kanali uchun bitlar sonini aniqlaydi. Ma'nosi min rang: 2 RGB rang tizimining uchta kanalining har biri 2 2 ta soyani va barchasi birgalikda 4 * 4 * 4 = 64 xil rangni ko'rsatishi mumkinligini anglatadi. Agar qiymat umuman ko'rsatilmagan bo'lsa, unda rangli yoki yo'qligi tekshiriladi;
- rang indeksi (min-rang indeksi, maksimal rang indeksi)— qurilma qoʻllab-quvvatlaydigan ranglar sonini aniqlaydi;
- qurilma nisbati (minimum qurilma nisbati, maksimal qurilma nisbati)— qurilma ekranining tomonlar nisbatini aniqlaydi (2 ta chiziq bilan ajratilgan, masalan, 4/3);
- qurilma balandligi (minimum qurilma balandligi, maksimal qurilma balandligi)— qurilma ekranining yoki chop etilgan sahifaning butun mavjud balandligini aniqlaydi;
- qurilma kengligi (minimum qurilma kengligi, maksimal qurilma kengligi)— qurilma ekranining yoki chop etilgan sahifaning butun mavjud kengligini aniqlaydi;
- panjara— bu belgi o'lchami (terminal yoki telefon) bo'lgan qurilma ekanligini aniqlaydi;
- balandlik (minimum balandlik, maksimal balandlik)— ko'rsatilgan maydonning balandligini o'rnatadi;
- monoxrom (min-monoxrom, maksimal-monoxrom)— qurilmaning monoxrom ekanligini aniqlaydi, agar biror qiymat berilgan bo‘lsa, piksel boshiga bitlar soni ko‘rsatiladi. Masalan, 8 qiymati monoxrom displeydagi 2 8 rang rangiga teng;
- orientatsiya— qurilmaning landshaft rejimida ekanligini, qiymatini aniqlaydi manzara yoki portret ma'nosi portret;
- rezolyutsiya (minimum o'lcham, maksimal ruxsat)— dpi (dyuymdagi nuqta) yoki dpcm (santimetrdagi nuqta) da qurilma o'lchamlarini aniqlaydi;
- skanerlash— televizorni skanerlash turini aniqlaydi - interlace yoki progressiv. Interlaced skanerlashda televizor avval ramkaning toq chiziqlarini, keyin esa juft chiziqlarni ko'rsatadi, progressiv skanerlashda butun kadr uzatiladi va ko'rsatiladi;
- kenglik (minimal kenglik, maksimal kenglik)— ko'rsatilgan maydonning kengligini o'rnatadi;
Va endi bir misol.
CSS-da element o'lchamlarini bloklash
Keling, veb-sahifa yaratamiz va uning uslubini media so'rovlar yordamida o'rnatamiz.
Endi biz uslublar jadvalini o'rnatamiz:
#asosiy (
shrift o'lchami: 14px;
}
@media ekrani va (maksimal kenglik: 800px)(
#sarlavha(
fon: #ff6633;
kengligi: 100%;
balandligi: 10%;
}
#yuqori menyu(
matnni tekislash: markaz;
fon rangi: #ffcc66;
kengligi: 100%;
balandligi: 12%;
}
#yuqori menyu a(
rang: ko'k;
matn-bezatish:yo'q;
}
#topmenu a: suring(
rang: ko'k;
matnni bezatish:tagini chizish;
}
#tarkib(
fon rangi: #ffccff;
float:chap;
kengligi: 80%;
balandligi: 68%;
}
#yon panel(
float:chap;
fon rangi:#ff9966;
kengligi: 20%;
balandligi: 68%;
}
#yon panel a(
displey: blok;
padding-pastki: 3px;
rang: ko'k;
matn-bezatish:yo'q;
}
#yon panel a: suring(
rang: ko'k;
matnni bezatish:tagini chizish;
}
#footer(
aniq: ikkalasi ham;
fon rangi: #ffff33;
kengligi: 100%;
balandligi: 10%;
}
}
@media ekrani va (min-kengligi: 800px)(
#asosiy (
kengligi: 800px;
chegara: 0 avtomatik;
}
#sarlavha(
fon: #ff6633;
kengligi: 800px;
balandligi: 100px;
}
#yuqori menyu(
matnni tekislash: markaz;
fon rangi: #ffcc66;
kengligi: 800px;
balandligi: 30px;
}
#yuqori menyu a(
rang: ko'k;
matn-bezatish:yo'q;
}
#topmenu a: suring(
rang: ko'k;
matnni bezatish:tagini chizish;
}
#tarkib(
fon rangi: #ffccff;
float:chap;
kengligi: 650px;
balandligi: 400px;
}
#yon panel(
float:chap;
fon rangi:#ff9966;
kengligi: 150px;
balandligi: 400px;
}
#yon panel a(
displey: blok;
padding-pastki: 3px;
rang: ko'k;
matn-bezatish:yo'q;
}
#yon panel a: suring(
rang: ko'k;
matnni bezatish:tagini chizish;
}
#footer(
aniq: ikkalasi ham;
fon rangi: #ffff33;
kengligi: 800px;
balandligi: 50px;
}
}
Endi kodning o'ziga qaraylik. Html hujjatida hamma narsa aniq, keling, uslubni unga bog'laymiz mediastyle.css. Uslublar jadvalida avval shrift hajmini o'rnating. Keyinchalik aytamizki, agar ekranning kengligi (brauzer oynasi) 800 pikseldan kam bo'lsa, u uchun quyidagi qoidalarga amal qilinadi va biz barcha bloklarning o'lchamlarini oyna kengligidan foiz sifatida o'rnatamiz. Agar ekran kengligi 800 pikseldan katta bo'lsa, barcha bloklarning o'lchamini piksellarda o'rnating va xususiyat qiymatidan foydalanib, sahifaning o'rtasiga kontentning joylashishini o'rnating. chegara: 0 avtomatik;. Bu erda biz joylashishni aniqlash uchun suzuvchi bloklardan foydalanamiz. Bu bizning CSS-ni o'rganishimizni yakunlaydi. Biz yaratgan sahifaning namunasini bu erda ko'rish mumkin. Turli adabiyotlar va World Wide Web-dan foydalanib, kaskadli uslublar jadvallarini batafsilroq o'rganishingiz mumkin.
<<Предыдущая | В раздел
Tartibda qiyin narsa borga o'xshaydi. HTML va CSS hatto dasturlash tillari ham emas. HTML-sahifa shunchaki kerakli joyga joylashtirilgan bloklardir. Aslida, bu unchalik oddiy emas. Blok modelining nuanslarini tushunmasdan maketga o'tirish, natijalarni tasodifiy sozlash uchun ko'p vaqtni behuda sarflashni anglatadi, har safar kutilmagan natijalar yoki ularning yo'qligi bilan hayratda qoladi. Veb-sayt qurishda, qurilishda bo'lgani kabi, agar siz panjaradan ko'ra jiddiyroq narsalarni qurmoqchi bo'lsangiz, nozik narsalarni bilishingiz kerak.
blokning balandligi va kengligini aniqlash uchun css xususiyatlari.
Odatiy bo'lib, kenglikdagi blok unga mavjud bo'lgan barcha joyni egallaydi va asosiy blokning kengligi bilan chegaralanadi. Blokning balandligi uning tarkibiga qarab belgilanadi.
Blok o'lchamini balandlik va kenglik xususiyatlaridan foydalanib o'zgartirish mumkin.
CSS-da blok hajmini qanday o'rnatish kerak
Bu xususiyatlar butun blok uchun emas, balki uning mazmuni uchun o'rnatiladi. Buni eslab qolish kerak, chunki tarkibga qo'shimcha ravishda yana ikkita xususiyat blok hajmiga ta'sir qiladi - chegara va to'ldirish. Nomidan ko'rinib turibdiki, chegara chegarani belgilaydi. Rasmda chegara qizil chiziq bilan ko'rsatilgan. Chegara va kontent orasidagi bo'shliq to'ldirish xususiyati yordamida aniqlanadi. Agar siz uni o'rnatmasangiz, quyidagi rasmdagi matn chegaraga yaqin bosiladi.
Shunday qilib, blok hajmini hisoblashda, kenglik va balandlikdan tashqari, siz to'ldirish va chegarani hisobga olishingiz kerak. Masalan, quyidagi qiymatlar berilgan blok hajmini hisoblaylik:
- chegara: 5pxsolidred;
- to'ldirish: 10px;
- kengligi: 200px;
Blok kengligi 200px+10px*2+5px*2=230px
Arifmetika bilan boshingizni bezovta qilmaslik va har doim blokning o'lchamini aniq bilish uchun quti o'lchami xususiyati mavjud. Uchta qiymatni oladi.
- content-box - Kenglik va balandlikda ko'rsatilgan qiymatlar faqat tarkibga tegishli.
- padding-box - Kenglik va balandlikda ko'rsatilgan qiymat tarkibning o'lchamini va to'ldirish hajmini belgilaydi.
- border-box - Kenglik va balandlikda ko'rsatilgan qiymat kontentning o'lchamini va to'ldirish va chegarani aniqlaydi
Yuqoridagi misolga qatorni qo'shsangiz
blok hajmi belgilangan 200px bo'ladi va kontent kengligi 200px-10px*2-5px*2=170px gacha kamayadi.
bloklar orasidagi masofani qanday qilib to'g'ri o'rnatish kerakligi.
Bloklar haqida gapirish va marjani eslatmaslik noto'g'ri bo'lar edi, ayniqsa gaplashadigan narsa bor. Bilmaganlar uchun chegara blok atrofidagi bo'sh joyni aniqlaydi. To'ldirishdan farqli o'laroq, bu erda hamma narsa aniq emas. Biri ikkinchisining ichiga joylashtirilgan ikkita blokni ko'rib chiqing. Ichki blok chegarasini o'rnating: 10%. Bu foizlarni qaerdan hisoblash kerakligi darhol savol tug'iladi. Foizlar asosiy elementning kengligidan olinadi. Gorizontal yoki vertikal chekinishlarni belgilashimiz muhim emas. Ochig'ini aytganda, javob aniq emas, lekin agar siz tushuntirishlarga qarasangiz, nima uchun bu variant tanlanganligi aniq bo'ladi.
Syurprizlar shu bilan tugamaydi. bizning rasmimizga qo'shilgan marja shunday kutilmagan natija beradi.
Rasmdagi kul rang ota-ona blokini bildiradi. Bizning kutganimizdan farqli o'laroq, bolalar blokiga qo'llaniladigan chegara yuqorida va pastda ota-ona blokining chegaralarini kengaytirmadi. Bu ota-ona blokida qurish uchun hech narsa yo'qligi sababli sodir bo'ldi. Bunday hollarda, chekka tashqariga joylashtiriladi va ulashgan blokdan yoki undan yuqoriroq joylashgan blokning chegaralaridan uzoqlashtiriladi. Blokning ota-onasidan qaytarilishi uchun asosiy blokda to'ldirish yoki chegara yoki ko'rinadigan qiymatdan boshqa har qanday qiymatga ega bo'lgan to'ldirish xususiyati o'rnatilgan bo'lishi kerak.
Chiqindilarning yana bir xususiyati qulab tushishdir. Gap shundaki, agar ikkita qo'shni element belgilangan chegaraga ega bo'lsa, ular orasidagi masofa eng katta qiymatga teng bo'ladi.
marja salbiy qiymatlarni qabul qilishi mumkin. Bunday holda, bitta blok boshqasiga o'tadi. Bir blokning boshqasiga o'tish darajasi aniqlanadi
Blok elementi veb-sahifada to'rtburchaklar shaklida paydo bo'ladigan elementdir. Bunday element butun mavjud kenglikni egallaydi, elementning balandligi uning mazmuni bilan belgilanadi va u har doim yangi satrdan boshlanadi. Blok elementlariga konteynerlar kiradi
,
Bitta blok elementini boshqasining ichiga joylashtirishga, shuningdek ularning ichiga inline elementlarni joylashtirishga ruxsat beriladi ( , Masalan).
O'rnatilgan elementlarning ichiga blok elementlarini qo'shish taqiqlanadi (1-misol).
1-misol: Blok elementlaridan foydalanish
Ushbu misolda paragraf (teg
) idish ichiga kiritiladi
. Aytgancha, buning aksini qilish xato bo'ladi - qo'shing konteynerga (Ut wisi
), tegdan beri blok elementlariga taalluqli emas.
Inline elementlar ichida blok teglarini joylashtirish ular orasidagi farqni hali tushunmagan yangi boshlanuvchilar uchun ko'proq uchraydi.
Bundan tashqari, brauzerlar bunday xatolarni ushlashni va kodni ko'proq yoki kamroq to'g'ri ko'rsatishni o'rgandilar. Biroq, veb-sahifani xatosiz ko'rsatish uchun ushbu masala bo'yicha spetsifikatsiyaga rioya qilishingizni tavsiya qilamiz.
Blok elementining kengligi
Odatiy bo'lib, blok kengligi avtomatik ravishda hisoblanadi va barcha mavjud bo'sh joyni egallaydi. Bu o'rinda nimani nazarda tutayotganiga aniqlik kiritish kerak. Masalan, teg bo'lsa
Agar hujjat kodida bitta kod mavjud bo'lsa, u brauzer oynasining butun bo'sh kengligini egallaydi va blok kengligi 100% ga teng bo'ladi. Bitta teg qo'yishga arziydi boshqasining ichida, chunki ichki tegning kengligi uning ota-onasiga nisbatan hisoblana boshlaydi, ya'ni. tashqi konteyner.
Ba'zi brauzerlar kenglik tushunchasini juda erkin izohlaydilar, garchi CSS spetsifikatsiyasi kenglik quyidagi parametrlarning yig'indisi ekanligini aniq ko'rsatib turibdi: blokning o'zi (kenglik), chekka (chekka), maydonlar (to'ldirish) va chegaralar (chegara) . 2-misol ushbu komponentlarning barchasini o'z ichiga olgan qatlamni qanday yaratishni ko'rsatadi.
2-misol: Qatlam kengligi
Ushbu misol natijasida biz kengligi 342 piksel bo'lgan qatlamni olamiz. Shaklda. 1 qatlam kengligi nimadan iboratligini ko'rsatadi.
Shakl 1. Blok elementining kengligi
Qachon bo'lsakodda ko'rsatilmagan bo'lsa, Internet Explorer brauzeri width xususiyati qiymatini butun blokning kengligi sifatida oladi.
Keling, kenglik bilan bog'liq boshqa misolni ko'rib chiqaylik. Odatiy bo'lib, qatlam kengligi avtomatik ravishda o'rnatiladi, bu qatlamni o'rnatilgan maydonlarning qiymatlarini hisobga olmasdan brauzer oynasiga moslashtirishga imkon beradi. Agar siz kenglikni 100% ga o'zgartirsangiz, to'ldirish, chekka yoki chegara qiymatlarini qo'shganda gorizontal aylantirish paneli muqarrar ravishda paydo bo'ladi.
Universal natijaga erishish uchun bir nechta yondashuvlar mavjud. 3-misol uchta qatlamning yaratilishini ko'rsatadi, ularning kengligi foiz sifatida aniqlanadi.
Misol 3. Qatlam kengligi foizda
Misolning natijasi rasmda ko'rsatilgan. 2.
Guruch. 2. Brauzerda qatlam kengligini ko'rsatish
Ushbu misoldagi birinchi qavatning kengligi (1-qavat) 100% ga o'rnatiladi, bu esa gorizontal aylantirish panelini ko'rsatishga olib keladi. Ikkinchi qavat (2-qatlam) uchun kenglik ham 100% ga o'rnatiladi, lekin ichki paragraf (teg) uchun chegaralar aniqlanadi.
). Shu sababli, qatlam kengligi barcha brauzerlarda bir xil bo'ladi. Uchinchi qatlamda (3-qatlam) kenglik xususiyati umuman qo'llanilmaydi, shuning uchun u sukut bo'yicha aniqlanadi - avtomatik. Bunday holda, qatlam hech qanday gorizontal chiziqlarsiz brauzer oynasining butun kengligini egallaydi.
Kenglikni o'rnatish usuli foydalanilgan tartib va ishlab chiquvchining tanloviga bog'liq, ammo har qanday holatda siz blok elementlarining xususiyatlarini hisobga olishingiz va universal kodni yaratishingiz kerak.
Balandligi
Blok elementlarining balandligi bilan bog'liq vaziyat kenglikka o'xshaydi. Brauzer balandlik xususiyatining qiymatini qatlam balandligi sifatida qabul qiladi va unga chekka, to'ldirish va chegara qiymatlarini qo'shadi. Agar qatlam balandligi aniq belgilanmagan bo'lsa, u kontentning hajmiga qarab avtomatik ravishda hisoblanadi.
Aytaylik, qatlam piksel balandligiga o'rnatildi va qatlam tarkibi belgilangan balandlikdan aniq kattaroqdir (4-misol).
4-misol: Qatlam balandligi
Ushbu misolning natijasi rasmda ko'rsatilgan. 3.
Guruch. 3. Turli brauzerlarda blok balandligi
Ko'rinib turibdiki, brauzer balandlikni o'zgarishsiz qoldiradi, buning natijasida matn blokga sig'maydi va qatlamning yuqori qismiga o'rnatiladi.
Fon rangi
Elementning fon rangini o'rnatishning eng oson yo'li umumiy fon xususiyatidir. Bunday holda, kenglik, balandlik va to'ldirish qiymatlari bilan aniqlangan maydon fon bilan to'ldiriladi (4-rasm).
CSS-da bloklash variantlari
Fon rangi bilan to'ldirilgan qatlam maydoni
Shunday qilib, marj rangli maydonning shakllanishida ishtirok etmaydi.
Chegaralar
Blok elementlarini shakllantirishda brauzer yondashuvlarining farqi tufayli chegaralarni ko'rsatishda ham farq mavjud. Internet Explorer 7 brauzeri ramkani blokning ichiga, Firefox esa ramkani tashqariga tortadi. Ammo fonni to'ldirishdan foydalansak, biz butunlay qarama-qarshi rasmni ko'ramiz (5-rasm). Buning sababi shundaki, Firefox (Opera) fon rangini chegaraning tashqi chetiga o'rnatadi va Internet Explorer uni ichki chetiga o'rnatadi. 8.0 versiyasidan boshlab Internet Explorer freymni ko'rsatish uslubini o'zgartirdi, u xuddi Firefox-da bo'lgani kabi blok ichida chizilgan.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Guruch. 5. Brauzerlarda ramkani ko'rsatish
5-misol bunday chegarani olish uchun kodni qanday yaratishni ko'rsatadi.
5-misol: nuqtali ramka
Brauzerlarning chegaralarni chizish usulidagi farqlar faqat rangli fon va nuqtali chiziqlarda seziladi. Qattiq ramka uchun brauzerlarda qatlamning ko'rinishi deyarli bir xil bo'ladi.
Xulosa
Blok elementlari veb-sahifalarni joylashtirishda asosiy qurilish materiali sifatida ishlaydi. Bunday elementlar har doim yangi chiziqdan boshlanishi va ular joylashgan hududning barcha mavjud kengligini egallashi bilan tavsiflanadi.
CSS spetsifikatsiyasi elementning balandligi va kengligi nafaqat balandlik va kenglik qiymatlari, balki chekka, to'ldirish va chegaralar qiymatlari bilan ham aniqlanishini belgilaydi. Shu munosabat bilan brauzerlar ikki qismga bo'linadi: ba'zilari bu masalada spetsifikatsiyani qo'llab-quvvatlaydi, boshqalari esa buni e'tiborsiz qoldiradi va o'z yo'lida harakat qiladi. Bu universal veb-sahifalar yaratmoqchi bo'lgan dasturchilar uchun qiyinchiliklar tug'diradi. Biz faqat kenglik va balandlik xususiyatlarini cheklangan darajada ishlatishni maslahat beramiz, chunki sukut bo'yicha brauzer avtomatik argumentdan foydalanadi, bu elementning o'lchamlarini avtomatik ravishda sozlashga majbur qiladi.
Elementlar qanday turlarga bo'linadi?
Gap shundaki, veb-sahifadagi barcha fragmentlar blok emas. Elementlar odatda blokli va inline elementlarga bo'linadi. Ikkinchisini osongina bitta satrga yozish mumkin va qo'shimcha hech narsa yozish shart emas. Inline elementning oddiy misoli havoladir. Bitta satrda siz xohlagancha havolalar bo'lishi mumkin, agar ular unga mos keladi.
Blok elementlari butunlay boshqacha xatti-harakatlarga ega. Qo'shimcha manipulyatsiyalarsiz ular bir qatorda turolmaydilar. Bunday bloklarga misol qilib p teg bilan ko'rsatilgan paragrafni keltirish mumkin. Xo'sh, nega men bularning barchasini sizga aytyapman? Bu siz o'lchamni faqat blok elementlari uchun o'rnatish kerakligini tushunishingiz uchun aytilgan, biz ushbu maqolada nima qilamiz.
Guruch. 1. O'lchamni o'rnatishga yordam beradigan asosiy xususiyatlar
O'lchamlar uchun oddiy xususiyatlar
O'lchamlarni yozish uchun ishlatilishi mumkin bo'lgan eng oddiy xususiyatlar kenglik va balandlikdir. Ular mos ravishda kenglik va balandlikni bildiradi. Bundan tashqari, ularga min- va max- prefikslarini qo'shishingiz mumkin. Bunday holda, mos ravishda minimal va maksimal kenglik yoki balandlik o'rnatiladi.
Qiymatlar piksel yoki foizlarda yozilishi mumkin. Ba'zan em nisbiy birligi (shrift balandligi) ham ishlatiladi, lekin odatda matn hajmini aniqlash uchun ishlatiladi. Odatiy bo'lib, o'lchamlari foizlarda aniqlangan barcha panjaralar (shablonning asosiy qurilish bloklari) kauchuk deb ataladi. Bundan tashqari, foiz belgisi shablonni osongina moslashtirishga yordam beradi, bu ham juda muhimdir.
Pikseldagi o'lcham
Mutlaq qiymatlar piksellarda qayd etilgan. Masalan, butun sayt 1000 piksel kenglikdagi konteyner ichida bo'lishi kerak. Ushbu blok yaratiladi va unga kenglik yoziladi.
#konteyner (kengligi: 1000px; )
#idish(
kengligi: 1000px;
Agar shunday yozilgan bo'lsa, unda idishning kengligi hech qanday sharoitda o'zgarmaydi. O'lchovni o'zgartirganingizda yoki oynani kichraytirsangiz, u bir xil bo'lib qoladi. Sayt hajmi kamaymaydi va agar kerak bo'lsa, gorizontal aylantirish paneli paydo bo'ladi.
Bular sobit andozalar deb ataladi. Bugungi kunda ko'plab saytlar hali ham shunday ishlaydi. Masalan, Vkontakte ijtimoiy tarmog'i. Kompyuteringizdagi oyna hajmini kamaytirishga harakat qiling va shablon umuman o'zgarmasligini ko'rasiz. Albatta, VKontakte planshetlar va smartfonlar uchun alohida versiyalarga ega, shuning uchun ular sobit shablonni qoldirishga qaror qilishdi.
Va shunga qaramay, sayt tarmog'ining yangi ekranlarga moslashish qobiliyati bugungi kunda katta ahamiyatga ega, chunki mobil trafik o'sib bormoqda. Shu munosabat bilan, so'nggi yillarda sayt ramkasi uchun asosiy konteyner tobora qattiq bo'lmagan kenglikni oldi. Masalan, bu kabi:
#konteyner (maksimal kenglik: 1320px; )
#idish(
maksimal kenglik: 1320px;
Va u nimani anglatadi? Va agar kerak bo'lsa, blokning qisqarishi haqiqatdir. Agar siz derazani kichraytirsangiz, u ham qisqaradi. Shu bilan birga, agar ekran o'lchamlari imkon bersa, kengligi to'liq 1320 piksel bo'ladi. Oynani qisqartirish orqali siz gorizontal aylantirishni ko'rmaysiz.
Biroq, bu erda siz minimal kenglikni ham o'rnatishingiz mumkin. Agar bu xususiyat blokga yozilsa, u belgilangan qiymatdan toraymaydi. Masalan:
#konteyner (min. kengligi: 600px; )
#idish(
min - kengligi: 600px;
Agar oyna kengligi 600 pikseldan kam bo'lsa, blok qisqarishni to'xtatadi va xuddi shu gorizontal aylantirish paneli paydo bo'ladi.
Hajmi foizda
Qiymatni foiz sifatida belgilash tobora ommalashib bormoqda. To'g'ri ishlatilsa, bu turli xil qurilmalarda saytning ajoyib ko'rinishiga olib kelishi mumkin.
Misol uchun, siz chap tomonda veb-saytingizning yon ustunini va o'ng tomonda asosiy matn ma'lumotlari ko'rsatiladigan asosiy tarkibga ega bo'lgan maydonni yaratmoqchisiz. Masalan, maqola, mahsulot katalogi yoki forum mavzusi. Avval siz ushbu konteynerlarga taxminan qanday o'lchamlarni berishni xohlayotganingizni aniqlashingiz kerak.
#yonma paneli( float: chap; eni: 28%; ) #content( float: o'ng; en: 62%; )
#yon panel(
float: chap;
kengligi: 28%;
#tarkib(
suzuvchi: o'ng;
kengligi: 62%;
Natijada, yon panel asosiy elementning kengligidan 28% (va bizning holatlarimizda bu umumiy konteyner) va asosiy blok - 62% oladi. Ularning umumiy kengligi 90% bo'ladi. Qolgan 10 tasini har xil tashqi va ichki chekkalar, ramkalar va boshqalar uchun qoldiramiz.
Guruch. 2. Kauchuk bloklar brauzer oynasi kichraytirilganda ularning o'lchamlarini o'zgartiradi
To'ldirish blok o'lchamlariga qanday ta'sir qiladi?
width xususiyatidan foydalangan holda blokning kengligini o'rnatganingizda, u yakuniy qiymat bo'lmasligi mumkin. Gap shundaki, biz faqat to'g'ridan-to'g'ri tarkibni o'z ichiga olgan qismning kengligini aniqlaymiz. Shuni yodda tutish kerakki, CSS-da to'ldirish chegara kabi blokning hajmini oshiradi.
Keling, yon ustunni olaylik. Biz unga idishning butun kengligining 28 foizini berdik. Lekin yon paneldagi kontentning qirralarga yopishib qolishiga yo'l qo'ymaslik uchun unga bir oz to'ldirish kerak. Yon ustunga chegara qo'shishni ham xohlashingiz mumkin.
#yonka paneli( toʻldirish: 10px 20px; chegara: 2px qora; )
#yon panel(
to'ldirish: 10px 20px;
chegara: 2px qattiq qora;
Salom, aziz blog o'quvchilari. Bugun biz balandlik va kenglikdan foydalangan holda kontent maydonining o'lchamlarini qanday o'rnatishingiz va agar u uchun ajratilgan bo'sh joydan ko'proq bo'lsa, ushbu kontentning ko'rinishini qanday sozlash haqida gaplashamiz (CSS to'ldirish qoidasi bilan). qiymatlar yashirin, aylantirish, avtomatik).
Birinchi xatboshi matni
Ikkinchisining matni
Chunki Ushbu paragraflar uchun kenglik va balandlik ko'rsatilmagan, keyin sukut bo'yicha brauzerning o'zi ularni Avto qiymatini tushunishi asosida hisoblab chiqadi. Natijada, paragraflar kengligi va balandligi bo'yicha ulardagi tarkibning balandligiga mos keladigan barcha bo'sh joyni egallaydi.
Keling, birinchi o'zgartirishni kiritamiz va birinchi xatboshining kengligini qattiq kodlaymiz (kenglik: 50px):
Birinchisining matni
Ikkinchisining matni
Umuman olganda, kutilgan narsa sodir bo'ldi - gorizontal o'lcham width:50px-da ko'rsatilgan qiymatga tushdi va paragraf balandligi hali ham height:auto (standart qiymat) tufayli shakllantirildi. Natijada, u butun matnni o'z ichiga olishi mumkin bo'ldi.
Endi konteyner balandligini height:15px yordamida cheklaylik.
Natijada, biz matn endi bizning kichik paragraf konteynerimizga to'g'ri kelmasligini tushundik va shuning uchun u qo'shnisining maydoniga xavfsiz tarzda kirib ketdi. Bu aynan shunday vaziyatlarda tarkibning harakatini nazorat qilish uchun xizmat qiladi. toshib ketish qoidasi.
Overflow "toshib ketish" yoki boshqacha aytganda "tarkibni to'ldirish" degan ma'noni anglatadi. Agar tarkib unga ajratilgan hududga (konteynerga) to'g'ri kelmasa, nima bo'lishi kerakligi haqida gapiradi.
Overflow bir nechta to'g'ri qiymatlarga ega, ammo sukut bo'yicha ko'rinadigan (ko'rsatish):
Shuning uchun bizning oxirgi misolimizda yuqori xatboshi matni pastki qismi bilan bir-biriga yopishdi (sukut bo'yicha overflow:visible ishlatilgan - konteynerga mos kelmaydigan tarkibni ko'rsatish). Biz boshqa ekstremaldan foydalanishimiz mumkin - toshib ketish: yashirin. Keyin konteyner ichiga sig'maydigan hamma narsa veb-sahifada ko'rsatilmaydi:
Ushbu CSS xususiyatining qolgan ikkita qiymati konteynerga to'g'ri kelmaydigan tarkibni aylantirish imkonini beradi (biz o'rganganimizda shunga o'xshash narsani allaqachon kuzatgan edik). Shunday qilib, agar tarkib belgilangan konteynerga xavfsiz sig'sa ham, aylantirish vertikal va gorizontal aylantirish chiziqlarini ko'rsatadi:
Ammo qiymatdan foydalanish ancha mantiqiyroq bo'ladi Avtomatik Agar aylantirish panellarini yaratish kerak bo'lsa, Overflow uchun. Bunday holda, brauzerning o'zi ularni qachon va qaysi o'qlarda ko'rsatishni hisoblab chiqadi.
Misol uchun, agar biz overflow:auto dan foydalansak, biz faqat kontent konteyner chegaralariga to'g'ri kelmaydigan o'q bo'ylab aylana olamiz:
Birinchisining matni
Ikkinchisining matni
Xulosa qilib aytishimiz mumkinki, Overflow juda imkon beradi kontentni ko'rsatish imkoniyatlarini moslashuvchan tarzda sozlash u o'z idishidan chiqib ketganda. Qolgan (ko'rinadigan) kontentni ko'rsatish, uni ko'rsatmaslik (kesib - yashirin) yoki kerak bo'lganda aylantirish (aylantirish) yoki aylantirishni majburiy qilish (avtomatik) imkoniyatiga ega bo'lasiz.
Ushbu qoidani yozishning CSS3 bilan bog'liq variantlari ham mavjud, ammo ular barcha brauzerlar tomonidan qo'llab-quvvatlanadi, ya'ni ulardan xavfsiz foydalanish mumkin. Men alohida o'qlarda (x - gorizontal, y - vertikal) aylantirishni o'rnatish yoki o'rnatmaslik imkonini beruvchi overflow-x va overflow-y variantlari haqida gapiryapman.
Agar, masalan, gorizontal aylantirish hech qachon paydo bo'lmasligiga ishonch hosil qilishingiz kerak bo'lsa va vertikal aylantirish faqat kerak bo'lganda paydo bo'lsa (agar tarkib mos kelmasa), Html elementi uchun overflow-x:hidden va overflow-ni belgilashingiz kerak bo'ladi. y: avto. Hammasi shu, muammo hal qilinadi, chunki bu quloq hiylasi barcha brauzerlar tomonidan qo'llab-quvvatlanadi.
Balandlik va kenglik foiz sifatida - nima uchun sizga doctype kerak?
Endi foiz sifatida belgilangan kenglik nimadan hisoblangani haqida gapiraylik. Esingizda bo'lsin, maqolaning boshida men diqqatimizni bunga qaratishga va'da bergandim. Aslida, CSS kengligi qoidasi bu erda istisno emas va xuddi to'ldirish va chekka kabi, kontent konteynerining gorizontal o'lchamining foizi sifatida hisoblanadi.
Vaziyat foiz sifatida ko'rsatilgan kontent maydonining balandligi bilan biroz chalkashroq. Xuddi shu narsa idishning balandligiga ham tegishli deb taxmin qilish mantiqan to'g'ri keladi. Ammo bu erda biz dualizmga (ikkita xulq-atvor modeli) duch kela boshlaymiz - ular ilgari bo'lgani kabi va hozir ham qabul qilingan standartlarga muvofiq. Shu munosabat bilan biz ilgari muhokama qilgan ekran rejimlari mavzusiga yana bir bor to'xtalib o'tishimiz kerak.
Tarixiy jihatdan, standartlar qabul qilingandan so'ng, sof Html tilining eski qoidalariga muvofiq yaratilgan ko'plab hujjatlar hali ham mavjud edi va ular bilan nimadir qilish kerak edi. Shu bilan birga, u ham rivojlanib bordi (uslubni belgilash tili paydo bo'ldi va ba'zi teglar va atributlar eskirdi), shuning uchun brauzerga ushbu kodni tahlil qilish uchun qanday standartlar bo'yicha kerak bo'lishini qandaydir tarzda ko'rsatish kerak edi.
Yangi hujjatlarni (barcha paydo bo'lgan standartlarni hisobga olgan) va eskilarini (ko'pincha sof Html dan boshqa hech narsani hisobga olmagan) ajratish uchun Melkosoft o'sha paytda paydo bo'lgan XML tilidan kichik xususiyatdan foydalanishni taklif qildi. . Bu xususiyat xizmat xususiyati edi va endi hujjat turi deklaratsiyasi deb ataladi.
Bu boshqacha ko'rinishi mumkin (yuqorida aytib o'tilgan maqolada bu haqda ko'proq o'qing), ammo bu variant har doim ishlaydi:
Shunday qilib, brauzer hujjatni tahlil qilish uchun qanday standartlardan foydalanishi kerakligi haqida marker oldi. Agar hujjat turi deklaratsiyasi mavjud bo'lsa, u standartlar rejimiga o'tadi. Agar brauzer hujjat kodining birinchi qatorida hujjat turini topa olmasa (yoki u noto'g'ri yozilgan bo'lsa, bu uning yo'qligi bilan bir xil), u deb ataladigan narsaga o'tadi. ayyorlik rejimi(g'ayrioddiy rejim).
Hujjat turiga ega bo'lmagan hujjat brauzerda juda eski (antik) kabi paydo bo'ladi. Agar siz xuddi shu hujjatga deklaratsiya qo'shsangiz, u holda brauzer o'zining qadimiyligini yo'qotadi va hozirda qabul qilingan barcha standartlarga muvofiq hujjat kodi bilan ishlashni boshlaydi.
Ammo antik davr tushunchasi juda boshqacha. Misol uchun, faqat 2008 yilda paydo bo'lgan hozirgi mashhur Google Chrome brauzeri necha yoshda bo'lishi mumkin? Albatta, IE ancha boy tarixga ega. Shuning uchun, har qanday versiyaning barcha brauzerlari hujjatni eskisi kabi deklaratsiyasiz (g'ayrioddiy rejimda yoki nayranglarda) ko'rsatadi, chunki bu asosiy versiya hisoblanadi.
Nega men brauzerni ko'rsatish rejimlari haqida uzoq vaqt gaplashdim? Ammo bu ikki rejim uchun kontent maydonining balandligini foiz sifatida ko'rsatish ushbu balandlikni hisoblash bilan bog'liq holda juda farq qiladi.
Standartlar rejimida tarkibga ega maydonning balandligini (foizda) o'rnatish (hujjatning boshida to'g'ri hujjat turi ko'rsatilganda), agar ushbu tarkib o'ralgan konteyner uchun balandlik (ko'rsatilgan bo'lsa) umuman mumkin bo'lmaydi. foiz balandligingiz e'tiborga olinmaydi).
Tarkib
Hujjat kodidan doctype deklaratsiyasini olib tashlasak, biz quyidagi rasmni ko'ramiz:
Quyidagi standartlar rejimi uchun (deklaratsiya hujjatning boshida yoziladi) birinchi navbatda konteyner balandligini belgilashingiz kerak (bizning holatlarimizda, Div uchun konteyner Body yorlig'i bo'ladi) va shundan keyingina brauzer. balandlikni to'g'ri boshqaradi: 100%:
Tarkib
Natijada, kontent maydonining balandligini foiz sifatida belgilashda biz ikkita mutlaqo boshqa yondashuvga ega bo'ldik, shuning uchun muammolarni oldini olish uchun men sizga albatta maslahat beraman to'g'ri doctype deklaratsiyasini belgilang barcha hujjatlaringiz (veb-sahifalar) boshida. Yana bir misol borki, standartlarga rioya qilish rejimi va hiyla-nayranglar rejimi o'rtasidagi farq juda katta bo'ladi.
Agar siz istalgan Html elementi uchun kontent maydoni uchun balandlik va kenglikni o'rnatsangiz, shuningdek, ushbu teg uchun to'ldirish va chegara kengligini belgilasangiz, u holda turli brauzerlarda g'ayrioddiy rejimda (yozma deklaratsiyasiz) bu hamma narsani turli yo'llar bilan talqin qilish mumkin.
Eski IE 5.5 brauzerida to'ldirish va ramka kengligi balandlik va kenglik orqali belgilangan o'lchamlardan ichkariga qarab hisoblanadi. Bular. elementning umumiy hajmi ushbu CSS xususiyatlarida o'rnatilgan narsalarga mos keladi (bu endi ishlatilmaydigan eski sxema).
Boshqa zamonaviy brauzerlarda to'ldirish va chegara kengligi balandlik va kenglikda ko'rsatilgan o'lchamlarga qo'shiladi. Bular. bu holda (doctype holda ayyorlik rejimi), kontent maydonining dastlab belgilangan o'lchamlari ichki to'ldirish va chegara miqdori bilan kengaytiriladi.
Xo'sh, agar siz hujjatga ko'rsatma yozsangiz, unda mutlaqo barcha zamonaviy va eski brauzerlarda yondashuvning ikki tomonlamaligi bilan bog'liq bu muammolarni osongina oldini olish mumkin. Bunday holda va IE 5.5 da to'ldirish va chegara kengligi zamonaviy CSS standartlari talab qilganidek, kontent maydoni o'lchamlariga qo'shiladi. Shuning uchun, oldini olish uchun har doim doctype dan foydalaning.
Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha
Sizni qiziqtirishi mumkin
Pozitsiya (mutlaq, nisbiy va qat'iy) - CSS-da Html elementlarini joylashtirish usullari (chap, o'ng, yuqori va pastki qoidalar)
CSS-da suzish va tozalash - blokirovka qilish vositalari
Padding, Margin and Border - CSS-da ichki va tashqi to'ldirishni, shuningdek barcha tomonlar uchun chegaralarni (yuqori, pastki, chap, o'ng) o'rnating.
Sichqoncha kursorini o'zgartirish uchun Z-indeks va CSS Kursor qoidasi yordamida joylashishni aniqlash
CSS nima uchun, kaskadli uslublar jadvallarini Html hujjatiga qanday ulash va ushbu tilning asosiy sintaksisi
Teg, sinf, Id va universal selektorlar, shuningdek zamonaviy CSS-dagi atribut selektorlari
Css-dagi ustuvorliklar va ularni tanlash, foydalanuvchi va muallif uslublarining muhim, kombinatsiyasi va guruhlanishi tufayli ko'payishi CSS orqali ichki va tashqi havolalar uchun turli uslublar
O'lchov birliklari (piksellar, Em va Ex) va CSS-dagi meros qoidalari
CSS-da ko'rsatish (blok, yo'q, inline) - veb-sahifadagi Html elementlarini ko'rsatish turini o'rnating
Odatiy bo'lib, blok elementlari avtomatik kenglikdan foydalanadi. Bu shuni anglatadiki, bo'sh joy qancha bo'lsa, element gorizontal ravishda cho'ziladi. 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 xususiyati kengligi elementning kontent maydonining kengligini va xususiyatini o'rnatish imkonini beradi balandligi Tarkib maydoni balandligi:
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 chap tomonning kengligini qo'shishingiz kerak. o'ng chegara. Xuddi shu narsa elementning umumiy balandligi uchun ham amal qiladi, faqat barcha qiymatlar vertikal ravishda hisoblanadi:
Hujjat nomi
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 xususiyatidan foydalanishingiz mumkin. toshib ketish. 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.
Hujjat nomi
Savolingizga javob topa olmadingizmi? Mana qarang
Ut wisi
), tegdan beri blok elementlariga taalluqli emas.Inline elementlar ichida blok teglarini joylashtirish ular orasidagi farqni hali tushunmagan yangi boshlanuvchilar uchun ko'proq uchraydi.
Bundan tashqari, brauzerlar bunday xatolarni ushlashni va kodni ko'proq yoki kamroq to'g'ri ko'rsatishni o'rgandilar. Biroq, veb-sahifani xatosiz ko'rsatish uchun ushbu masala bo'yicha spetsifikatsiyaga rioya qilishingizni tavsiya qilamiz.
Blok elementining kengligi
Odatiy bo'lib, blok kengligi avtomatik ravishda hisoblanadi va barcha mavjud bo'sh joyni egallaydi. Bu o'rinda nimani nazarda tutayotganiga aniqlik kiritish kerak. Masalan, teg bo'lsa
Ba'zi brauzerlar kenglik tushunchasini juda erkin izohlaydilar, garchi CSS spetsifikatsiyasi kenglik quyidagi parametrlarning yig'indisi ekanligini aniq ko'rsatib turibdi: blokning o'zi (kenglik), chekka (chekka), maydonlar (to'ldirish) va chegaralar (chegara) . 2-misol ushbu komponentlarning barchasini o'z ichiga olgan qatlamni qanday yaratishni ko'rsatadi.
2-misol: Qatlam kengligi
Ushbu misol natijasida biz kengligi 342 piksel bo'lgan qatlamni olamiz. Shaklda. 1 qatlam kengligi nimadan iboratligini ko'rsatadi.
Shakl 1. Blok elementining kengligi
Qachon bo'lsakodda ko'rsatilmagan bo'lsa, Internet Explorer brauzeri width xususiyati qiymatini butun blokning kengligi sifatida oladi.
Keling, kenglik bilan bog'liq boshqa misolni ko'rib chiqaylik. Odatiy bo'lib, qatlam kengligi avtomatik ravishda o'rnatiladi, bu qatlamni o'rnatilgan maydonlarning qiymatlarini hisobga olmasdan brauzer oynasiga moslashtirishga imkon beradi. Agar siz kenglikni 100% ga o'zgartirsangiz, to'ldirish, chekka yoki chegara qiymatlarini qo'shganda gorizontal aylantirish paneli muqarrar ravishda paydo bo'ladi.
Universal natijaga erishish uchun bir nechta yondashuvlar mavjud. 3-misol uchta qatlamning yaratilishini ko'rsatadi, ularning kengligi foiz sifatida aniqlanadi.
Misol 3. Qatlam kengligi foizda
Misolning natijasi rasmda ko'rsatilgan. 2.
Guruch. 2. Brauzerda qatlam kengligini ko'rsatish
Ushbu misoldagi birinchi qavatning kengligi (1-qavat) 100% ga o'rnatiladi, bu esa gorizontal aylantirish panelini ko'rsatishga olib keladi. Ikkinchi qavat (2-qatlam) uchun kenglik ham 100% ga o'rnatiladi, lekin ichki paragraf (teg) uchun chegaralar aniqlanadi.
). Shu sababli, qatlam kengligi barcha brauzerlarda bir xil bo'ladi. Uchinchi qatlamda (3-qatlam) kenglik xususiyati umuman qo'llanilmaydi, shuning uchun u sukut bo'yicha aniqlanadi - avtomatik. Bunday holda, qatlam hech qanday gorizontal chiziqlarsiz brauzer oynasining butun kengligini egallaydi.
Kenglikni o'rnatish usuli foydalanilgan tartib va ishlab chiquvchining tanloviga bog'liq, ammo har qanday holatda siz blok elementlarining xususiyatlarini hisobga olishingiz va universal kodni yaratishingiz kerak.
Balandligi
Blok elementlarining balandligi bilan bog'liq vaziyat kenglikka o'xshaydi. Brauzer balandlik xususiyatining qiymatini qatlam balandligi sifatida qabul qiladi va unga chekka, to'ldirish va chegara qiymatlarini qo'shadi. Agar qatlam balandligi aniq belgilanmagan bo'lsa, u kontentning hajmiga qarab avtomatik ravishda hisoblanadi.
Aytaylik, qatlam piksel balandligiga o'rnatildi va qatlam tarkibi belgilangan balandlikdan aniq kattaroqdir (4-misol).
4-misol: Qatlam balandligi
Ushbu misolning natijasi rasmda ko'rsatilgan. 3.
Guruch. 3. Turli brauzerlarda blok balandligi
Ko'rinib turibdiki, brauzer balandlikni o'zgarishsiz qoldiradi, buning natijasida matn blokga sig'maydi va qatlamning yuqori qismiga o'rnatiladi.
Fon rangi
Elementning fon rangini o'rnatishning eng oson yo'li umumiy fon xususiyatidir. Bunday holda, kenglik, balandlik va to'ldirish qiymatlari bilan aniqlangan maydon fon bilan to'ldiriladi (4-rasm).
CSS-da bloklash variantlari
Fon rangi bilan to'ldirilgan qatlam maydoni
Shunday qilib, marj rangli maydonning shakllanishida ishtirok etmaydi.
Chegaralar
Blok elementlarini shakllantirishda brauzer yondashuvlarining farqi tufayli chegaralarni ko'rsatishda ham farq mavjud. Internet Explorer 7 brauzeri ramkani blokning ichiga, Firefox esa ramkani tashqariga tortadi. Ammo fonni to'ldirishdan foydalansak, biz butunlay qarama-qarshi rasmni ko'ramiz (5-rasm). Buning sababi shundaki, Firefox (Opera) fon rangini chegaraning tashqi chetiga o'rnatadi va Internet Explorer uni ichki chetiga o'rnatadi. 8.0 versiyasidan boshlab Internet Explorer freymni ko'rsatish uslubini o'zgartirdi, u xuddi Firefox-da bo'lgani kabi blok ichida chizilgan.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Guruch. 5. Brauzerlarda ramkani ko'rsatish
5-misol bunday chegarani olish uchun kodni qanday yaratishni ko'rsatadi.
5-misol: nuqtali ramka
Brauzerlarning chegaralarni chizish usulidagi farqlar faqat rangli fon va nuqtali chiziqlarda seziladi. Qattiq ramka uchun brauzerlarda qatlamning ko'rinishi deyarli bir xil bo'ladi.
Xulosa
Blok elementlari veb-sahifalarni joylashtirishda asosiy qurilish materiali sifatida ishlaydi. Bunday elementlar har doim yangi chiziqdan boshlanishi va ular joylashgan hududning barcha mavjud kengligini egallashi bilan tavsiflanadi.
CSS spetsifikatsiyasi elementning balandligi va kengligi nafaqat balandlik va kenglik qiymatlari, balki chekka, to'ldirish va chegaralar qiymatlari bilan ham aniqlanishini belgilaydi. Shu munosabat bilan brauzerlar ikki qismga bo'linadi: ba'zilari bu masalada spetsifikatsiyani qo'llab-quvvatlaydi, boshqalari esa buni e'tiborsiz qoldiradi va o'z yo'lida harakat qiladi. Bu universal veb-sahifalar yaratmoqchi bo'lgan dasturchilar uchun qiyinchiliklar tug'diradi. Biz faqat kenglik va balandlik xususiyatlarini cheklangan darajada ishlatishni maslahat beramiz, chunki sukut bo'yicha brauzer avtomatik argumentdan foydalanadi, bu elementning o'lchamlarini avtomatik ravishda sozlashga majbur qiladi.
Elementlar qanday turlarga bo'linadi?
Gap shundaki, veb-sahifadagi barcha fragmentlar blok emas. Elementlar odatda blokli va inline elementlarga bo'linadi. Ikkinchisini osongina bitta satrga yozish mumkin va qo'shimcha hech narsa yozish shart emas. Inline elementning oddiy misoli havoladir. Bitta satrda siz xohlagancha havolalar bo'lishi mumkin, agar ular unga mos keladi.
Blok elementlari butunlay boshqacha xatti-harakatlarga ega. Qo'shimcha manipulyatsiyalarsiz ular bir qatorda turolmaydilar. Bunday bloklarga misol qilib p teg bilan ko'rsatilgan paragrafni keltirish mumkin. Xo'sh, nega men bularning barchasini sizga aytyapman? Bu siz o'lchamni faqat blok elementlari uchun o'rnatish kerakligini tushunishingiz uchun aytilgan, biz ushbu maqolada nima qilamiz.
Guruch. 1. O'lchamni o'rnatishga yordam beradigan asosiy xususiyatlar
O'lchamlar uchun oddiy xususiyatlar
O'lchamlarni yozish uchun ishlatilishi mumkin bo'lgan eng oddiy xususiyatlar kenglik va balandlikdir. Ular mos ravishda kenglik va balandlikni bildiradi. Bundan tashqari, ularga min- va max- prefikslarini qo'shishingiz mumkin. Bunday holda, mos ravishda minimal va maksimal kenglik yoki balandlik o'rnatiladi.
Qiymatlar piksel yoki foizlarda yozilishi mumkin. Ba'zan em nisbiy birligi (shrift balandligi) ham ishlatiladi, lekin odatda matn hajmini aniqlash uchun ishlatiladi. Odatiy bo'lib, o'lchamlari foizlarda aniqlangan barcha panjaralar (shablonning asosiy qurilish bloklari) kauchuk deb ataladi. Bundan tashqari, foiz belgisi shablonni osongina moslashtirishga yordam beradi, bu ham juda muhimdir.
Pikseldagi o'lcham
Mutlaq qiymatlar piksellarda qayd etilgan. Masalan, butun sayt 1000 piksel kenglikdagi konteyner ichida bo'lishi kerak. Ushbu blok yaratiladi va unga kenglik yoziladi.
#konteyner (kengligi: 1000px; )
#idish( kengligi: 1000px; |
Agar shunday yozilgan bo'lsa, unda idishning kengligi hech qanday sharoitda o'zgarmaydi. O'lchovni o'zgartirganingizda yoki oynani kichraytirsangiz, u bir xil bo'lib qoladi. Sayt hajmi kamaymaydi va agar kerak bo'lsa, gorizontal aylantirish paneli paydo bo'ladi.
Bular sobit andozalar deb ataladi. Bugungi kunda ko'plab saytlar hali ham shunday ishlaydi. Masalan, Vkontakte ijtimoiy tarmog'i. Kompyuteringizdagi oyna hajmini kamaytirishga harakat qiling va shablon umuman o'zgarmasligini ko'rasiz. Albatta, VKontakte planshetlar va smartfonlar uchun alohida versiyalarga ega, shuning uchun ular sobit shablonni qoldirishga qaror qilishdi.
Va shunga qaramay, sayt tarmog'ining yangi ekranlarga moslashish qobiliyati bugungi kunda katta ahamiyatga ega, chunki mobil trafik o'sib bormoqda. Shu munosabat bilan, so'nggi yillarda sayt ramkasi uchun asosiy konteyner tobora qattiq bo'lmagan kenglikni oldi. Masalan, bu kabi:
#konteyner (maksimal kenglik: 1320px; )
#idish( maksimal kenglik: 1320px; |
Va u nimani anglatadi? Va agar kerak bo'lsa, blokning qisqarishi haqiqatdir. Agar siz derazani kichraytirsangiz, u ham qisqaradi. Shu bilan birga, agar ekran o'lchamlari imkon bersa, kengligi to'liq 1320 piksel bo'ladi. Oynani qisqartirish orqali siz gorizontal aylantirishni ko'rmaysiz.
Biroq, bu erda siz minimal kenglikni ham o'rnatishingiz mumkin. Agar bu xususiyat blokga yozilsa, u belgilangan qiymatdan toraymaydi. Masalan:
#konteyner (min. kengligi: 600px; )
#idish( min - kengligi: 600px; |
Agar oyna kengligi 600 pikseldan kam bo'lsa, blok qisqarishni to'xtatadi va xuddi shu gorizontal aylantirish paneli paydo bo'ladi.
Hajmi foizda
Qiymatni foiz sifatida belgilash tobora ommalashib bormoqda. To'g'ri ishlatilsa, bu turli xil qurilmalarda saytning ajoyib ko'rinishiga olib kelishi mumkin.
Misol uchun, siz chap tomonda veb-saytingizning yon ustunini va o'ng tomonda asosiy matn ma'lumotlari ko'rsatiladigan asosiy tarkibga ega bo'lgan maydonni yaratmoqchisiz. Masalan, maqola, mahsulot katalogi yoki forum mavzusi. Avval siz ushbu konteynerlarga taxminan qanday o'lchamlarni berishni xohlayotganingizni aniqlashingiz kerak.
#yonma paneli( float: chap; eni: 28%; ) #content( float: o'ng; en: 62%; )
#yon panel( float: chap; kengligi: 28%; #tarkib( suzuvchi: o'ng; kengligi: 62%; |
Natijada, yon panel asosiy elementning kengligidan 28% (va bizning holatlarimizda bu umumiy konteyner) va asosiy blok - 62% oladi. Ularning umumiy kengligi 90% bo'ladi. Qolgan 10 tasini har xil tashqi va ichki chekkalar, ramkalar va boshqalar uchun qoldiramiz.
Guruch. 2. Kauchuk bloklar brauzer oynasi kichraytirilganda ularning o'lchamlarini o'zgartiradi
To'ldirish blok o'lchamlariga qanday ta'sir qiladi?
width xususiyatidan foydalangan holda blokning kengligini o'rnatganingizda, u yakuniy qiymat bo'lmasligi mumkin. Gap shundaki, biz faqat to'g'ridan-to'g'ri tarkibni o'z ichiga olgan qismning kengligini aniqlaymiz. Shuni yodda tutish kerakki, CSS-da to'ldirish chegara kabi blokning hajmini oshiradi.
Keling, yon ustunni olaylik. Biz unga idishning butun kengligining 28 foizini berdik. Lekin yon paneldagi kontentning qirralarga yopishib qolishiga yo'l qo'ymaslik uchun unga bir oz to'ldirish kerak. Yon ustunga chegara qo'shishni ham xohlashingiz mumkin.
#yonka paneli( toʻldirish: 10px 20px; chegara: 2px qora; )
#yon panel( to'ldirish: 10px 20px; chegara: 2px qattiq qora; |
Salom, aziz blog o'quvchilari. Bugun biz balandlik va kenglikdan foydalangan holda kontent maydonining o'lchamlarini qanday o'rnatishingiz va agar u uchun ajratilgan bo'sh joydan ko'proq bo'lsa, ushbu kontentning ko'rinishini qanday sozlash haqida gaplashamiz (CSS to'ldirish qoidasi bilan). qiymatlar yashirin, aylantirish, avtomatik).
Birinchi xatboshi matni
Ikkinchisining matni
Chunki Ushbu paragraflar uchun kenglik va balandlik ko'rsatilmagan, keyin sukut bo'yicha brauzerning o'zi ularni Avto qiymatini tushunishi asosida hisoblab chiqadi. Natijada, paragraflar kengligi va balandligi bo'yicha ulardagi tarkibning balandligiga mos keladigan barcha bo'sh joyni egallaydi.
Keling, birinchi o'zgartirishni kiritamiz va birinchi xatboshining kengligini qattiq kodlaymiz (kenglik: 50px):
Birinchisining matni
Ikkinchisining matni
Umuman olganda, kutilgan narsa sodir bo'ldi - gorizontal o'lcham width:50px-da ko'rsatilgan qiymatga tushdi va paragraf balandligi hali ham height:auto (standart qiymat) tufayli shakllantirildi. Natijada, u butun matnni o'z ichiga olishi mumkin bo'ldi.
Endi konteyner balandligini height:15px yordamida cheklaylik.
Natijada, biz matn endi bizning kichik paragraf konteynerimizga to'g'ri kelmasligini tushundik va shuning uchun u qo'shnisining maydoniga xavfsiz tarzda kirib ketdi. Bu aynan shunday vaziyatlarda tarkibning harakatini nazorat qilish uchun xizmat qiladi. toshib ketish qoidasi.
Overflow "toshib ketish" yoki boshqacha aytganda "tarkibni to'ldirish" degan ma'noni anglatadi. Agar tarkib unga ajratilgan hududga (konteynerga) to'g'ri kelmasa, nima bo'lishi kerakligi haqida gapiradi.
Overflow bir nechta to'g'ri qiymatlarga ega, ammo sukut bo'yicha ko'rinadigan (ko'rsatish):
Shuning uchun bizning oxirgi misolimizda yuqori xatboshi matni pastki qismi bilan bir-biriga yopishdi (sukut bo'yicha overflow:visible ishlatilgan - konteynerga mos kelmaydigan tarkibni ko'rsatish). Biz boshqa ekstremaldan foydalanishimiz mumkin - toshib ketish: yashirin. Keyin konteyner ichiga sig'maydigan hamma narsa veb-sahifada ko'rsatilmaydi:
Ushbu CSS xususiyatining qolgan ikkita qiymati konteynerga to'g'ri kelmaydigan tarkibni aylantirish imkonini beradi (biz o'rganganimizda shunga o'xshash narsani allaqachon kuzatgan edik). Shunday qilib, agar tarkib belgilangan konteynerga xavfsiz sig'sa ham, aylantirish vertikal va gorizontal aylantirish chiziqlarini ko'rsatadi:
Ammo qiymatdan foydalanish ancha mantiqiyroq bo'ladi Avtomatik Agar aylantirish panellarini yaratish kerak bo'lsa, Overflow uchun. Bunday holda, brauzerning o'zi ularni qachon va qaysi o'qlarda ko'rsatishni hisoblab chiqadi.
Misol uchun, agar biz overflow:auto dan foydalansak, biz faqat kontent konteyner chegaralariga to'g'ri kelmaydigan o'q bo'ylab aylana olamiz:
Birinchisining matni
Ikkinchisining matni
Xulosa qilib aytishimiz mumkinki, Overflow juda imkon beradi kontentni ko'rsatish imkoniyatlarini moslashuvchan tarzda sozlash u o'z idishidan chiqib ketganda. Qolgan (ko'rinadigan) kontentni ko'rsatish, uni ko'rsatmaslik (kesib - yashirin) yoki kerak bo'lganda aylantirish (aylantirish) yoki aylantirishni majburiy qilish (avtomatik) imkoniyatiga ega bo'lasiz.
Ushbu qoidani yozishning CSS3 bilan bog'liq variantlari ham mavjud, ammo ular barcha brauzerlar tomonidan qo'llab-quvvatlanadi, ya'ni ulardan xavfsiz foydalanish mumkin. Men alohida o'qlarda (x - gorizontal, y - vertikal) aylantirishni o'rnatish yoki o'rnatmaslik imkonini beruvchi overflow-x va overflow-y variantlari haqida gapiryapman.
Agar, masalan, gorizontal aylantirish hech qachon paydo bo'lmasligiga ishonch hosil qilishingiz kerak bo'lsa va vertikal aylantirish faqat kerak bo'lganda paydo bo'lsa (agar tarkib mos kelmasa), Html elementi uchun overflow-x:hidden va overflow-ni belgilashingiz kerak bo'ladi. y: avto. Hammasi shu, muammo hal qilinadi, chunki bu quloq hiylasi barcha brauzerlar tomonidan qo'llab-quvvatlanadi.
Balandlik va kenglik foiz sifatida - nima uchun sizga doctype kerak?
Endi foiz sifatida belgilangan kenglik nimadan hisoblangani haqida gapiraylik. Esingizda bo'lsin, maqolaning boshida men diqqatimizni bunga qaratishga va'da bergandim. Aslida, CSS kengligi qoidasi bu erda istisno emas va xuddi to'ldirish va chekka kabi, kontent konteynerining gorizontal o'lchamining foizi sifatida hisoblanadi.
Vaziyat foiz sifatida ko'rsatilgan kontent maydonining balandligi bilan biroz chalkashroq. Xuddi shu narsa idishning balandligiga ham tegishli deb taxmin qilish mantiqan to'g'ri keladi. Ammo bu erda biz dualizmga (ikkita xulq-atvor modeli) duch kela boshlaymiz - ular ilgari bo'lgani kabi va hozir ham qabul qilingan standartlarga muvofiq. Shu munosabat bilan biz ilgari muhokama qilgan ekran rejimlari mavzusiga yana bir bor to'xtalib o'tishimiz kerak.
Tarixiy jihatdan, standartlar qabul qilingandan so'ng, sof Html tilining eski qoidalariga muvofiq yaratilgan ko'plab hujjatlar hali ham mavjud edi va ular bilan nimadir qilish kerak edi. Shu bilan birga, u ham rivojlanib bordi (uslubni belgilash tili paydo bo'ldi va ba'zi teglar va atributlar eskirdi), shuning uchun brauzerga ushbu kodni tahlil qilish uchun qanday standartlar bo'yicha kerak bo'lishini qandaydir tarzda ko'rsatish kerak edi.
Yangi hujjatlarni (barcha paydo bo'lgan standartlarni hisobga olgan) va eskilarini (ko'pincha sof Html dan boshqa hech narsani hisobga olmagan) ajratish uchun Melkosoft o'sha paytda paydo bo'lgan XML tilidan kichik xususiyatdan foydalanishni taklif qildi. . Bu xususiyat xizmat xususiyati edi va endi hujjat turi deklaratsiyasi deb ataladi.
Bu boshqacha ko'rinishi mumkin (yuqorida aytib o'tilgan maqolada bu haqda ko'proq o'qing), ammo bu variant har doim ishlaydi:
Shunday qilib, brauzer hujjatni tahlil qilish uchun qanday standartlardan foydalanishi kerakligi haqida marker oldi. Agar hujjat turi deklaratsiyasi mavjud bo'lsa, u standartlar rejimiga o'tadi. Agar brauzer hujjat kodining birinchi qatorida hujjat turini topa olmasa (yoki u noto'g'ri yozilgan bo'lsa, bu uning yo'qligi bilan bir xil), u deb ataladigan narsaga o'tadi. ayyorlik rejimi(g'ayrioddiy rejim).
Hujjat turiga ega bo'lmagan hujjat brauzerda juda eski (antik) kabi paydo bo'ladi. Agar siz xuddi shu hujjatga deklaratsiya qo'shsangiz, u holda brauzer o'zining qadimiyligini yo'qotadi va hozirda qabul qilingan barcha standartlarga muvofiq hujjat kodi bilan ishlashni boshlaydi.
Ammo antik davr tushunchasi juda boshqacha. Misol uchun, faqat 2008 yilda paydo bo'lgan hozirgi mashhur Google Chrome brauzeri necha yoshda bo'lishi mumkin? Albatta, IE ancha boy tarixga ega. Shuning uchun, har qanday versiyaning barcha brauzerlari hujjatni eskisi kabi deklaratsiyasiz (g'ayrioddiy rejimda yoki nayranglarda) ko'rsatadi, chunki bu asosiy versiya hisoblanadi.
Nega men brauzerni ko'rsatish rejimlari haqida uzoq vaqt gaplashdim? Ammo bu ikki rejim uchun kontent maydonining balandligini foiz sifatida ko'rsatish ushbu balandlikni hisoblash bilan bog'liq holda juda farq qiladi.
Standartlar rejimida tarkibga ega maydonning balandligini (foizda) o'rnatish (hujjatning boshida to'g'ri hujjat turi ko'rsatilganda), agar ushbu tarkib o'ralgan konteyner uchun balandlik (ko'rsatilgan bo'lsa) umuman mumkin bo'lmaydi. foiz balandligingiz e'tiborga olinmaydi).
Hujjat kodidan doctype deklaratsiyasini olib tashlasak, biz quyidagi rasmni ko'ramiz:
Quyidagi standartlar rejimi uchun (deklaratsiya hujjatning boshida yoziladi) birinchi navbatda konteyner balandligini belgilashingiz kerak (bizning holatlarimizda, Div uchun konteyner Body yorlig'i bo'ladi) va shundan keyingina brauzer. balandlikni to'g'ri boshqaradi: 100%:
Natijada, kontent maydonining balandligini foiz sifatida belgilashda biz ikkita mutlaqo boshqa yondashuvga ega bo'ldik, shuning uchun muammolarni oldini olish uchun men sizga albatta maslahat beraman to'g'ri doctype deklaratsiyasini belgilang barcha hujjatlaringiz (veb-sahifalar) boshida. Yana bir misol borki, standartlarga rioya qilish rejimi va hiyla-nayranglar rejimi o'rtasidagi farq juda katta bo'ladi.
Agar siz istalgan Html elementi uchun kontent maydoni uchun balandlik va kenglikni o'rnatsangiz, shuningdek, ushbu teg uchun to'ldirish va chegara kengligini belgilasangiz, u holda turli brauzerlarda g'ayrioddiy rejimda (yozma deklaratsiyasiz) bu hamma narsani turli yo'llar bilan talqin qilish mumkin.
Eski IE 5.5 brauzerida to'ldirish va ramka kengligi balandlik va kenglik orqali belgilangan o'lchamlardan ichkariga qarab hisoblanadi. Bular. elementning umumiy hajmi ushbu CSS xususiyatlarida o'rnatilgan narsalarga mos keladi (bu endi ishlatilmaydigan eski sxema).
Boshqa zamonaviy brauzerlarda to'ldirish va chegara kengligi balandlik va kenglikda ko'rsatilgan o'lchamlarga qo'shiladi. Bular. bu holda (doctype holda ayyorlik rejimi), kontent maydonining dastlab belgilangan o'lchamlari ichki to'ldirish va chegara miqdori bilan kengaytiriladi.
Xo'sh, agar siz hujjatga ko'rsatma yozsangiz, unda mutlaqo barcha zamonaviy va eski brauzerlarda yondashuvning ikki tomonlamaligi bilan bog'liq bu muammolarni osongina oldini olish mumkin. Bunday holda va IE 5.5 da to'ldirish va chegara kengligi zamonaviy CSS standartlari talab qilganidek, kontent maydoni o'lchamlariga qo'shiladi. Shuning uchun, oldini olish uchun har doim doctype dan foydalaning.
Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha
Sizni qiziqtirishi mumkin
Pozitsiya (mutlaq, nisbiy va qat'iy) - CSS-da Html elementlarini joylashtirish usullari (chap, o'ng, yuqori va pastki qoidalar) CSS-da suzish va tozalash - blokirovka qilish vositalari Padding, Margin and Border - CSS-da ichki va tashqi to'ldirishni, shuningdek barcha tomonlar uchun chegaralarni (yuqori, pastki, chap, o'ng) o'rnating. Sichqoncha kursorini o'zgartirish uchun Z-indeks va CSS Kursor qoidasi yordamida joylashishni aniqlash CSS nima uchun, kaskadli uslublar jadvallarini Html hujjatiga qanday ulash va ushbu tilning asosiy sintaksisi Teg, sinf, Id va universal selektorlar, shuningdek zamonaviy CSS-dagi atribut selektorlari Css-dagi ustuvorliklar va ularni tanlash, foydalanuvchi va muallif uslublarining muhim, kombinatsiyasi va guruhlanishi tufayli ko'payishi CSS orqali ichki va tashqi havolalar uchun turli uslublar O'lchov birliklari (piksellar, Em va Ex) va CSS-dagi meros qoidalari CSS-da ko'rsatish (blok, yo'q, inline) - veb-sahifadagi Html elementlarini ko'rsatish turini o'rnating
Odatiy bo'lib, blok elementlari avtomatik kenglikdan foydalanadi. Bu shuni anglatadiki, bo'sh joy qancha bo'lsa, element gorizontal ravishda cho'ziladi. 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 xususiyati kengligi elementning kontent maydonining kengligini va xususiyatini o'rnatish imkonini beradi balandligi Tarkib maydoni balandligi:
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 chap 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 xususiyatidan foydalanishingiz mumkin. toshib ketish. 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.
Xiaomi-da SD-kartaga ilovalarni qanday o'rnatish kerak Ilovani uchinchi tomon xotirasiga qanday o'tkazish kerak xiaomi
Rossiya Rossiya to'plamini yuklab olish, Wi-Fi tarmog'ini kutayotgan Play Marketni qanday olib tashlash, qanday o'chirish
TP-Link Archer C1200 routerini sozlash