CSS Загварын хэв маяг

CSS-ийн тоймууд нь зөвхөн хил хязгаараас ч илүү юм

CSS-ийн тойм шинж чанар нь ойлгомжгүй шинж чанартай байдаг. Та анхнаасаа үүнийг хил хязгаарынхаас ялгаатай гэдгийг ойлгоход хэцүү байдаг. W3C нь дараах ялгаануудтай гэж тайлбарласан:

Үзүүлэн тооцоогүй газруудын тойм

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

Элементийг элементийн эргэн тойронд байрлуулсан бол энэ хуудсанд элемент хэрхэн нөлөөлөхгүй. Энэ нь элементийн хэмжээ, байрлалыг өөрчлөхгүй. Хэрэв та элемент дээр тойм хийвэл, энэ элементийн тоймыг оруулалгүй ижил зай эзэлнэ. Энэ нь хилийн тухай биш юм. Элемент дээрх хилийн гадна талын өргөн ба элементийн өндрийг нэмнэ. Хэрэв та 50 пиксел өргөн, 2 пикселийн хилтэй байсан бол 54 пиксел (талдаа 2 пиксел) авна. 2-пикселийн тоймтой ижил зураг таны хуудсан дээр зөвхөн 50 пиксел өргөнтэй байх тул тойм нь зурагны гаднах захад харагдана.

Тоймууд нь тэгш бус байх магадлалтай

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

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

Үл хөдлөх хөрөнгийн хэрэглээ

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

Дүрслэл өнгө нь "урвуу" гэсэн нэр томъёог хүлээн авдаг бөгөөд энэ нь өнөөгийн дэвсгэрийн урвуу өнгийг дүрсэлдэг. Энэ нь динамик вэб хуудсан дээр элементүүдийг ямар өнгө хэрэглэхийг мэдэхгүйгээр онцлох боломжийг танд олгоно.

Мєн идэвхтэй холбоосуудын хоорондох тасархай шугамыг арилгахын тулд тоймыг ашиглах боломжтой. CSS-Trick-ийн энэ өгүүлэл нь цэгтэй тоймыг хэрхэн арилгахыг харуулж байна.