№1 laboratoriya
Yarimo'tkazgichlarning kontakt xususiyatlarini o'rganish n- Va p- bir xil diapazon bilan yozing
Qisqacha nazariy ma'lumotlar
Ko'pchilikning asosiy elementi yarimo'tkazgichli qurilmalar elektron teshik o'tishi ( tuman-o'tish), bu yarimo'tkazgichning ikkita hududi orasidagi o'tish qatlami bo'lib, ulardan biri elektron elektr o'tkazuvchanligiga, ikkinchisi esa teshikka ega.
Ta'lim pn -o'tish. Pn -muvozanat holatiga o'tish.
Keling, ta'lim jarayonini batafsil ko'rib chiqaylik pn- o'tish. Muvozanat holati tashqi kuchlanish bo'lmaganda bunday o'tish holati deb ataladi. Buni eslang R - mintaqada ikki turdagi asosiy zaryad tashuvchilar mavjud: qabul qiluvchi nopoklik atomlarining harakatsiz manfiy zaryadlangan ionlari va erkin musbat zaryadlangan teshiklar; va ichida n-mintaqa, shuningdek, asosiy zaryad tashuvchilarning ikki turi mavjud: donor nopoklik atomlarining harakatsiz musbat zaryadlangan ionlari va erkin manfiy zaryadlangan elektronlar.
Tegishdan oldin p- Va n- maydonlar, elektronlar, teshiklar va nopoklik ionlari bir xilda taqsimlanadi. Chegarada aloqada p- Va n- hududlarda erkin zaryad tashuvchilarning kontsentratsiya gradienti paydo bo'ladi va buning natijasida diffuziya sodir bo'ladi. Diffuziya ta'sirida elektronlar dan n- hududlarga boradi p-mintaqa va u erda teshiklar bilan qayta birlashtiring. dan teshiklar R- hududlarga boradi n mintaqa va u erda elektronlar bilan rekombinatsiya. Chegara hududida bepul zaryad tashuvchilarning bunday harakati natijasida ularning kontsentratsiyasi deyarli nolga tushadi va shu bilan birga p- mintaqada qabul qiluvchi nopoklik ionlarining manfiy fazoviy zaryadi hosil bo'ladi va in n-donor nopoklik ionlarining mintaqaviy musbat fazoviy zaryadi. Ushbu to'lovlar o'rtasida kontakt potentsial farqi mavjud j to va elektr maydoni EKimga, bu chuqurlikdan erkin zaryad tashuvchilarning tarqalishini oldini oladi R- Va n- orqali hududlar p-n- o'tish. Shunday qilib, o'z elektr maydoniga ega bo'lgan bepul zaryad tashuvchilardan mahrum bo'lgan mintaqa deyiladi p-n- o'tish.
Pn O'tish ikki asosiy parametr bilan tavsiflanadi:
Potentsial to'siq balandligi. Bu kontakt potentsial farqiga teng j to. Bu zaryad tashuvchilarning kontsentratsiya gradienti tufayli o'tishdagi potentsial farq. Bu potentsial to'siqni engib o'tish uchun bepul zaryadga ega bo'lishi kerak bo'lgan energiya:
qayerda k Boltsman doimiysi, q elektronning zaryadi, T- harorat, N a Va N d mos ravishda teshik va elektron hududlarida qabul qiluvchilar va donorlarning kontsentratsiyasi; pp Va p n teshiklarning kontsentratsiyasi p- Va n- hududlar, mos ravishda n i – qo'shilmagan yarimo'tkazgichdagi zaryad tashuvchilarning ichki kontsentratsiyasi, harorat potentsiali. Bir haroratda T = 27 0 S jT ≈ 0,025 V, germaniyga o'tish uchun jKimga= 0,6 V, silikon birikmasi uchun jKimga= 0,8 V.
p-n o'tish kengligi(1.1-rasm) zaryad tashuvchilar bilan tugaydigan chegara hududi bo'lib, unda joylashgan p- Va n- hududlar
qayerda e yarimo'tkazgich materialining nisbiy o'tkazuvchanligi, ε 0 bo'sh joyning dielektrik o'tkazuvchanligi.
Elektron-teshik o'tishlarining qalinligi tartibli (0,1 - 10) mkm. Agar va pn-o'tish simmetrik deyiladi, agar >< , то < > Va pn- o'tish assimetrik deb ataladi va u asosan kamroq ifloslik konsentratsiyasi bo'lgan yarimo'tkazgich hududida joylashgan.
Muvozanat holatida (tashqi kuchlanishsiz) orqali tuman-o'tish zaryadlarning ikkita qarshi oqimi harakat qiladi (ikki oqim oqadi). Bular ozchilikdagi zaryad tashuvchilarning drift oqimi va ko'pchilik zaryad tashuvchilar bilan bog'liq bo'lgan diffuziya oqimidir. Tashqi kuchlanish yo'qligi va tashqi kontaktlarning zanglashiga olib keladigan oqim yo'qligi sababli, drift oqimi va diffuziya oqimi o'zaro muvozanatlanadi va natijada paydo bo'lgan oqim nolga teng:
Bu munosabat ajratilgan (muvozanat)dagi diffuziya va drift jarayonlarining dinamik muvozanat sharti deyiladi. pn- o'tish.
Ular aloqada bo'lgan sirt p- Va n-maydon metallurgiya chegarasi deyiladi. Aslida, u cheklangan qalinlikka ega - d m. Agar d m<< , keyin pn O'tish keskin deb ataladi. Agar d m>>, keyin pn O'tish silliq deb ataladi.
R-n-muvozanatsiz holatda o'tish (unga tashqi kuchlanish qo'llanilishi bilan).
Tashqi kuchlanish oqimlarning dinamik muvozanatini buzadi pn- o'tish . Pn - o'tish muvozanatsiz holatga o'tadi. Hududlarga qo'llaniladigan kuchlanishning polaritesiga qarab pn-ikki ish rejimiga o'tish mumkin.
Oldinga moyillikpn - o'tish. R-n- elektr ta'minotining musbat qutbi ulangan bo'lsa, tutashuv oldinga yo'naltirilgan deb hisoblanadi R-mintaqa, va salbiy n- maydonlar (1.2-rasm)
Oldinga egilish, kuchlanish uchun j to Va U qarama-qarshi yo'naltirilgan, natijada kuchlanish yoqilgan pn-qiymatga o'tish kamayadi jKimga - U. Bu elektr maydon kuchining pasayishiga va asosiy zaryad tashuvchilarning diffuziya jarayonining qayta boshlanishiga olib keladi. Bundan tashqari, oldinga siljish kenglikni kamaytiradi pn-o'tish, chunki . Diffuziya oqimi, asosiy zaryad tashuvchilarning oqimi, drift oqimidan ancha katta bo'ladi. Bo'ylab pn- o'tish oqimi to'g'ridan-to'g'ri oqim:
Qachon to'g'ridan-to'g'ri oqim, asosiy zaryad tashuvchilar R- hududlarga boradi n-asosiy bo'lmagan hudud. Ko'pchilik zaryad tashuvchilarni ozchilikka aylangan hududga kiritishning diffuziya jarayoni deyiladi. in'ektsiya, va to'g'ridan-to'g'ri oqim - diffuziya oqimi yoki in'ektsiya oqimi. To'plangan kichik zaryad tashuvchilarni qoplash uchun p- Va n- tashqi kontaktlarning zanglashiga olib keladigan joylar, kuchlanish manbasidan elektron oqim paydo bo'ladi, ya'ni. elektron neytrallik tamoyili saqlanib qoladi.
O'sish bilan U oqim keskin oshadi, harorat potentsiali va katta qiymatlarga erishish mumkin. konsentratsiyasi yuqori bo'lgan asosiy tashuvchilar bilan bog'liq.
teskari moyillik pn - o'tish qachon sodir bo'ladi p-maydon minus qo'llaniladi va to n- maydonlar ortiqcha, tashqi manba kuchlanish (1.3-rasm).
Bu tashqi kuchlanish U ga muvofiq kiritilgan j to. Bu qiymatga potentsial to'siqning balandligini oshiradi jKimga + U, elektr maydon kuchi ortadi; kengligi pn- o'tish kuchayadi, chunki , diffuziya jarayoni butunlay va keyin to'xtaydi pn-o'tish oqimlari drift oqimi, kichik zaryad tashuvchilarning oqimi. Bunday oqim pn-o'tish teskari deb ataladi va u issiqlik hosil qilish natijasida paydo bo'ladigan kichik zaryad tashuvchilar bilan bog'liq bo'lganligi sababli, u termal oqim deb ataladi va belgilanadi - I 0 , ya'ni.
Bu oqim kichik hajmga ega. ozchilikdagi zaryad tashuvchilar bilan bog'liq bo'lib, ularning konsentratsiyasi past. Shunday qilib, pn-o'tish bir tomonlama o'tkazuvchanlikka ega.
Teskari moyillik bilan o'tish chegarasida ozchilik zaryad tashuvchilarning kontsentratsiyasi muvozanatga nisbatan bir oz kamayadi. Bu chuqurlikdan ozchilik zaryad tashuvchilarning tarqalishiga olib keladi p- Va n-chegaragacha bo'lgan hududlar pn- o'tish. Unga erishgandan so'ng, ozchilik tashuvchilari kuchli elektr maydoniga tushib, orqali uzatiladi p-n- o'tish, bu erda ular ko'pchilik zaryad tashuvchilarga aylanadi. Kichik zaryad tashuvchilarning chegaraga tarqalishi pn-u orqali asosiy zaryad tashuvchiga aylangan hududga o'tish va drift deyiladi qazib olish. Ekstraktsiya va teskari oqim hosil qiladi p-n- o'tish - kichik zaryad tashuvchilarning oqimi.
Teskari oqimning kattaligi atrof-muhit haroratiga, yarimo'tkazgich materialiga va maydonga juda bog'liq pn- o'tish.
Teskari oqimning haroratga bog'liqligi ifoda bilan aniqlanadi , bu erda T0- nominal harorat, T- haqiqiy harorat, T*- issiqlik oqimining ikki baravar ko'payishi harorati
Kremniy birikmasining issiqlik oqimi germaniyga asoslangan birikmaning issiqlik oqimidan ancha past.<< (на 3-4 порядка). Это связано с jKimga material.
O'tish maydonining ortishi bilan uning hajmi oshadi va natijada termal hosil bo'lish natijasida paydo bo'ladigan ozchilik tashuvchilar soni ortadi va termal oqim kuchayadi.
Shunday qilib, asosiy mulk pn-o'tish - uning bir tomonlama o'tkazuvchanligi. Uning CVC 1.4-rasmda ko'rsatilgan.
Ishning maqsadi- haroratning ishlashga ta'sirini o'rganish p-n- o'tish. Ushbu ishda germaniy va kremniy birikmalarining oqim kuchlanish xususiyatlari uch xil haroratda o'lchanadi.
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). yashirin qiymatlar, aylantirish, avtomatik).
Birinchi xatboshi matni
Ikkinchi matn
Chunki Ushbu paragraflar uchun kenglik va balandlik o'rnatilmagan, keyin sukut bo'yicha brauzerning o'zi ularni Avto qiymatini o'z tushunishi asosida hisoblab chiqadi. Natijada, paragraflar kengligi bo'yicha ular uchun mavjud bo'lgan barcha bo'sh joyni egallaydi va balandligi ular ichiga kiritilgan tarkibning balandligiga mos keladi.
Keling, birinchi o'zgartirishni amalga oshiramiz va birinchi xatboshining kengligini qattiq kodlaymiz (kenglik: 50px):
Birinchisining matni
Ikkinchi matn
Umuman olganda, kutilgan narsa sodir bo'ldi - gorizontal o'lcham kenglikda ko'rsatilgan qiymatga kamaydi: 50px, yaxshi, paragraf balandligi balandligi tufayli hali ham shakllangan: avtomatik (standart qiymat). Natijada, u butun matnni sig'diradigan darajada bo'ldi.
Ammo endi konteyner balandligini balandligi bilan cheklaylik: 15px.
Natijada, biz kichik paragraf konteynerimizdagi matn endi mos kelmasligini va shuning uchun u o'z qo'shnisining hududiga xavfsiz tarzda kirib borishini angladik. Aynan shunday vaziyatlarda kontentning harakatini nazorat qilish, u xizmat qiladi toshib ketish qoidasi.
Overflow "to'lib ketish" yoki boshqacha aytganda "tarkibni to'ldirish" degan ma'noni anglatadi. Agar tarkib unga tayinlangan hududga (konteynerga) to'g'ri kelmasa, nima bo'lishi kerakligini aytadi.
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 qismga tushdi (odatda, konteynerga to'g'ri kelmaydigan tarkibni ko'rsatish uchun overflow:visible ishlatilgan). Biz boshqa ekstremaldan foydalanishimiz mumkin - toshib ketish: yashirin. Keyin konteyner ichiga sig'magan 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 kuzatganmiz). Shunday qilib, agar tarkib unga ajratilgan konteynerga xavfsiz joylashsa ham, aylantirish vertikal va gorizontal aylantirish panellarini ko'rsatadi:
Ammo qiymatdan foydalanish ancha mantiqiyroq bo'ladi Avtomatik Agar aylantirish paneli yaratish kerak bo'lsa, Overflow uchun. Bunday holda, brauzerning o'zi ularni qachon va qaysi o'qlarda ko'rsatishni hisoblab chiqadi.
Masalan, overflow: auto-dan foydalanilganda, biz faqat kontent konteyner chegaralariga to'g'ri kelmaydigan o'q bo'ylab aylana olamiz:
Birinchisining matni
Ikkinchi matn
Xulosa qilib aytishimiz mumkinki, Overflow bunga imkon beradi kontentni ko'rsatish imkoniyatlarini moslashuvchan tarzda sozlash uning idishidan chiqib ketgan taqdirda. Qolgan (ko'rinadigan) kontentni ko'rsatish, ko'rsatmaslik (qirqish - yashirin) yoki kerak bo'lganda majburiy aylantirish (aylantirish) yoki aylantirish (avtomatik) qilish imkoniyatiga ega bo'lasiz.
Ushbu qoidani CSS3 bilan bog'liq yozishning boshqa variantlari mavjud, ammo ular barcha brauzerlar tomonidan qo'llab-quvvatlanadi, ya'ni ular xavfsiz ishlatilishi mumkin. Men alohida o'qlar bo'ylab aylantirishni o'rnatish yoki o'rnatmaslik imkonini beruvchi overflow-x va overflow-y variantlari haqida gapiryapman (x gorizontal, y vertikal).
Agar, masalan, gorizontal aylantirish hech qachon paydo bo'lmasligi va vertikal aylantirish faqat kerak bo'lganda paydo bo'lishi kerak bo'lsa (agar tarkib mos kelmasa), Html elementi uchun siz overflow-x yozishingiz kerak bo'ladi: yashirin va to'lib toshgan. -y: avtomatik. Hamma narsa, vazifa hal qilinadi, chunki bu nayrang barcha brauzerlar tomonidan qo'llab-quvvatlanadi.
Balandlik va kenglik foiz sifatida - nima uchun bizga doktip kerak
Keling, foiz kengligi nimadan hisoblanganligi haqida gapiraylik. Esingizda bo'lsin, maqolaning boshida men diqqatimizni bunga qaratishga va'da bergandim. Aslida, CSS qoidasining kengligi bu erda istisno emas va xuddi to'ldirish va chekka kabi, kontent konteynerining gorizontal o'lchamining foizi sifatida hisoblanadi.
Vaziyat foiz sifatida berilgan kontent maydonining balandligi bilan biroz chalkash. Xuddi shunday deb taxmin qilish mantiqan to'g'ri bo'lar edi - konteyner balandligidan. Ammo bu erda siz va men dualizmga (ikki xulq-atvor modeli) duch kela boshlaymiz - ular ilgari bo'lgani kabi va hozir ham qabul qilingan standartlarga muvofiq. Shu munosabat bilan, biz yana bir bor ko'rish rejimlari mavzusiga to'xtalib o'tishimiz kerak va avvalroq muhokama qilingan.
Tarixan shunday bo'ldiki, standartlar qabul qilingandan so'ng, sof Html tilining eski qoidalariga ko'ra shakllangan ko'plab hujjatlar hali ham mavjud edi va ular bilan nimadir qilish kerak edi. Shu bilan birga, u ham rivojlanmoqda (uslubni belgilash tili ajralib turardi va ba'zi teglar va atributlar eskirgan), shuning uchun brauzerga qaysi standartlar bo'yicha ushbu kodni tahlil qilish kerakligini qandaydir tarzda ko'rsatish kerak edi.
Yangi hujjatlarni (barcha paydo bo'lgan standartlarni hisobga olgan) va eski hujjatlarni (ko'pincha sof HTML-dan boshqa hech narsa hisobga olinmaydi) ajratish uchun Melkosoft o'sha paytda paydo bo'lgan XML tilining kichik xususiyatidan foydalanishni taklif qildi. vaqt. Bu xususiyat xizmat edi va endi doctype deklaratsiyasi deb ataladi.
Bu boshqacha ko'rinishi mumkin (bu haqda yuqorida aytib o'tilgan maqolada 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 berilsa, u standartlar rejimiga o'tadi. Agar brauzer birinchi qatordagi hujjat kodidagi hujjat turini aniqlamasa (yoki u noto'g'ri yozilgan bo'lsa, bu uning yo'qligi bilan bir xil bo'lsa), u deb ataladigan narsaga o'tadi. ayyorlik rejimi(g'ayrioddiy rejim).
Hujjat turiga ega bo'lmagan hujjat brauzerda xuddi juda eski (antik) kabi ko'rsatiladi. Agar siz xuddi shu hujjatga deklaratsiyani qo'shsangiz, u holda brauzer allaqachon o'zining qadimiy patinasini yo'qotadi va hozirda qabul qilingan barcha standartlarga muvofiq hujjat kodi bilan ishlashni boshlaydi.
Ammo antik davr tushunchasi juda boshqacha. Masalan, faqat 2008 yilda paydo bo'lgan hozirgi mashhur Google Chrome brauzeri qanday qadimiylikka ega bo'lishi mumkin? Albatta, IE ancha boy tarixga ega. Shuning uchun, har qanday versiyaning barcha brauzerlari hujjatni deklaratsiyasiz (quirks rejimida yoki hiyla-nayranglarda) xuddi eskisi kabi ko'rsatadi, chunki bu versiya asosiy hisoblanadi.
Nega men uzoq vaqt davomida brauzerni ko'rsatish rejimlari haqida gapirdim? Ammo bu ikki rejim uchun kontent maydonining balandligini (balandligini) foiz sifatida belgilash aynan shu balandlikni hisoblash bilan bog'liq holda juda farq qiladi.
Standartlar rejimida kontentga ega hududning balandligini (foizda) belgilash (hujjat boshida to'g'ri hujjat turi yozilganda), agar balandlik ushbu kontent joylashgan konteyner uchun biron bir joyda o'rnatilmasa, umuman mumkin bo'lmaydi. yopiq (siz tomonidan foizda ko'rsatilgan balandlik e'tiborga olinmaydi).
Agar hujjat turi deklaratsiyasi hujjat kodidan olib tashlansa, biz quyidagi rasmni ko'ramiz:
Standartlarga rioya qilish rejimi uchun (deklaratsiya hujjatning boshida yoziladi) birinchi navbatda konteyner balandligini belgilashingiz kerak (bizning holatlarimizda Body yorlig'i Div uchun konteyner bo'lib xizmat qiladi) va shundan keyingina brauzer. balandligi to'g'ri ishlaydi: 100%:
Natijada, kontent maydonining balandligini foiz sifatida belgilashda biz ikkita mutlaqo boshqacha yondashuvga ega bo'ldik, shuning uchun muammolarni oldini olish uchun sizga maslahat beraman. to'g'ri doctype deklaratsiyasini belgilang barcha hujjatlaringiz (veb-sahifalar) boshida. Standartlar rejimi va ayyorlik rejimi o'rtasidagi farq juda katta bo'lgan yana bir misol bor.
Agar siz biron-bir Html elementi uchun kontent maydoni uchun balandlik va kenglikni o'rnatgan bo'lsangiz, shuningdek, ushbu teg uchun to'ldirish va ramka kengligini (chegara) 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 chegara 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 eskirgan sxema).
Boshqa zamonaviy brauzerlarda balandlik va kenglikda o'rnatilgan o'lchamlarga to'ldirish va chegara kengligi qo'shiladi. Bular. bu holda (doktipsiz hiyla rejimi) kontent maydonining dastlab berilgan o'lchamlari to'ldirish va chegara miqdori bilan kengaytiriladi.
Xo'sh, agar hujjatda ko'rsatma yozilgan bo'lsa, 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, zamonaviy CSS standartlari talab qilganidek, to'ldirish miqdori va chegara kengligi kontent maydonining o'lchamiga qo'shiladi. Shuning uchun, oldini olish uchun har doim doctype yozing.
Omad sizga! Tez orada blog sahifalari saytida ko'rishguncha
Sizni qiziqtirishi mumkin
Position (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 
To'ldirish, chekka va chegara - biz CSS-da ichki va tashqi to'ldirishlarni, shuningdek barcha tomonlar uchun chegaralarni (yuqori, pastki, chap, o'ng) o'rnatamiz. 
Sichqoncha kursorini o'zgartirish uchun Z-indeks va CSS Kursor qoidasi bilan joylashtirish 
CSS nima uchun, kaskadli uslublar jadvallarini Html hujjatiga qanday ulash va bu til sintaksisi asoslari 
Teg, sinf, Id va universal selektorlar, shuningdek zamonaviy CSS-da atribut selektorlari CSS orqali ichki va tashqi havolalar uchun turli uslublar 
Css-dagi ustuvorliklar va ularning muhim, kombinatsiyasi va selektorlari, foydalanuvchi va muallif uslublarining guruhlanishi tufayli ortishi 
CSS-da ko'rsatish (blok, yo'q, inline) - veb-sahifadagi Html elementlarini ko'rsatish turini o'rnating 
CSS-da o'lcham birliklari (Piksellar, Em va Ex) va qoida merosi
Salom, aziz o'quvchi.
Bu o'n birinchi CSS darsi. Ushbu darsda biz faqat ikkita oddiy, ammo muhim xususiyatni ko'rib chiqamiz. Ushbu xususiyatlar blokning balandligi va kengligi uchun javobgardir.
Ushbu darsni o'rganishdan oldin, oldingi darslarni ko'rib chiqing:
Nazariya va amaliyot
Oxirgi darsda biz quti modeli nima ekanligini, ichki va tashqi chegaralarini ko'rib chiqdik. Bunda biz faqat ikkita xususiyatni ko'rib chiqamiz: blokning balandligi va kengligi. CSS-dagi balandlik xususiyat tomonidan o'rnatiladi balandligi , va kenglik xususiyati kengligi . Haqiqiy misolda kodni ko'rib chiqaylik (oxirgi darsdan misol keltiramiz):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html > <bosh > <sarlavha > uy</title> <meta http-equiv = "Content-Type" kontent = "matn/html; charset=utf-8" > <havola rel="stylesheet" type="text/css" href="style.css"> </head> <tanasi> <div id="content"> <div class="firstPar"> <p > Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egests ac eu nulla.</p> <p > Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec sclerisque tellus porttitor massa dictum pulvinar.</p> </div> <div class="secondPar"> <p > cras</p> <ul > <li > amet kondimentum</li> <li > tinimsiz</li> <li > elementum interdum</li> </ul> </div> </div> </tana> </html> |
Va har bir blok uchun CSS-da
Keling, brauzerda qanday ko'rinishini ko'rib chiqaylik:
Ko'rib turganingizdek, biz ma'lum bir balandlik va kenglikni o'rnatdik. Agar biz balandlikni matn mos keladiganidan kamroq o'rnatsak, matn blokdan chiqib ketadi. Balandlik va kenglik bilan tajriba qiling. Avvaliga piksellardagi kerakli hajmni ko'z bilan aniqlash qiyin bo'ladi, ammo vaqt o'tishi bilan siz bunga ko'nikasiz.
Bu kichik va oddiy o'quv qo'llanma. Blok hajmini o'zingiz o'zgartirishga harakat qiling va nima bo'lishini ko'ring. Amaliyot - har qanday narsani o'rganishning eng tezkor usuli!
Salom aziz o'quvchilar! Bugun biz CSS xususiyatlaridan foydalangan holda veb-sahifaning blok elementlarining hajmini qanday o'rnatishni va agar u elementga mos kelmasa, kontentning ko'rinishini qanday 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 elementlar hajmining nisbiy qiymatini foizlarda 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, u holda o'lchamlar brauzer oynasiga bog'liq bo'ladi.
div (kengligi: 40%;)
Avtomatik qiymat veb-brauzerga element hajmini boshqarish imkonini beradi va standart qiymatdir. Bunday holda, elementning o'lchamlari uning barcha tarkibiga to'liq mos keladigan tarzda bo'ladi.
Keling, bir nechta misollarni ko'rib chiqaylik.
Bizning avtomobil saytimizga xush kelibsiz. Bu yerda siz avtomobillar, ularning texnik xususiyatlari va xususiyatlari haqida ko'plab qiziqarli va foydali maqolalarni topasiz.
Natija:
Ushbu misolda biz div blokini 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 o'rnatiladi, shuning uchun siz skrinshotda ko'rib turganingizdek, uning kengligi asosiy elementning kengligiga teng, balandligi esa paragrafdagi barcha matnga mos keladigan tarzda o'rnatiladi.
Endi p paragraf uchun CSS sozlamalarini o'zgartiramiz va belgilangan o'lchamlarni o'rnatamiz:
qatlam 2(
fon: #eee;
kengligi: 250px;
}
Natija:
Ko'rib turganingizdek, paragrafning kengligi toraydi va 250 pikselga teng bo'ldi va balandligi matn mos keladigan tarzda oshdi, chunki balandlik parametri avtomatik bo'lib qoladi.
Endi paragrafning balandligi va kengligini foiz sifatida belgilaymiz:
qatlam 2(
fon: #eee;
kengligi: 50%;
balandligi: 50%;
}
Natija:
Rasmda ko'rib turganingizdek, p elementining kengligi div elementining yarmiga teng bo'ldi. Va balandligi div balandligining 75 foizigacha ko'tarildi.
Har qanday elementlarning kengligi va balandligini nisbiy birliklarda o'rnatishda siz minimal va maksimal mumkin bo'lgan o'lchamlarni belgilashingiz kerak bo'lishi mumkin. Axir, masalan, brauzer oynasining o'lchamini o'zgartirganda, elementning o'lchami 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 kichikroq bo'lishi mumkin emasligi aniq.
Vazifani aniqlab berishga arziydi balandlik va kenglik parametrlari faqat blok teglari uchun mantiqiy, chunki inline elementlar uchun bu parametrlar brauzer tomonidan qayta ishlanmaydi.
Elementga qattiq balandlik va kenglik parametrlarini o'rnatganingizda, undagi kontent cheklangan maydonga mos kelmasligi mumkin.
Masalan, yuqoridagi misollardan p paragraf hajmini 100 pikselgacha kamaytiramiz:
qatlam 2(
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. Ikki paragrafni ko'rib chiqing:
Birinchi xatboshi matni
Ikkinchi xatboshi matni
Natija:
Paragraflar uchun na kenglik, na balandlik ko'rsatilmaganligi sababli, brauzer avtomatik qiymatni o'zi tushunishi asosida ularni mustaqil ravishda hisoblab chiqadi. Natijada, kenglikdagi paragraflar barcha mavjud bo'sh joyni egalladi va ulardagi tarkibga muvofiq balandlikda.
Endi biz birinchi xatboshining kengligini cheklaymiz:
Birinchi xatboshi matni
Ikkinchi xatboshi matni
Natija:
Paragrafning kengligi kutilmoqda va balandlik barcha matnga mos keladigan tarzda o'rnatiladi.
Xo'sh, endi biz birinchi xatboshining balandligini cheklaymiz:
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 kontentni ko'rsatishni bildiradi. Natijani yuqoridagi misolda ko'rish mumkin.
Qoida konteynerga sig'maydigan hamma narsani yashiradi:
Barcha tarkib mos bo'lsa ham, aylantirish qiymati elementda vertikal va gorizontal aylantirish panellarini ko'rsatadi:
Birinchi xatboshi matni
Ikkinchi xatboshi matni
Eng ommabop va mantiqiy yechim, agar siz konteyner uchun aylantirish panellarini yasashingiz kerak bo'lsa, bu qiymatdir avto. Bunday holda, brauzerning o'zi qachon va qaysi o'qlarda aylantirish panellarini ko'rsatish kerakligini aniqlaydi:
Birinchi xatboshi matni
Ikkinchi xatboshi matni
Natija:
Scrollbars, shuningdek, overflow-x va overflow-y uslubi atributlari yordamida ham moslashtirilishi mumkin, bu sizga alohida o'qlarda aylantirish ko'rinishini sozlash imkonini beradi. Shunday qilib, javobgar gorizontal o'q, va uchun vertikal o'q.
Shuning uchun, masalan, gorizontal aylantirish hech qachon paragrafda ko'rinmasligi va vertikal aylantirish faqat kerak bo'lganda paydo bo'lishi kerak bo'lsa, quyidagi CSS qoidasini yozish kifoya:
p(toshib-x:yashirin;toshib-y:avto;)
Va muammo hal qilinadi.
Hammasi shu. Yana ko'rishguncha. Blog yangilanishlariga obuna bo'lishni unutmang va agar siz ijtimoiy tarmoq tugmalaridan foydalansangiz, men minnatdor bo'laman.
Odatiy bo'lib, blok elementlari avtomatik kenglikdan foydalanadi. Bu shuni anglatadiki, bo'sh joy qancha bo'lsa, element gorizontal ravishda cho'ziladi. Blok elementlarining balandligi sukut bo'yicha avtomatik ravishda o'rnatiladi, ya'ni. brauzer kontent maydonini vertikal yo'nalishda cho'zadi, shunda barcha tarkib 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 belgilaydi, blok elementining umumiy kengligini hisoblash uchun siz kontent maydonining kengligini, chap va o'ng to'ldirishni va chap va o'ng chegaraning kengligini qo'shasiz. . Xuddi shu narsa elementning umumiy balandligi uchun ham amal qiladi, faqat barcha qiymatlar vertikal ravishda hisoblanadi:
Ushbu paragraf uchun faqat kenglik va balandlikni o'rnating.
Ushbu paragrafda kenglik va balandlikdan tashqari, chekinish, chegara va chiqish mavjud.
Sinab ko'ring »
Misol ikkinchi element birinchisiga qaraganda ko'proq joy egallashini aniq ko'rsatadi. Agar formulamiz bo'yicha 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 bitta muhim nuqtaga e'tibor berishingiz kerak - element ichida joylashgan tarkib belgilangan blok hajmidan oshishi mumkin. Bunday holda, kontentning bir qismi element chegaralaridan tashqariga chiqadi, bu yoqimsiz daqiqani oldini olish uchun siz CSS to'ldirish xususiyatidan foydalanishingiz mumkin. Overflow xususiyati brauzerga blokning mazmuni uning hajmidan oshsa nima qilish kerakligini aytadi. Bu xususiyat to'rtta qiymatdan birini qabul qilishi mumkin:
- visible - brauzer tomonidan ishlatiladigan standart qiymat. Ushbu qiymatni belgilash, to'ldirish xususiyatini o'rnatmaslik bilan bir xil ta'sirga ega bo'ladi.
- aylantirish - elementga vertikal va gorizontal aylantirish panellarini qo'shadi.
- avtomatik - agar kerak bo'lsa, aylantirish panellarini qo'shadi.
- yashirin - blok elementi chegarasidan tashqariga chiqadigan ba'zi tarkibni yashiradi.
