Misol

HTML

CSS

Natija

Foydalanish imkoniyati bilan bog'liq muammolar

Matn hajmini oshirish uchun sahifa kattalashtirilganda balandlik bilan o'rnatilgan elementlar kesilmasligiga va/yoki boshqa kontentni berkitmasligiga ishonch hosil qiling.

Texnik xususiyatlari

Brauzer mosligi

Ushbu sahifadagi muvofiqlik jadvali tuzilgan ma'lumotlardan yaratilgan. Agar siz maʼlumotlarga oʻz hissangizni qoʻshmoqchi boʻlsangiz, iltimos, https://github.com/mdn/browser-compat-data manziliga tashrif buyuring va bizga tortish soʻrovini yuboring.

GitHub-da muvofiqlik ma'lumotlarini yangilang

Afsona

Salom, aziz o'quvchilar! Bugun biz CSS xususiyatlaridan foydalangan holda veb-sahifadagi blok elementlarining o'lchamlarini qanday o'rnatishni va agar u elementga mos kelmasa, kontentning ko'rinishini sozlashni ko'rib chiqamiz.

eni va balandligi - CSS-dagi elementlarning kengligi va balandligi

Kenglik va balandlik uslubi atributlaridan foydalanib, mos ravishda blok elementlarining kengligi va balandligini o'rnatishingiz mumkin:

kengligi: avtomatik |<ширина>|meros
balandlik: avtomatik |<ширина>|meros

Qiymat sifatida siz css-da mavjud bo'lgan har qanday o'lchov birliklaridan foydalanishingiz mumkin - masalan, piksel (px), dyuym (dyuym), nuqta (pt) va boshqalar:

p (kenglik: 200px; balandlik: 150px)

Mutlaq birliklarga qo'shimcha ravishda siz elementlarning nisbiy hajmini foiz sifatida belgilashingiz mumkin. Bunday holda, elementning kengligi va balandligi asosiy elementning kengligi va balandligiga bog'liq bo'ladi. Agar ota-ona aniq ko'rsatilmagan bo'lsa, o'lchamlar brauzer oynasiga bog'liq bo'ladi.

div (kengligi: 40%;)

Avtomatik qiymat element o'lchamlarini boshqarishni veb-brauzerga qoldiradi va standart qiymatdir. Bunday holda, elementning o'lchamlari uning barcha tarkibiga to'liq mos keladigan darajada bo'ladi.

Keling, bir nechta misollarni ko'rib chiqaylik.

Natija:

Ushbu misolda biz div yaratdik va ichiga matnli p paragrafni joylashtirdik. Div uchun biz o'lchamlarni 300 dan 300 pikselgacha o'rnatamiz. P elementi kenglik va balandlik xossalarining qiymatlari avtomatikga teng, shuning uchun siz skrinshotda ko'rib turganingizdek, uning kengligi asosiy elementning kengligiga teng bo'lib o'rnatiladi va balandligi shunday bo'ladiki, u barcha matnga mos keladi. paragraf.

Endi p paragraf uchun CSS sozlamalarini o'zgartiramiz va qat'iy o'lchamlarni o'rnatamiz:

2-qavat(
fon: #eee;
kengligi: 250px;
}

Natija:

Ko'rib turganingizdek, paragrafning kengligi toraydi va 250 pikselga teng bo'ldi va balandligi parametri avtomatik bo'lganligi sababli matn mos bo'lishi uchun balandligi oshdi.

Endi paragrafning balandligi va kengligini foizlarda belgilaymiz:

2-qavat(
fon: #eee;
kengligi: 50%;
balandligi: 50%;
}

Natija:

Rasmda ko'rib turganingizdek, p elementining kengligi div elementining yarmiga teng bo'ldi. Va balandligi oshdi va div balandligining 75 foiziga teng bo'ldi.

Har qanday elementlarning kengligi va balandligini nisbiy birliklarda belgilashda siz minimal va maksimal mumkin bo'lgan o'lchamlarni ko'rsatishingiz kerak bo'lishi mumkin. Axir, masalan, brauzer oynasining o'lchamini o'zgartirganda, elementning o'lchamlari kamayishi va shu qadar kattalashishi mumkinki, saytning o'qish qobiliyati juda past bo'ladi.

Minimal kenglik va balandlikni min-width va min-height atributlari yordamida belgilashingiz mumkin:

min-kenglik:<ширина>
min balandligi:<высота>

Maksimal kenglik va maksimal balandlikdagi o'xshash uslub atributlari maksimal o'lchamlarni o'rnatishga imkon beradi:

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

Balandlik va kenglik uchun maksimal va minimal qiymatlarni o'rnatishda elementning o'lchamlari maksimaldan kattaroq va minimal qiymatlardan kichik bo'lishi mumkin emasligi aniq.

Vazifani tushuntirishga arziydi balandlik va kenglik parametrlari faqat blok teglari uchun mantiqiy, chunki inline elementlar uchun bu parametrlar brauzer tomonidan qayta ishlanmaydi.

Elementning balandligi va kengligi uchun qattiq parametrlarni o'rnatishda uning tarkibi cheklangan maydonga mos kelmasligi mumkin.

Masalan, yuqorida ko'rib chiqilgan misollardan p paragraf hajmini 100 pikselgacha kamaytiraylik:

2-qavat(
fon: #eee;
kengligi: 100px;
balandligi: 100px;
}

Natija:

Ko'rib turganingizdek, matn paragrafning chegarasidan tashqariga chiqdi va u juda chiroyli ko'rinmaydi. Bunday holatlarning oldini olish uchun CSS qoidasi mavjud - toshib ketish.

Kontentni yashirish (yashirin, ko'rinadigan) yoki aylantirish (aylantirish, avtomatik) uchun ortiqcha parametr

Elementning kengligi va balandligi cheklangan bo'lsa, kontent to'lib ketishi mumkin. Keling, ikkita paragrafni ko'rib chiqaylik:

Birinchi xatboshi matni

Ikkinchi xatboshi matni

Natija:

Paragraflarning kengligi ham, balandligi ham ko'rsatilmaganligi sababli, brauzer avtomatik qiymatni o'z tushunishiga asoslanib, ularni mustaqil ravishda hisoblab chiqadi. Natijada, paragraflar mavjud bo'lgan barcha bo'sh joyni ular tarkibiga mos ravishda kengligi va balandligi bo'yicha egalladi.

Endi birinchi xatboshining kengligini cheklaylik:

Birinchi xatboshi matni

Ikkinchi xatboshi matni

Natija:

Paragrafning kengligi kutilgan edi, balandligi esa butun matnni sig'dirish uchun o'rnatildi.

Xo'sh, endi birinchi xatboshining balandligini cheklaylik:

Birinchi xatboshi matni

Ikkinchi xatboshi matni

Natijada, matn bunday cheklangan paragrafga to'g'ri kelmasligi ma'lum bo'ldi va shuning uchun u pastki qo'shni hududiga yugurdi. Shunga ko'ra, matnni birinchi yoki ikkinchi xatboshilarda o'qish deyarli mumkin emas. Bu shunday vaziyatlarda tarkibning xatti-harakatlarini nazorat qilishdir toshib ketish qoidasi:

toshib ketish: ko'rinadigan|yashirin|aylantirish|avtomatik|meros

Odatiy bo'lib, overflow ko'rinadigan qilib o'rnatiladi, bu brauzerga konteynerga sig'maydigan tarkibni ko'rsatishni bildiradi. Natijani yuqoridagi misolda ko'rish mumkin.

Qoida konteynerga sig'maydigan hamma narsani yashiradi:

O'tkazish qiymati elementda vertikal va gorizontal aylantirish satrlarini ko'rsatadi, hatto barcha tarkib mos bo'lsa ham:

Birinchi xatboshi matni

Ikkinchi xatboshi matni

Agar siz konteyner uchun aylantirish chiziqlarini yasashingiz kerak bo'lsa, eng mashhur va mantiqiy yechim bu qiymatdir avto. Bunday holda, brauzerning o'zi qachon va qaysi o'qlarda aylantirish satrlarini ko'rsatishi kerakligini aniqlaydi:

Birinchi xatboshi matni

Ikkinchi xatboshi matni

Natija:

O'tkazish panelini sozlash uchun siz alohida o'qlarda aylantirish ko'rinishini sozlash imkonini beruvchi overflow-x va overflow-y uslubi atributlaridan ham foydalanishingiz mumkin. Shuning uchun javobgar gorizontal o'q, va uchun vertikal o'q.

Shuning uchun, masalan, hech qachon paragrafda ko'rinmaslik uchun gorizontal aylantirish kerak bo'lsa va vertikal aylantirish faqat kerak bo'lganda paydo bo'lishi uchun quyidagi CSS qoidasini yozing:

p(toshib-x:yashirin;toshib-y:avto;)

Va muammo hal qilinadi.

Ana xolos. Keyingi safargacha. Blog yangilanishlariga obuna bo'lishni unutmang va agar siz ijtimoiy tarmoq tugmalaridan foydalansangiz, men minnatdor bo'laman.

Element balandligi va kengligi hisoblangan miqdorlardir. Veb-sahifaning har bir elementi to'rtburchaklar maydonni hosil qiladi, bu esa o'z navbatida bir nechta sohalardan iborat - tarkib sohalari, to'ldirish joylari, ramka joylari Va dala maydonlari element.

Element mazmuni va uning chegarasi o'rtasida chekinish to'ldirish, element chegarasidan tashqarida - dalalar marj. Har bir element uchun kontent maydoni mavjud; boshqa joylar ixtiyoriy.

1. Element balandligi

height xususiyati blok elementi tarkibining balandligini belgilaydi va inline elementlarni ko'rsatishga ta'sir qilmaydi: inline; . Inline elementlarning balandligi ular tarkibining balandligiga teng. Salbiy qiymatlarga ruxsat berilmaydi. Mulk meros qilib olinmaydi.

Sintaksis

P (balandligi: 100px;)

2. Element kengligi

width xususiyati blok elementi tarkibining kengligini belgilaydi va inline elementlarni ko'rsatishga ta'sir qilmaydi: inline; . Inline elementlarning kengligi ularning tarkibining kengligiga teng. Salbiy qiymatlarga ruxsat berilmaydi. Mulk meros qilib olinmaydi.

Sintaksis

P (kengligi: 100px;)

3. Mutlaq joylashtirilgan elementning balandligi va kengligi

Mutlaq joylashtirilgan element pozitsiyasining kengligi va balandligini o'rnating: mutlaq; har doim ham kerak emas, chunki bu holda balandlik va kenglik elementning ofseti bilan aniq belgilanadi. Agar elementda chegaralar va chekkalar belgilangan bo'lsa, ular kontent maydoni hajmini tegishli qiymatlar bilan kamaytiradi.

Div (fon: #6A7690; pozitsiya: mutlaq; tepa: 0; pastki: 0; chap: 50%; o'ng: 0; ) /*bu holda elementning balandligi 100%, kengligi 50% ni tashkil qiladi. asosiy blok*/
Guruch. 2. Mutlaq joylashtirilgan elementning balandligi va kengligi

4. Elementlarni to‘ldirish

padding xususiyatidan foydalanib, bir vaqtning o'zida elementning bir necha tomoni uchun quyidagi tartibda to'ldirishni o'rnatishingiz mumkin: . Agar element fonga ega bo'lsa, u to'ldirish uchun ham qo'llaniladi. Salbiy qiymatlarga ruxsat berilmaydi. Mulk meros qilib olinmaydi.

Agar uchta qiymat berilgan bo'lsa, masalan, div (to'ldirish: 10px 20px 30px;), ular quyidagi tartibda taqsimlanadi: birinchi qiymat - yuqori to'ldirish, ikkinchisi - o'ng va chap to'ldirish, uchinchisi pastki qoplama hisoblanadi.
Agar ikkita qiymat berilgan bo'lsa, masalan, div (to'ldirish: 10px 20px;), keyin birinchisi yuqori va pastki to'ldirishni o'rnatadi, ikkinchisi o'ng va chapni o'rnatadi.
div (padding: 10px;) kabi bitta qiymat elementning barcha tomonlarida bir xil toʻldirishni oʻrnatadi.

Sintaksis

P (to‘ldirish: 5px 10px 15px 10px;)

4.1. Elementning bir tomonida to'ldirish

Elementning faqat bir tomoniga toʻldirishni oʻrnatish uchun siz padding-top , padding-right , padding-bottom , padding-left xususiyatlaridan birini ishlatishingiz kerak, masalan:

P (chap to'ldirish: 10px;)

5. Element chegaralari

Aksariyat elementlar bir-biridan chegaralar bilan ajratilgan. Margin xossasi elementning maydonlarini quyidagi tartibda qayd etish uchun qisqa shakldir: yuqori, o'ng, pastki, chap. Bir necha tomondan chekka o'rnatish kerak bo'lganda foydalaniladi, lekin to'rtta bo'lishi shart emas. Blok elementlarining vertikal qo'shni chekkalari yiqilib, yuqori va pastki chetlari inline elementlarga ta'sir qilmaydi. Salbiy qiymatlarga ruxsat beriladi. Mulk meros qilib olinmaydi.

Agar uchta qiymat berilgan bo'lsa, masalan, div (chegara: 10px 20px 30px;), u holda ular quyidagi tartibda taqsimlanadi: birinchi qiymat yuqori chet, ikkinchisi o'ng va chap chekka, uchinchisi pastki chegara hisoblanadi.
Agar ikkita qiymat berilgan bo'lsa, masalan, div (chekka: 10px 20px;), keyin birinchisi yuqori va pastki chegaralarni, ikkinchisi o'ng va chapni o'rnatadi.
div (margin: 10px;) kabi bitta qiymat elementning barcha tomonlarida teng chekkalarni o'rnatadi.

(margin: 0 auto;) faqat elementning kengligi aniq ko'rsatilgan bo'lsa ishlaydi.

Sintaksis

Div (chegara: 5px 10px 2px 5px;)

5.1. Elementning bir tomonidagi chegaralar

margin-top , margin-right , margin-bottom , margin-left xususiyatlari elementning har bir tomonidagi mos keladigan chekkalarni boshqaradi, masalan:

P (chet-chap: 10px;)

6. Kenglik va balandlik chegarasi

CSS shuningdek, veb-sahifa elementlarining balandligi va kengligini o'rnatish bilan bog'liq bo'lgan boshqa xususiyatlarni ham qo'llab-quvvatlaydi: min-balandlik, min-kenglik, maksimal balandlik va maksimal kenglik. Ushbu xususiyatlar elementning kengligi yoki balandligi uchun minimal va maksimal qiymatlarni o'rnatishga imkon beradi, bu elementga mavjud bo'sh joyni to'ldirish qobiliyatini beradi. Xususiyatlar ko'pincha sezgir veb-sahifa dizayni uchun ishlatiladi. Inline va jadval elementlaridan tashqari barcha elementlar uchun amal qiladi. Ular har doim asosiy qoidadan keyin keladi, ya'ni. element balandligi yoki kengligi bergandan keyin. Meros bo'lmagan.

Ba'zi o'lchov birliklari yordamida oddiy o'lchamlarni va boshqa birliklar yordamida o'lcham cheklovlarini belgilashingiz mumkin, masalan:

Div (kenglik: 400px; maksimal kenglik: 50%; )

Agar bu qiymat konteyner blokining kengligining 50% dan oshmasa, element faqat 400px kengligiga ega bo'ladi, aks holda uning kengligi kamayadi.

Ushbu maqolada biz CSS-da blokning balandligini uning kengligining foizi sifatida qanday belgilash mumkinligini ko'rib chiqamiz. Keling, turli o'lchamdagi rasmlardan Bootstrap karuselini (slayder) yaratish misolida ushbu texnologiyadan foydalanishni ko'rib chiqaylik.

Uning kengligining ma'lum bir foizini tashkil etadigan balandlikdagi blokni yaratish

1. 2 blokdan iborat HTML strukturasini yarating:
   Birinchi blokda 2 ta sinf mavjud. Elementga javob beradigan sinfdan foydalanib, biz blokning nisbiy joylashuvini o'rnatamiz. Buni shunday qilish kerakki, 2-blok (mutlaq joylashuvga ega bo'ladi) unga nisbatan joylashgan. Bundan tashqari, ushbu sinf psevdo-elementni qo'shish uchun ham ishlatiladi: mos keladigan elementlarning mazmunidan oldin (elementga javob beruvchi). Ushbu element padding-top CSS xususiyatidan foydalangan holda uning kengligiga nisbatan kerakli blok balandligini o'rnatadi. Ushbu usulning hiylasi shundaki, agar to'ldirish xususiyati o'rnatilgan bo'lsa piksellarda emas, balki foiz sifatida, keyin uning kengligiga nisbatan brauzer tomonidan hisoblab chiqiladi. Shunday qilib, kerakli balandlikdagi blokni olishingiz mumkin. Keyingi qadam 2-blokga mutlaq pozitsiyani berish va uni birinchi blok bilan tekislashdir.
2. Sahifaga quyidagi CSS kodini qo'shing: .item-responsive (position: nisbiy; /* nisbiy joylashishni aniqlash */ ) .item-responsive:before ( display: block; /* elementni blok sifatida ko'rsatish */ kontent: "" ; /* psevdo-element tarkibi */ kengligi: 100%; /* element kengligi */ ) .item-16by9 (to‘ldiruvchining tepasi: 56,25%; /* (9:16)*100% */ ) .elementga javob beruvchi >.content ( pozitsiyasi: mutlaq; /* elementning mutlaq pozitsiyasi */ /* elementning holati */ yuqori: 0; chap: 0; o'ng: 0; pastki: 0; ) /* Agar kerak bo'lsa (bloklar uchun bu sinflarga ega) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2) *100% */ ) .element -1by1 (to‘ldiruvchi-usti: 100%; /* (1:1)*100% */ )

Bootstrap karuselini yaratish uchun yuqoridagi texnologiyadan foydalanish

Agar siz Bootstrap bilan tanish bo'lmasangiz va u nima ekanligini bilmoqchi bo'lsangiz, Bootstrap-ga kirish maqolasidan foydalanishingiz mumkin.

Keling, Bootstrap karusel slaydlarini ko'rsatish uchun yuqoridagi HTML strukturasi va CSS kodini ishlatadigan misolni ko'rib chiqaylik.

Biz quyidagi fayllardan rasm sifatida foydalanamiz:

• carousel_1.jpg (kenglik = 736px, balandlik = 552px, tomonlar nisbati (balandlik va kenglik) = 1.33);
• carousel_2.jpg (kenglik = 1155px, balandlik = 1280px, tomonlar nisbati (balandlik va kenglik) = 0,9);
• carousel_3.jpg (kenglik = 1846px, balandlik = 1028px, tomonlar nisbati (balandlik va kenglik) = 1.8);
• carousel_4.jpg (kenglik = 1140px, balandlik = 550px, tomonlar nisbati (balandlik va kenglik) = 2.07);
• carousel_5.jpg (kenglik = 800px, balandlik = 600px, tomonlar nisbati (balandlik va kenglik) = 1.33);

Biz rasmlarni fon sifatida o'rnatamiz. Bu sizga Bootstrap karuselida tomonlar nisbati teng bo'lmagan 3 ta rasmdan foydalanish imkonini beradi.

Karuselning HTML belgisi:

Carousel CSS kodi:

Elementga javob beruvchi (pozitsiya: nisbiy; /* nisbiy joylashish */ ) .elementga javob beruvchi: oldin ( displey: blok; /* elementni blok sifatida ko'rsatish */ kontent: ""; /* soxta element tarkibi */ kengligi : 100%; /* element kengligi */ ) .item-16by9 (to‘ldiruvchi-usti: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content (joy: mutlaq; /* elementning mutlaq pozitsiyasi * / /* element pozitsiyasi */ tepa: 0; chap: 0; o'ng: 0; pastki: 0; fon o'lchami: qopqoq !muhim; )

Ob'ektga ma'lum bir kenglik va balandlik berilishi uchun CSS-da ikkita xususiyat mavjud - kenglik va balandlik (mos ravishda). Ularning yordami bilan siz elementlar uchun qattiq o'lchamlarni o'rnatishingiz mumkin, u yon panel, rasm, jadval yoki har qanday blok.

Kenglik va balandlikni hisoblash xususiyatlari

Ob'ektning kengligi yoki balandligini aniqlash uchun CSS-da istalgan uzunlik birligidan foydalanishingiz mumkin. Piksellarni tushunish eng oson. Agar siz foiz belgisidan foydalansangiz, ob'ektning kengligi uning ota-onasining kengligiga bog'liq bo'lishini yodda tuting. Agar yo'q bo'lsa, elementning kengligi brauzer oynasining kengligidan kelib chiqqan holda hisoblanadi (agar foydalanuvchi oyna kengligini o'zgartirsa, kenglik qiymati qayta hisoblab chiqiladi).

Siz em birligini kenglik qiymati sifatida ham ishlatishingiz mumkin, bu taxminan matn shrifti o'lchami bilan bir xil, lekin faqat an'anaviy birliklarda. Masalan, siz shrift o'lchamini 24px qilib o'rnatdingiz. Keyin ushbu element uchun 1em 24px ga teng bo'ladi va agar siz kenglik: 2em ni o'rnatsangiz, kenglik bo'ladi. 2x24px = 48 piksel. Agar shrift o'lchami o'rnatilmagan bo'lsa, u meros qilib olinadi.

Foiz sifatida ko'rsatilgan balandlik kenglik bilan bir xil tarzda hisoblanadi, ammo hisoblash asosiy elementning kengligidan ko'ra balandligiga asoslanadi. Agar ota-ona bo'lmasa, balandlik brauzer oynasining balandligiga bog'liq bo'ladi.

Bola elementining foizli kengligi va balandligi ota-onaning o'lchamlari asosida hisoblanadi

Kenglik va balandlikka nima kiradi

Darhol eslash kerakki, kenglik va balandlik xususiyatlari o'ziga xos xususiyatga ega - ular chekka, to'ldirish va chegara qiymatlarini o'z ichiga olmaydi. Kenglik/balandlik uchun o'rnatgan qiymat faqat elementning kontent maydonining kengligi/balandligini bildiradi.

Shunday qilib, masalan, elementning haqiqiy kengligini (u aslida ekranda egallagan bo'sh joy) hisoblash uchun biroz arifmetika talab qilinadi. Haqiqiy kenglik kenglik, to'ldirish, chegara va chekka kabi qiymatlar yig'indisidir. Eslatib o'tamiz, biz ilgari CSS qutisi modeli qanday ko'rinishini ko'rib chiqdik.

Bilimlarni mustahkamlash uchun biz misol keltiramiz. Aytaylik, sizda ushbu uslubga ega element mavjud:

Kengligi: 200px; chap chekka: 15px; chekka o'ng: 15px; padding-chap: 10px; chegara-chap: 3px qattiq #333;

Elementning haqiqiy kengligini hisoblash uchun qo'shimchani bajaring:

kenglik + chekka-chap + chekka-o'ng + to'ldirish-chap + chegara-chap = 200px + 15px + 15px + 10px + 3px = 243px (haqiqiy kenglik)

balandlik xususiyati, masalan, tasvirning balandligini aniq nazorat qilishingiz kerak bo'lsa foydali bo'lishi mumkin. Biroq, konteynerda matn yoki balandligi o'zgarishi mumkin bo'lgan boshqa tarkib bo'lsa, konteyner uchun qattiq balandlikni o'rnatish tavsiya etilmaydi, chunki bunday tartib kutilmagan natijaga olib kelishi mumkin - kontent tepada ko'rsatiladi. boshqa tarkibdan.

Ruxsat etilgan balandlik o'rniga balandlikdan foydalaning: avtomatik - bu yozuv ob'ektning balandligi undagi tarkibga qarab avtomatik ravishda hisoblanishini bildiradi.

Tartibning yiqilishiga yo'l qo'ymaslikning yana bir yo'li to'lib toshganidan foydalanishdir: avtomatik belgi. Bunday holda, agar kontent balandligi uning konteynerining balandligidan oshsa, brauzer konteynerga aylantirish paneli qo'shadi.

Keyingi darsda siz qiziqarli va juda foydali xususiyatdan foydalanib, elementning kengligini qanday bekor qilishingiz mumkinligini bilib olasiz