CSS хөвөгч: тодорхойлолт, шинж чанар

Float - Хэл үндсэн чиг үүрэг нэг CSS (Cascading Style Sheets байна - загварчлах, давхардлын). 1996 оноос хойш энэ хэлний байсан бөгөөд одоо ч гэсэн хувьсан өөрчлөгдөж байна. Одоогийн байдлаар, хөгжүүлэгчид нь CSS гурав дахь хувилбарыг хэрэглэж байна. CSS програмчлалын хэл нь та JavaScript ашиглаж болохгүй байсан ч гэсэн, хэрэглэгчийн хувьд хуучирсан, эсвэл эвгүй гарч ирэхгүй бол сайхан, тааламжтай сайтыг бий болгох боломжтой юм. зөвшөөрөл гурав дахь хувилбар нь орчин үеийн боломж.

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

CSS хөвөгч - энэ нь яагаад хэрэгтэй вэ?

Float - эд хөрөнгийг байр суурь элемент юм. Өдөр бүр, энэ нь зураг, текст, маш цэвэрхэн бөгөөд тэднийг эргэн орчим ороодог харж, сонин, сэтгүүлийн хуудсан дээр харж болно. и CSS при использовании функции Float должно произойти то же самое. Хөвөгч функцийг ашиглан ижил болох ёстой өөр HTML болон CSS код ертөнцөд. Гэхдээ энэ зураг засварлах нь үргэлж энэ функцийн үндсэн зорилго биш гэдгийг санаж үнэ цэнэтэй юм. Энэ нь хоёр, гурав, дөрвөн багана сайтын элементийн алдартай байршлыг үүсгэхийн тулд ашиглаж болно. Үнэн хэрэгтээ, хөвөгч CSS үл хөдлөх хөрөнгийн бараг ямар ч HTML-элемент ашигладаг. байршил элементүүдийг хөвөгч функцийг ашиглан сайтын аль загварыг бий болгох, эд хөрөнгө засварлаж, дараа нь үндсийг мэдэх нь хэцүү биш байх болно.

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

эд хөрөнгийг CSS хөвөгч тодорхойлолт

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

Бид үл хөдлөх хөрөнгийн дөрвөн утгуудыг байна Float:

• Float: өвлөн авах;
• Float: эрх;
• Float: Зүүн;
• Float: Байхгүй;

Англи хэл мэддэг хүмүүсийн хувьд, параметр утга үл хөдлөх хөрөнгийн тодорхой байх ёстой Float. Харин мэдэхгүй байгаа хүмүүст та жаахан тайлбар авчирч чадна. Үзүүлэлт: Зүүн; Энэ нь эцэг, эх элементийн хамгийн эрс тэс зүүн буланд элемент биеийг хөдөлгөдөг. ижил зүйл (зөвхөн бусад арга замыг) тохиолдвол bcgjkmpjdfybb параметр: эрх; . Утга: өвлөн авах; Эцэг эхийн адил тохиргоог үзэх нь элемент тушаадаг. Ийм элементүүд нь тэд эцэг, эх, HTML-д код дотор шууд байрлаж байгаа болохоор, одоо ч хүүхэд гэж нэрлэдэг. A үл хөдлөх хөрөнгийн: Байхгүй; Энэ элемент нь баримт бичиг, кодын бүх хэсэгт хувьд анхдагчаар тогтоосон байдаг ердийн урсгалыг саад байх нь олгодог.

Хэрхэн ажил Float вэ?

° в ° гч CSS өмч нь маш зүгээр л ажилладаг. Дээр дурдсан байна гэж мэдээлэл, олон хүндрэлгүйгээр хийж болно. Үүний дараа бүх зүйл шиг хялбар байх болно. Гэхдээ би хөвөгч шинж чанарыг судлах үргэлжлүүлэн өмнө онол руу бага зэрэг харагдах нь зүйтэй. Бүр вэб сайт блок элемент юм. Энэ нь дарж Ctrl + Shift + J. текст, гарчиг, дүрс, холбоосууд өөр Google Chrome-д консол нээж харж хялбар бөгөөд сайтын бусад бүх бүрэлдэхүүн хэсэг блок, зүгээр л өөр өөр хэмжээтэй харуулагдах болно. Эхлээд эдгээр бүх блок бие биенээ дагаж байна. Доорх жишээнд үзүүлснээр, код мөр нэгэн нэгийнхээ араас явж, тэд бөгөөд өөр ард нэг болох нь харагдаж байна.

Энэ нь хэвийн урсгал (хэвийн урсгал) гэж нэрлэдэг. Ийм блок бүх босоо (elements нэвтрэх ямар байгууллага) бие биенээ дотор унах үед. Эхлээд вэб хуудас энэ замаар байрлах бүх агуулга. Гэсэн хэдий ч, ашиглах үед, жишээ нь, CSS-ийн шинж чанар Зүүн хэл элемент зүүн талд хуудас болон нүүдлийн дээр байгалийн байр сууриа орхидог Float. Энэ зан нь хэвийн явцад үлдсэн тэдгээр элементүүд нь зайлшгүй мөргөлдөх хүргэдэг.

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

асуудлыг шийдэхийн тулд тодорхой үйл ажиллагаа

Тодорхой - Бид зүрхийг бүрийн боломжуудтай Float. Тэд хамтдаа - ус асгах байна. Аль аль нь эдгээр онцлог хавсаргыг өөр хоорондоо болон Ид шид, The хөгжүүлэгч аз жаргалтай. Дээр дурьдсанчлан, хөрш зэргэлдээ эсүүд нь хэвийн үйл ажиллагааны явцад гарч явж, мөн хөвөгч эд хөрөнгийг ашиглаж байсан нь элемент (жишээ нь, CSS хөвөгч топ) зэрэг "хөвөх" гэж эхэлдэг. Үүний үр дүнд, оронд нь хөвөгч элементийн тэд хөгжүүлэгч зохион байгуулах зорилготой газарт хоёр авдаг биш, харин. Энэ агшнаас л бүх асуудлыг эхэлж байна.

Цэвэр үед функц нь таван утгуудыг байна:

• : Зүүн;
• : Эрх;
• : Аль аль нь;
• : Өвлөн;
• аль нь ч,

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

° в ° гч ашиглах багана бий болгох

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

Одоо бид энд юу бичигдсэн ойлгох хэрэгтэй. нь HTML-код гол хэсэг нь контейнер (савыг) гэж нэрлэдэг бөгөөд эцэг, эх, элемент. Энэ нь та элементүүдийг өөр өөр чиглэлд тараах нь хөвөгч функц хэрэглэж байгаа урьдчилан сэргийлэх боломжийг олгодог. энэ нь тийм биш байсан бол, дараа нь эдгээр элементүүд нь браузер хил хүртэл хөвж байна.

Дараа нь, мөн кодыг #content #navigation явж байна. Эдгээр элементүүд нь хөвөгч функцийг ашиглаж байна. зүүн болон баруун илгээсэн #content #navigation юм. Энэ нь хоёр баганатай сайтыг бий болгох шаардлагатай байна. , Өргөн нь зааж өгөх бөгөөд ингэснээр объект өөр хоорондоо давхцаж байхгүй бол мартуузай. Та өргөн болон хувь зааж өгч болно. Тиймээс цэгээр илүү тав тухтай. Жишээ нь, 45% ба #navigation нь #content, 10%, үлдсэн 45% үл хөдлөх хөрөнгийн түвшинг өгөх.

Тодорхой, #footer байгаа, өмч Footer #navigation болон #content дагаж биш, харин тэр байсан нэг газар нь үлдээдэг. Юу болох вэ? Хэрэв та тодорхой эд хөрөнгийг зааж өгөхгүй юм бол? Энэ код нь #footer нь зүгээр л явж, #navigation дор байх болно. Энэ нь #navigation хангалттай зай нэгээс илүү элементийг байрлуулах гэдгийг тохиолддог. Энэ жишээ жишээн дээр тодорхой шинж Float, бие биенээ нөхөн гүйцээдэг хэрхэн тодорхой харагдаж байна.

код бичиж байхдаа та асуудалтай тулгарч болох

Дээрх жишээ нь энгийн юм. Гэвч тэдний асуудал үүсгэж болох юм. Ер нь, үнэн хэрэгтээ, гэнэтийн асуудал маш олон үйл ажиллагааг Float тохиолдож болно. Ямар ч хичнээн хачин, гэхдээ асуудал нь ихэвчлэн HTML-код нь CSS нь гарч байна, бас. байрлал нь HTML-код хөвөх чиг үүрэг бүхий элемент нь шууд эцсийн ажил нөлөөлдөг. байр суурь элемент нь анх код үйл ажиллагааг Float - бэрхшээлийн төрөл бүрийн зайлсхийхийн тулд, энэ нь энгийн дүрмийг мод хамгийн сайн арга юм. Бараг л үргэлж ажилладаг, тэдний гэнэтийн зан багасгах.

элементийн мөргөлдөөн

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

Улмаас олон тоо баримт нь эдгээр элемент нь анх онд The хэвийн явц, дараа нь энэ нь эвдэрсэн хөвөгч эд хөрөнгийн хөтөч лааз шилжүүл тэднээс The сайт. Биш харин шийдэл нь энгийн, тодорхой, учир нь цөхрөл хийх - Cear эд хөрөнгийг ашиглаж байна. Энэ нь асуудлын гарах арга замыг бүгд нь тодорхой хэрэглэх нь хамгийн үр дүнтэй байдаг боломжтой юм.

Харин вэб хуудсанд элементүүдийн мөргөлдөх асуудал өөр замаар шийдвэрлэж болно. хамгийн багадаа хоёр арга байдаг:

• үйл ашиглах тушаал;
• програм Flexbox.

Албан тушаал үйл ажиллагаа нь ихэвчлэн CSS Float нь сайн хувилбар юм. програм Албан тушаал гарсан тохиолдолд вэб хуудасны төвд дүрсийг байрлуулах нь хамгийн сайн арга юм. Хэрвээ зөв хэрэглээний утга нь: үнэмлэхүй ба: хамаатан садан, The элементүүд нь намар руу газар, хүсэл бус давхцал бие биенээ.

Албан тушаал шинжилгээ ба хөвөгч үйл ажиллагаа код

и CSS Float заменить на Position. Энэ нь албан тушаал солигдсон HTML-д зам болон CSS Float илүү шийдвэрлэх ёстой. Үнэн хэрэгтээ энэ нь маш энгийн юм. -ын элемент #container болон #div байна гэж үзье.

#container {

өргөн: 40%;

° в ° гч: Зүүн;

маржин: 10px;

}

#div {

өргөн: 40%;

° в ° гч: эрх;

маржин: 10px;

}

#footer {

тодорхой: аль аль нь;

}

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

Тэгэхээр та яаж CSS өөрчилж Postion ашиглах кодыг Float байна вэ? Маш энгийн:

#container {

өргөн: 40%;

Албан тушаал: харьцангуй;

маржин: 10px;

}

#div {

өргөн: 40%;

Албан тушаал: харьцангуй;

маржин: 10px;

}

бөгөөд энэ тохиолдолд #container #div онд эцэг, эх, элемент дэх хөгжүүлэгчид шаардлагатай албан тушаал авна. Хамгийн гол нь? #div тавьж, нэг эцэг, эх, элемент, тэдгээрийн хэмжээ тохирох юм #container.

Flexbox - энэ функц нь CSS ° в ° гч солих вэ?

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

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

Flexbox яаж вэ?

Энэ технологи нь амархан хэвтээ болон босоо элементүүдийг уялдуулах хөгжүүлэгч тусалдаг. Flexbox мөн чиглэл, дэлгэцийн элементүүдийн дарааллыг өөрчилж болно. Үндсэн тэнхлэг болон хөндлөн тэнхлэг, бүх Flexbox барьсан бөгөөд эргэн тойрон нь: Энэ технологи нь хоёр тэнхлэг байдаг. Энэ нь мөн нөлөө ° в ° гч, тодорхой чиг үүргийг устгана. Тэрээр хууль, түүний эд хөрөнгөд өвөрмөц ашигладаг өөрийн системийг барьж, тийм болохоор харамсалтай нь, эсэд хуулбарлах чадахгүй байх зэрэг Float, албан тушаал зэрэг бусад шинж чанар. Мөн энэ нь дээр дурдсан шиг, Flexbox зөвхөн хөтчүүд шинэ хувилбарууд ажилладаг, учир нь маш хялбар байх болно.

Энэ нь эцсийн албан тушаал, Flexbox Float тэр санаж ижил зүйлийг хийх нь зүйтэй юм - Таны сайтын ер бусын, эх загварыг бий. өгүүллээр хувилбар бүр өөрийн замаар үүнийг хийдэг учраас, давуу болон сул талтай. Үүнээс гадна, энэ нь хаа нэгтээ төгс хөвөгч функц нь (жишээ нь, энгийн бүтэц бүхий талбай дээр), гэхдээ хаа нэгтээ илүү албан тушаал, эсхүл Flexbox ашиглах гэж гардаг.

Давхар Маржийн Алдааны

Гэсэн хэдий ч, зарим тохиолдолд, харамсалтай нь, бүх хөгжүүлэгч асуудал үгүй биш бичигдсэн кодоос, алдаанууд болон зарим вэб хөтчийн тодорхой хэлбэрээр үүсдэг. Жишээ нь, Internet Explorer-д, тэнд алдаа, хоёр хязгаарын Алдаа гэж нэрлэдэг юм. Тэр хөтөч хилийн сайтын элементийн нүүлгэн үр дүнд нь хоёр хязгаарын параметрийг ихсэнэ. Үүнээс сэргийлэхийн тулд, энэ параметр хязгаарын эзлэх хувь харуулж хангалттай байдаг. Ихэвчлэн үед энэ алдаа гардаг у ба шинж чанар Маржийн хөвөгч цэгийн утга.

#div {

° в ° гч: Зүүн;

маржин зүүн: 10px;

}

Энэ код нь Internet Explorer нь 20 PX зүүн элементийг шилжих болно. Та кодыг дараах байдлаар өөрчилж болно:

#div {

° в ° гч: Зүүн;

маржин зүүн: 10%;

}

орчмыг

#div {

° в ° гч: Зүүн;

маржин баруун: 10px;

}

Эдгээр сонголтуудын аль аль нь шилжилт элементийн асуудлыг шийдэж болно.

Алдаанууд хөтөч болон буруу дэлгэцийн сайт

алдаа гарч болох цорын ганц вэб хөтөч биш байна - Энэ нь Internet Explorer гэдгийг санаж байх нь зүйтэй юм. Google Chrome болон Mozilla-н хуучин хувилбарууд нь буруу орчин үеийн вэб сайт зарим нэг элементүүдийг харуулах. Эдгээр засварууд бүрийн хувьд, та шийдлийг олж болно. Ер нь, бид Float хэрэглээ эх, сэтгэл татам вэб дизайн үүсгэх болно гэдгийг анхаарна уу. Энэ эд хөрөнгийн үндсийг болон зарчмуудыг ойлгох нь алдаа зайлсхийж, амьдралаа ямар ч хөгжүүлэгч хялбар болгох туслах болно.