Төвтэй: CSS-зохион байгуулалт

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

төвлөрсөн текстийг уялдуулах

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

• текст тэгшлэх: төв;

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

хуудас нь ихэвчлэн хаяг өөртөө шинж чанар уялдуулах. Энэ нь нэн даруй W3C тэгшлэх шинж чанар хуучирсан хүлээн зөвшөөрсөн тул код нь хүчингүй болгодог. хуудсан дээр ашиглах санал болгож байна.

төвтэй блок

Хэрэв та дунд DIV нь тэгш тохируулахыг хүсвэл, CSS нь маш тав тухтай арга замыг санал болгож чадна: гадаад дүүрэн барьцааны ашиглах. Дүүрэн блок элемент болон шугам блок болгон зааж өгч болно. Svoysva утга нь 0 (босоо дүүрэн), болон авто (хэвтээ чиглэлд нь автомат догол) байх ёстой:

• маржин: 0 авто;

Одоо энэ сонголт нь туйлын зөв гэж хүлээн зөвшөөрнө. CSS-маржин өмч нь АНУ-ын хуудсан дээр байр суурь элемент холбоотой олон асуудлыг шийдэх боломж олгодог: гадаад жийргэвчтэй ашиглах нь та төвийн тэгш боломжийг олгодог.

блокийн зүүн буюу баруун ирмэг шугам

Заримдаа CSS арга зам нь төвийн тэгш байхыг шаарддаггүй, гэхдээ энэ нь дараагийн хоёр блок, зүүн талаас нэг нь, бусад тавих шаардлагатай юм - баруун хойш. Учир нь энэ нь х ° в ° эд хөрөнгө, гурван утгуудын нэгийг нь авах боломжтой байдаг: зөв, эсвэл хэн нь ч явсан. нь та зэрэгцэн байрласан байх ёстой хоёр блок байна гэж үзье. Дараа нь код нь дараах байдалтай байна:

• .Зүүн талд {° в ° гч: орхиж гарсан бол;}
• .Зөв {° в ° гч: баруун}

Гурав дахь блок, эхний хоёр блок (жишээ нь, Footer) доор байрлах ёстой байдаг бол энэ нь тодорхой онцлогийг бүртгүүлэх шаардлагатай байдаг:

• .Зүүн талд {° в ° гч: орхиж гарсан бол;}
• .Зөв {° в ° гч: баруун}
• Footer {тодорхой: аль аль нь}

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

босоо шугам

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

• дээд хилийн шугам - .child {босоо хамтад нь: дээд};
• төвтэй - .child {босоо хамтад нь: дунд};
• доод ирмэг шугам - .child {босоо хамтад нь: доод};

блок элементийн үед аудио текст нь тэгшлэх, эсвэл босоо тэгшлэх хамаарахгүй.

зэрэгцүүлсэн нэгжтэй болох асуудал

Заримдаа бага зэрэг асуудалтай үүсгэж болох CSS-арга төв уялдуулах DIV. Жишээ нь, х ° в ° хэрэглэх үед: .Эхлээд .Дараа болон .Гуравдугаарт: Жишээ нь, тэнд гурван блок байна. Хоёр дахь, гурав дахь блок анх худлаа. ангид элемент хоёр дахь зүүн нийцэж, сүүлийн блок - баруун талд. нийцүүлэх дараа хоёр урсгалаас буурсан байна. эцэг, эх, элемент тодорхойлж чадахгүй бол өндөр (жишээ нь, 30em), энэ салбар нэгжийн өндөр сунган болих болно. тусгай нэгж, .Хоёрдугаарт болон .Гуравдугаарт харав - Энэ алдааг зайлсхийхийн тулд "жийргэвч" ашиглаж байна. CSS-код:

• .Хоёрдугаарт {х ° в °: Зүүн}
• .Гуравдугаарт {° в ° гч: баруун}
• .clearfix {өндөр: 0; тодорхой: аль аль нь;}

псевдо ихэвчлэн хэрэглэгддэг: дараа нь бас psevdorasporki бий болгох замаар блок газар уруу буцах боломж олгоно (ангилалд DIV Жишээ нь савны дотор оршдог бөгөөд .Эхлээд .Зүүн талд болон .Зөв бүрдэнэ):

• .Зүүн талд {° в ° гч: Зүүн}
• .Зөв {° в ° гч: баруун}
• .container: {агуулга дараа: ''; дэлгэц: хүснэгт; тодорхой: аль аль нь;}

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

Өөр нэг асуудал байнга тулгарч зохион байгуулалт - шугам блок элементийн уялдуулах. Тэдний тус бүрийн дараа нь зай автоматаар нэмж байна. Бариул энэ нь барьцаа хөрөнгө, сөрөг догол тодорхойлогддог тусалдаг. бусад арга зам, бага байнга хэрэглэдэг жишээ нь, анхны байдалд нь оруулж байна үсгийн хэмжээ. Энэ тохиолдолд эцэг эх элементийн шинж чанар бүртгэж үсгийн-хэмжээг: 0. Текстийн блок дотор байрладаг бол, шугам блок элементийн шинж чанар хүссэн үсгийн хэмжээ буцаж байна. Жишээ нь, үсгийн хэмжээ: 1em. арга нь үргэлж тохиромжтой биш юм, тийм болохоор энэ нь илүү түгээмэл гадаад ашгийн хамт хувилбарыг ашиглаж байна.

жижиг нь газар дээр нь ерөнхий зохион байгуулалт, зохион байгуулалт болон дэлгүүрт бараа байршил, гэрэл зураг: Blocks нийцүүлэх Та үзэсгэлэнтэй, үйл ажиллагааны хуудсыг үүсгэх боломжийг олгоно.