Онолын товч мэдээлэл. Санаж байх зүйлс

Тодорхойлолт

HTML ашиглан зургийн хэмжээг өөрчлөхийн тулд өндөр ба өргөний шинж чанаруудыг өгсөн болно. Та утгыг пиксел эсвэл хувиар ашиглаж болно. Хэрэв хувийн тэмдэглэгээг тохируулсан бол зургийн хэмжээсийг эх элемент буюу шошго байрладаг савтай харьцуулан тооцно. . Хэрэв эх контейнер байхгүй бол хөтчийн цонх нь түүний эх контейнерийн үүргийг гүйцэтгэнэ. Өөрөөр хэлбэл width="100%" гэдэг нь тухайн зураг вэб хуудасны өргөн хүртэл сунах болно гэсэн үг юм. Зөвхөн нэг өргөн эсвэл өндрийн атрибут нэмэх нь зургийн харьцаа болон харьцааг хадгална. Дараа нь хөтөч анхны өндөр, өргөнийг тодорхойлохын тулд зургийг бүрэн ачаалахыг хүлээнэ.

Вэб хуудсан дээрх бүх зургийн хэмжээг анхаарч үзээрэй. Энэ нь хуудасны ачааллыг арай хурдан болгодог, учир нь хөтөч зураг бүрийн хэмжээг хүлээн авсны дараа тооцоолох шаардлагагүй болно. Энэ мэдэгдэл нь хүснэгт дотор байрлуулсан зургуудад онцгой ач холбогдолтой юм.

Зургийн өргөн ба өндрийг дээш болон доош нь өөрчилж болно. Гэсэн хэдий ч файлын хэмжээ өөрчлөгдөөгүй хэвээр байгаа тул энэ нь зургийг татаж авах хурдад ямар ч байдлаар нөлөөлөхгүй. Тиймээс зургийг болгоомжтой багасгах хэрэгтэй, учир нь. Энэ нь уншигчдын дунд төөрөгдөл үүсгэж магадгүй, яагаад ийм жижиг зургийг ачаалахад удаан хугацаа шаардагддаг вэ? Гэхдээ хэмжээг нэмэгдүүлэх нь эсрэг үр дүнд хүргэдэг - зургийн хэмжээ том боловч файл нь ижил хэмжээтэй зурагтай харьцуулахад илүү хурдан ачаалагддаг. Гэхдээ зургийн чанар муудаж байна.

Синтакс

HTML
XHTML

Үнэ цэнэ

Пиксел эсвэл хувиар илэрхийлсэн аливаа эерэг бүхэл тоо.

Өгөгдмөл утга

Зургийн анхны өргөн.

HTML5 IE Cr Op Sa Fx

Сайн байна уу, блог сайтын эрхэм уншигчид. Өнөөдөр бид өндөр, өргөнийг ашиглан агуулгын талбайн хэмжээсийг хэрхэн тохируулах, түүнд заасан зайд багтаахаас илүү контент байгаа тохиолдолд энэ агуулгын дэлгэцийг хэрхэн тохируулах талаар ярилцах болно (css overflow дүрэм). далд утгууд, гүйлгэх, автомат).

Эхний догол мөрийн текст

Хоёр дахь текст

Учир нь Эдгээр догол мөрийн өргөн ба өндрийг тохируулаагүй бол хөтөч өөрөө Автомат утгын талаарх өөрийн ойлголт дээр үндэслэн тэдгээрийг анхдагчаар тооцдог. Үүний үр дүнд догол мөрүүд нь тэдэнд байгаа бүх зайг өргөн, өндөр нь тэдгээрт хавсаргасан агуулгын өндөртэй тохирч байна.

Одоо эхний өөрчлөлтийг хийгээд эхний догол мөрний өргөнийг хатуу кодчилъё (өргөн: 50px):

Эхнийх нь текст

Хоёр дахь текст

Ерөнхийдөө хүлээгдэж буй зүйл тохиолдсон - хэвтээ хэмжээ нь өргөн: 50px-д заасан утга хүртэл буурч, догол мөрний өндөр нь өндрийн ачаар үүссэн хэвээр байна: auto (үндсэн утга). Үүний үр дүнд энэ нь текстийг бүхэлд нь багтаах боломжтой болсон.

Харин одоо чингэлэгийн өндрийг мөн high:15px-ээр хязгаарлая.

Үүний үр дүнд бид догол мөрний жижиг саванд байгаа текст тохирохоо больсон тул хөршийнхөө нутаг дэвсгэрт аюулгүй нэвтэрсэн. Энэ нь үйлчилдэг ийм нөхцөл байдалд агуулгын зан төлөвийг яг нарийн хянах явдал юм халих дүрэм.

Overflow гэдэг нь "халих" буюу өөрөөр хэлбэл "агуулгын халих" гэсэн утгатай. Энэ нь тухайн контент нь түүнд хуваарилагдсан хэсэгт (контейнер) багтахгүй бол юу болох талаар өгүүлдэг.

Overflow нь хэд хэдэн хүчинтэй утгатай боловч анхдагч нь юм харагдахуйц (үзүүлэх):

Тийм ч учраас бидний сүүлчийн жишээн дээр дээд догол мөрний текст доод хэсэгт гүйсэн (анхдагчаар, overflow:visible -ыг саванд багтаахгүй контентыг харуулахын тулд ашигласан). Бид нөгөө туйлшралыг ашиглаж болно - халих:далд. Дараа нь саванд багтахгүй байгаа бүх зүйл вэб хуудсан дээр харагдахгүй:

Энэхүү CSS шинж чанарын бусад хоёр утга нь саванд тохирохгүй контентыг гүйлгэх боломжийг олгодог (бид судалж байхдаа үүнтэй төстэй зүйлийг аль хэдийн ажигласан). Тиймээс, гүйлгэх нь агуулга нь түүнд зориулагдсан саванд аюулгүй багтсан байсан ч босоо болон хэвтээ гүйлгэх мөрүүдийг харуулах болно:

Гэхдээ утгыг ашиглах нь илүү логик байх болно АвтоматХэрэв та гүйлгэх мөр хийх шаардлагатай бол Overflow. Энэ тохиолдолд хөтөч өөрөө тэдгээрийг хэзээ, аль тэнхлэг дээр харуулахыг тооцоолох болно.

Жишээлбэл, overflow: auto-г ашиглах тохиолдолд бид зөвхөн контент нь савны хил хязгаарт багтахгүй тэнхлэгийн дагуу гүйлгэх боломжтой болно.

Эхнийх нь текст

Хоёр дахь текст

Дүгнэж хэлэхэд, Overflow нь нэлээд боломжтой гэж хэлж болно агуулгын дэлгэцийн сонголтыг уян хатан байдлаар өөрчлөхсавнаасаа гарсан тохиолдолд. Та үлдсэн (харагдах) агуулгыг харуулах, харуулахгүй (тайрах - далд) эсвэл шаардлагатай бол заавал гүйлгэх (гүйлгэх) эсвэл гүйлгэх (автомат) хийх боломжтой болно.

CSS3-тай холбоотой энэ дүрмийг бичих өөр сонголтууд байдаг боловч тэдгээрийг бүх хөтчүүд дэмждэг бөгөөд энэ нь тэдгээрийг аюулгүй ашиглах боломжтой гэсэн үг юм. Би overflow-x ба overflow-y сонголтуудын талаар ярьж байна, энэ нь танд тус тусын тэнхлэгийн дагуу гүйлгэх эсвэл тохируулахгүй байх боломжийг олгодог (x нь хэвтээ, y нь босоо).

Жишээлбэл, та хэвтээ гүйлгэх нь хэзээ ч гарч ирэхгүй бөгөөд босоо гүйлгэх нь зөвхөн шаардлагатай үед гарч ирдэг (хэрэв агуулга тохирохгүй бол) Html элементийн хувьд та overflow-x бичих хэрэгтэй: нуугдмал ба халих- у: автомат . Бүх зүйл, даалгавар шийдэгдэх болно, учир нь энэ хуурмаг бүх хөтчүүд дэмжигддэг.

Өндөр ба өргөнийг хувиар илэрхийлдэг - яагаад бидэнд сургаал хэрэгтэй байна вэ?

Одоо өргөнийг ямар хувиар тооцдог талаар ярилцъя. Өгүүллийн эхэнд би үүнд анхаарлаа хандуулна гэж амласан гэдгийг санаарай. Үнэн хэрэгтээ, CSS дүрмийн өргөн нь энд үл хамаарах зүйл биш бөгөөд дүүргэлт ба захын адил агуулгын савны хэвтээ хэмжээний хувиар тооцогдоно.

Нөхцөл байдал нь агуулгын талбайн өндрийг хувиар илэрхийлсэн нь арай илүү будлиантай байна. Савны өндрөөс ижил төстэй гэж үзэх нь логик юм. Гэхдээ энд та бид хоёр хоёрдмол үзэлтэй (зан байдлын хоёр загвар) тулгарч эхэлж байна - тэд өмнө нь байсан шиг, одоо ч хүлээн зөвшөөрөгдсөн стандартын дагуу. Үүнтэй холбогдуулан бид өмнө нь хэлэлцсэн дэлгэцийн горимуудын сэдвийг дахин хөндөх ёстой.

Түүхийн хувьд стандартыг баталсны дараа цэвэр Html хэлний хуучин дүрмийн дагуу олон тооны баримт бичиг бий болсон хэвээр байсан бөгөөд тэдгээртэй холбоотой ямар нэг зүйл хийх шаардлагатай болсон. Үүний зэрэгцээ энэ нь бас хөгжиж байсан (загварын тэмдэглэгээний хэл нь ялгарч, зарим шошго, шинж чанарууд нь хуучирсан) тул энэ кодыг задлан шинжлэхэд ямар стандартын дагуу вэб хөтөч дээр ямар нэгэн байдлаар харуулах шаардлагатай болсон.

Шинэ баримт бичгүүдийг (бүх шинээр гарч ирж буй стандартуудыг харгалзан үзсэн) болон хуучин баримт бичгүүдийг (ихэвчлэн цэвэр Html-ээс өөр юу ч тооцдоггүй) ялгахын тулд Melkosoft тухайн үед саяхан гарч ирсэн XML хэлний жижиг функцийг ашиглахыг санал болгов. Энэ функц нь үйлчилгээ байсан бөгөөд одоо doctype тунхаглал гэж нэрлэгддэг.

Энэ нь өөр харагдаж магадгүй (дээр дурдсан нийтлэлээс энэ талаар дэлгэрэнгүй уншина уу), гэхдээ энэ сонголт үргэлж ажиллах болно:

Тиймээс хөтөч нь баримт бичгийг задлан шинжлэхэд ямар стандарт ашиглах ёстойг харуулсан тэмдэглэгээг хүлээн авсан. Хэрэв баримт бичгийн төрөл өгөгдсөн бол стандарт горимд шилжинэ. Хэрэв хөтөч эхний мөрөнд байгаа баримт бичгийн кодыг олж чадаагүй бол (эсвэл энэ нь буруу бичигдсэн байх болно, энэ нь байхгүйтэй адил юм) тэр нь гэж нэрлэгддэг зүйл рүү орно. заль мэх горим(хачирхалтай горим).

Баримт бичгийн төрөлгүй баримт нь хөтөч дээр маш хуучин (эртний) юм шиг харагдах болно. Хэрэв та ижил баримт бичигт тунхаглал нэмбэл хөтөч нь эртний түүхээ хаяж, одоо хүлээн зөвшөөрөгдсөн бүх стандартын дагуу баримт бичгийн кодтой ажиллах болно.

Харин эртний тухай ойлголт их өөр. Жишээлбэл, алдартай хөтөч одоо ямар эртний үетэй байж болох вэ? Гүүгл Кром, аль нь зөвхөн 2008 онд гарч ирсэн бэ? Мэдээжийн хэрэг IE нь нэлээд баялаг түүхтэй. Тиймээс аль ч хувилбарын бүх хөтчүүд баримт бичгийг мэдэгдэлгүйгээр (хачирхалтай горим эсвэл заль мэх) харуулах болно, учир нь энэ хувилбар нь үндсэн хувилбар гэж тооцогддог.

Би яагаад хөтчийн дэлгэцийн горимын талаар удаан ярьсан бэ? Гэхдээ эдгээр хоёр горимын хувьд агуулгын талбайн өндрийг (өндөр) хувиар тогтоох нь яг энэ өндрийн тооцоотой холбоотой маш өөр юм.

Стандарт горимд (баримт бичгийн эхэнд зөв бичгийн төрлийг бичсэн тохиолдолд) агуулга бүхий хэсгийн өндрийг (хувь хувиар) тохируулах нь энэ агуулгыг агуулах савны өндрийг хаа нэг газар тогтоогоогүй тохиолдолд огт боломжгүй болно. хавсаргасан (таны өндрийн хувиар зааж өгсөн нь үл хэрэгсэх болно).

Хэрэв баримт бичгийн кодоос баримт бичгийн төрлийн мэдэгдлийг хасвал бид дараах зургийг харах болно.

Стандартыг дагаж мөрдөх горимын хувьд (мэдээлэл нь баримт бичгийн эхэнд бичигдсэн байдаг) та эхлээд савны өндрийг тохируулах ёстой (манай тохиолдолд Body шошго нь Div-ийн савны үүрэг гүйцэтгэнэ), зөвхөн дараа нь хөтөч зөв ажиллах болно өндөр: 100%:

Үүний үр дүнд бид агуулгын талбайн өндрийг хувиар тогтоохдоо огт өөр хоёр аргыг олж авсан тул асуудал гарахаас зайлсхийхийн тулд би танд зөвлөгөө өгөхийг зөвлөж байна. docttype тунхаглалыг зөв зааж өгнө үүтаны бүх баримт бичгийн эхэнд (вэб хуудас). Стандарт горим ба трик горимын ялгаа асар их байдаг өөр нэг жишээ бий.

Хэрэв та агуулгын талбарт ямар нэгэн Html элементийн өндөр, өргөнийг тохируулж, мөн энэ шошгонд дэвсгэр болон хүрээний өргөнийг (хязгаар) зааж өгсөн бол, дараа нь quirks горимд (бичгээр мэдэгдэлгүйгээр) өөр өөр хөтөчэнэ бүгдийг янз бүрээр тайлбарлаж болно.

Хуучин IE 5.5 хөтөч дээр дэвсгэр болон хүрээний өргөнийг өндөр, өргөнөөр заасан хэмжээнээс дотогшоо тоолох болно. Тэдгээр. Элементийн нийт хэмжээ нь эдгээрт заасантай тохирно CSS шинж чанарууд(энэ нь ашиглахаа больсон хуучирсан схем юм).

Үлдсэн хэсэгт орчин үеийн хөтөчжийргэвч болон хилийн өргөнийг өндөр, өргөнөөр өгөгдсөн хэмжээсүүдэд нэмнэ. Тэдгээр. энэ тохиолдолд (баримт бичгийн төрөлгүй заль мэх горим) агуулгын талбарын анх өгөгдсөн хэмжээсүүд нь дэвсгэр болон хүрээний хэмжээгээр нэмэгдэх болно.

Хэрэв баримт бичигт удирдамж бичигдсэн бол орчин үеийн болон хуучин бүх хөтчүүдэд хандлагын хоёрдмол утгатай эдгээр асуудлуудаас аль хэдийн зайлсхийх боломжтой. Энэ тохиолдолд болон IE 5.5-д орчин үеийн CSS стандартын шаардлагын дагуу дүүргэлтийн хэмжээ болон хүрээний өргөнийг агуулгын талбайн хэмжээнд нэмнэ. Тиймээс зайлсхийхийн тулд үргэлж doctype бичдэг.

Чамд амжилт хүсье! Удахгүй блог хуудсууд дээр уулзацгаая

Та сонирхож магадгүй

Байрлал (үнэмлэхүй, харьцангуй ба тогтмол) - CSS-д Html элементүүдийг байрлуулах арга замууд (зүүн, баруун, дээд ба доод дүрмүүд)
CSS-д хөвөгч, тодорхой болгох - блок байрлуулах хэрэгслүүд
Дотор, зах ба хил - бид CSS-д дотор болон гадна талын жийргэвч, мөн бүх талын (дээд, доод, зүүн, баруун) хүрээг тохируулсан.
Хулганы курсорыг өөрчлөхийн тулд Z-индекс болон CSS курсорын дүрмээр байршуулах
CSS гэж юу вэ, каскадын загварын хуудсыг хэрхэн холбох вэ html баримт бичигмөн энэ хэлний үндсэн синтакс
Шошго, анги, Id, бүх нийтийн сонгогчид, мөн орчин үеийн CSS-д атрибут сонгогчид Интерьер болон гадаад холбоосууд CSS-ээр дамжуулан
Сонгогч, хэрэглэгчийн болон зохиогчийн хэв маягийн чухал, хослол, бүлэглэлээс шалтгаалан Css-ийн тэргүүлэх чиглэлүүд ба тэдгээрийн өсөлт
CSS-д харуулах (блок, байхгүй, мөр) - вэб хуудсан дээрх Html элементийн дэлгэцийн төрлийг тохируулах
Хэмжээний нэгжүүд (Пиксел, Эм ба Экс) ба CSS дэх дүрмийн өв

Сайн уу, эрхэм уншигч.

Энэ бол арван нэг дэх хичээл юм CSS сурах. Энэ хичээл дээр бид зөвхөн хоёр энгийн боловч чухал шинж чанарыг авч үзэх болно. Эдгээр шинж чанарууд нь блокийн өндөр ба өргөнийг хариуцдаг.

Энэ хичээлийг судлахын өмнө өмнөх хичээлүүдийг үзээрэй.

Онол ба практик

Сүүлийн хичээлээр бид хайрцагны загвар гэж юу болох, дотоод болон гадаад догол мөрийг авч үзсэн. Үүнд бид зөвхөн хоёр шинж чанарыг авч үзэх болно: блокны өндөр ба өргөн. CSS-ийн өндрийг өмчөөс тохируулна өндөр , болон width шинж чанар өргөн . Бодит жишээн дээрх кодыг харцгаая (сүүлийн хичээлээс жишээ авъя):

Мөн блок бүрийн хувьд CSS дээр