CSS Box

CSS Box

Box-ийн Хэмжээ

Хайрцагны хэмжээсийг тохируулахын тулд та width ,height propertie-г ашиглаж болно.

Хязгаартай өндөр,өргөн (Limiting height,Width)

Зарим хуудасны загвар нь хэрэглэгчийн дэлгэцийн хэмжээтэй таарч даган томорч, жижгэрдэг.

Үүнийг хийхдээ min-width max-width min-height max-height property-г ашиглана.
min-width property нь хөтчийн цонх нарийссан үед хайрцгийг харуулах хамгийн бага хэмжээг зааж өгдөг бөгөөд max-width property нь хөтчийн цонх өргөн байх үед хайрцагны сунгах хамгийн их өргөнийг заадаг.

Агуулгыг голлуулах (Centering Content)

Хайрцгийг дэлгэцний голд байрлуулах эсвэл доторх зүйлийг нь голлуулахыг хүсвэл margin-ын баруун зүүн талын утгыг auto болгож болно.

Бас хайрцгаа голлуулахын тулд эхлээд түүндээ өргөн өгөх хэрэгтэй. Ингэхгүй бол хайрцаг нь дэлгэцийн өргөнийг бүхлээр эзэлнэ.

Хайрцгийн margin-ын баруун, зүүн талыг auto болгосноор browser 2 талын зайг тэнцүү болгох замаар хайрцаг голлодог.

Зарим хуучин browser дээр үүнийг ажиллуулахын тулд text-align property-г center болгох хэрэгтэй. Энэ property нь child элемзнтүүдэд өвлөгдөж текстүүдийг голлуулна. Хэрэв та текстийг голлуулахыг хүсэхгүй байвал тухайн элемент дээр нь text-align property-г өөрчлөх хэрэгтэй.

Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.

Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.

Overflowing Content

Overflow property нь хайрцагт агуулагдах агуулга нь хайрцагны хэмжээнээс том бол юу хийхийг хөтөчид хэлж өгдөг.

    Энэ нь хоёр утгын аль нэгтэй байж болно:

  • hidden

    This property нь зүгээр л тохирохгүй нэмэлт агуулгыг нуудаг хайрцаг.

  • scroll

    This property нь хайрцагт гүйлгэх мөрийг нэмснээр хэрэглэгчид алга болсон агуулгыг харахын тулд гүйлгэх боломжтой

Border, Margin & Padding

hello kki

padding

border

margin

Хайрцгийн харагдах байдлыг удирдаж болох 3 property байдаг.

border

Хайрцаг бүрт хүрээ байдаг (харагдахгүй эсвэл 0 pixel өргөнтэй байхаар заасан байсан ч). Хүрээ нь хайрцгийн ирмэгийг бусад хэсгээс нь ялгахад тусалдаг.

padding

Padding нь хайрцгийн хүрээ болон доторх агуулгын хоорондох зай.

margin

Margin нь хайрцгийн хүрээний гадна байрладаг. Margin-д өргөн өгч зэргэлдээ 2 хайрцгийг хүрээг зааглахдаа ашиглаж болно.

Хуудас дээрх зүйлсийн хооронд үлдэж буй зайг white space гэдэг. 2 дахь жишээн дээр paddingхэрэглээгүй үед доторх текст нь хайрцгийн хүрээтэй нийлж уншихад хүндрэлтэй харагдаж байна.

Мөн 2 дахь жишээн дээр margin хэрэглээгүй үед зэрэгцээ орших хайрцгийн хүрээ хоорондоо нийлжбайх ёстойгоосоо бүдүүн болсон байна.

Хүрээний өргөн (Border Width)

border-width property-ийн утга нь хүрээний өргөнийг хянадаг. Түүний утгыг pixel-ээр болон thin,medium,thick 3 утгын нэгийг ашиглаж болно.

Хайрцгийн 4 талыг хүрээг тус бүрд нь өөрөөр өгч болдог:

example:

Hohner's "Clavinet" is essentially anelectric clavichord.

Hohner's "Clavinet" is essentially anelectric clavichord.

Hohner's "Clavinet" is essentially anelectric clavichord.

border-style

  • solid - дан зураас
  • dotted - цэг
  • dashed - тасархай зураас
  • double - давхар зураас
  • groove - ховилтой
  • ridge - товгор
  • inset - дотогшоо
  • outset - гадагшаа
  • hidden / none - хүрээгүй

Хүрээний өнгө (Border Color)

Хүрээний өнгийг RGB, hex эсвэл CSS өнгөний нэрээр өгч болно.

Хүрээний 4 талын өнгийн тус бүрд нь өгөхдөө:

Товчлол (Border Shorthand)

Хүрээний өргөн, загвар, өнгө 3-ыг нэг дор заах
боломж олгодог property бол border бөгөөд үүнд
утгуудыг яг энэ дарааллын дагуу өгөх ёстой.

padding

padding property нь элемент доторх агуулгыг түүний хүрээнээс нь тусгаарлах зайг бий болгодог.

Түүний утгыг ихэвчлэн pixel-ээр өгдөг боловч бусад хэмжих нэгжүүдийг ч мөн өгч болно.

Хайрцгийн талуудад ялгаатай padding өгөх:
example

margin

margin property нь хайрцгийн гадна байрлаж зэргэлдээ хайрцгуудын хоорондын зайг зохицуулдаг.

Нэг хайрцаг нөгөөгийнхөө дээр байрлах үед 2 хайрцгийн margin давхцана. Ийм үед 2 margin-ын аль их нь хайрцгуудад нөлөөлөх бөгөөд бага хэмжээтэй нь нөлөөгүй болдог.

Хайрцгийн талуудад ялгаатай padding өгөх:
example

box-shadow

Box-shadow шинж чанар нь хайрцагны эргэн тойронд сүүдэр нэмэх боломжийг олгодог. Энэ нь css-text хуудсанд таарсан текст-сүүдэр шинж чанартай адил ажилладаг. Энэ нь дор хаяж эдгээр хоёр утгын эхнийх нь болон өнгө ашиглах ёстой:

  • Horizontal offset

    Сөрөг утгууд нь сүүдрийг хайрцагны зүүн талд байрлуулна.

  • Vertical offset

    Сөрөг утгууд нь сүүдрийг хайрцагны дээд талд байрлуулна.

  • Blur distance

    Хэрэв орхигдуулсан бол сүүдэр нь border шиг шугам болно.

  • Spread of shadow

    Ашигласан тохиолдолд эерэг утга нь сүүдрийг бүх чиглэлд тэлэх бөгөөд сөрөг утга нь түүнийг агшихад хүргэдэг.

border-radius

CSS3-т border-radius property нэмэгдсэнээр хүрээг дугуйруулж болдог болсон.

border-ийн 4 өнцгийн тус бүрд нь өөр өөр өгөхдөө:

Summary - Дүгнэлт

  • CSS нь HTML элемент бүрийг өөрийн гэсэн хайрцагтай мэт авч үздэг.
  • Та хайрцагны хэмжээг хянахын тулд CSS ашиглаж болно.
  • Мөн та CSS-ийн тусламжтайгаар хайрцаг бүрийн хүрээ, захын зай, дэвсгэрийг хянах боломжтой.
  • Дэлгэц болон харагдах байдлын шинж чанарыг ашиглан элементүүдийг нуух боломжтой.
  • Текст болон толгойн хэсгийг агуулсан хайрцагны өргөнийг хянах замаар унших чадварыг сайжруулж болно.
  • CSS3 нь зургийн хүрээ болон бөөрөнхий хүрээ үүсгэх чадварыг нэвтрүүлсэн.