Мундариҷа
Ин нисфи шаб аст, ва он яке див дар сайти шумо то ҳол ба сандуқчаи бозичаи кӯдак монанд аст. Ҳама унсурҳо як бесарусомонӣ мебошанд ва ҳар вақте, ки шумо бо CSS бозӣ мекунед намоиш додан моликият, онҳо худро ба як чизи тамоман мухталифи сафсата табдил медиҳанд.
Агар шумо ба ман монанд бошед, эҳтимолан шумо инро бо ғур-ғур кардани худ ҳал карда, бо клавиатураи худ доимо хашмгинтар мешавед. Ва гарчанде ки ин стратегия қаблан барои ман кор карда буд, ман ба наздикӣ роҳ ёфтам, то роҳи беҳтарини фаҳмидани намоиш додан амвол.
Он рӯй медиҳад, ки асосҳои намоиш додан назар ба оне ки ман дар аввал гумон карда будам, хеле соддатаранд. Дар асл, онҳо ҳамон принсипҳоеро истифода мебаранд, ки бастабандӣ кардани ҷомадон доранд. Ман мехоҳам фаро гирам намоиш: блок, inline-block ва дар мувофиқат. Агар шумо пештар як ҷомадонро бо тартиби муқаррар карда бошед, шумо параллелро мебинед. Агар шумо як шахсе бошед, ки тамоми либоси шуморо ба тарзи бесарусомонӣ рам мезанед - хуб, ман танҳо барои шумо он қадар зиёд кор карда метавонам.
Чомадони мо се намуди либосро дар бар мегирад:
- Нозукҳо, ба монанди ҷомаи гиребон
- Ҷомаҳое, ки метавонанд ғелонда шаванд
- Ҷӯробҳо ё либоси таг, ки онҳоро ба шикофҳо пур кардан мумкин аст
Барои маълумот, агар мо ҷомадонро дар HTML моделсозӣ мекардем, чунин менамуд:
div class = 'chamomad'> div class = 'nozik'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'пайпок'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Ашёи нозук дар боло
Намоиш: блок бо нобаёнӣ барои аксари элементҳои HTML мебошад. Ин маънои онро дорад, ки элемент тамоми фазои уфуқиро дар зарфи худ ишғол мекунад див. Агар он дар паҳлӯи дигар унсурҳои хоҳар бошад, он сатри навро оғоз мекунад ва дигар элементҳоро дар хатти он иҷозат намедиҳад. Он ба ашёи нозуке, ки шумо дар болои ҷомадон гузоштаед, монанд аст. Инҳо мақолаҳои нозук ё оқиланд, ба монанди куртаҳои гиребон. Шумо намехоҳед, ки онҳо чиндор шаванд, бинобар ин шумо боварӣ ҳосил кунед, ки онҳо ба дигар либосҳо тела дода нашудаанд.
Ин яке аз қисмҳои сахттарини намоиш: блок. Аҳамият диҳед, ки чӣ тавр ҷомаи гиребон тамоми паҳлӯи ҷомадонро ишғол намекунад? Ин маънои онро надорад, ки ашёи дигар ба сатҳи худ ҷаҳида хоҳад рафт. Биёед бигӯем, ки ин курта 60 фоизи паҳнои ҷомадон аст; он ҳанӯз ҳам унсурҳои дигарро дар сатҳи боло ҳамроҳ карда метавонад.
Ин аст, ки чаро дар расм марзи норинҷӣ мавҷуд аст. A намоиш: блок унсур ба таври худкор маржа дар атрофи худ илова мекунад, агар он тамоми фазои уфуқиро ишғол накунад.
Майкаҳои бодиққат бастабандишуда
Қисми зиёди ҷомадонҳои шумо шояд аз либосҳои боқимондаи сафари шумо пур бошад. Барои соддагӣ, мо инро танҳо ба футболкаҳо буриданӣ ҳастем. Дар интернет баҳси калон дар бораи он аст, ки болопӯш ё ғалтак самараноктар аст. Ман як навъ шахсе ҳастам.
Ба ҳар ҳол, шумо барои мувофиқат кардани чизҳои бештар, шумо футболкаҳоятонро паҳлӯ ба паҳлӯ саф мезанед. Ин маҳз ҳамон чизест намоиш: inline-block барои он пешбинӣ шудааст. Ин унсурҳо метавонанд дар як сатр дар паҳлӯи якдигар нишинанд, инчунин дар паҳлӯи он намоиш: inline унсурҳо.
Баръакс намоиш: inline унсурҳо, як inline-block унсур ба сатри оянда мегузарад, агар ба таркиби он мувофиқат накунад див дар қатори дигар inline-block унсурҳо. Барои он ки футболка ба қатори навбатӣ рехта шавад, шумо бояд онро нимта карда, нисфи боқимондаро барои оғози қатори нав истифода баред. Inline-block унсурҳо иҷозат дода намешаванд, ки агар ба хат мувофиқат накунанд, ба нисф тақсим карда шаванд.
Ҷуробҳое, ки камбудиҳоро пур мекунанд
HTML аслиро санҷед ва шумо қайд мекунед, ки як ҷӯроб ҳаст див> байни ҳашт футболка. Аммо ба намуди уфуқии ҷомадон дар тарафи рост нигаред. Агар як ҷӯроб бошад див>, чӣ гуна он метавонад сатри миёнаро ба поён расонад ва сатри поёнро сар кунад? Ин аст ҳадафи намоиш: inline!
Ан дар мувофиқат унсур ба сатри оянда мерезад, агар он аз паҳнои див (бо ин роҳ аз он фарқ мекунад inline-block ё блок). Азбаски ҷӯробҳои мо див пур аз ҷӯробҳое мебошад, ки бетартибӣ ба холигӣҳо пур карда шудаанд, он метавонад ба осонӣ ба пур кардани холигии тарафи рости қатори миёна шурӯъ кунад ва барои сар кардани сатри поён мерезад.
Барои ба амал омадани ин, ҳеҷ ҷӯробро нисфӣ буридан лозим нест. Ин аст, ки чаро онҳо метавонанд дар мувофиқат, дар ҳоле ки футболкаҳо танҳо метавонанд бошанд inline-block. Агар футболбозони қатори миёна танҳо 60 фоизи паҳноро гирифта бошанд, ҷӯробҳо див> барои боло бурдани тамоми фазои боқимондаи сатр боло ҳаракат мекард.
Роҳи Сафед
Ин CSS ниҳоии ҷомадони мо аст:
.delicate {намоиш: блок; паҳнӣ: 60%; } .tshirt {намоиш: inline-блок; паҳнӣ: 20%; } .socks {display: inline; }
Инҳоянд якчанд сенарияи алтернативӣ барои нишон додани истифодаи гуногуни намоиш. Агар деликатесҳо дар боло доштанд намоиш: inline-block, онҳо дар баробари футболкаҳо рост меистоданд. Баъзе футболкаҳо то сатри боло ҳаракат мекарданд ва боқимонда мувофиқан танзим мешуданд. Дар чап ва рости ҷомаи гиребон ягон буферии бароҳат набуд.
Агар ҳар як футболка медошт блок-намоиш, шумо як стеки азими футболкаҳо дар болои ҳамдигар доред, ҳар як сатр. Агар ҷӯроб мебуд намоиш: inline-block, онҳо ҳама дар қатори поён менишастанд, на дар байни ду қатор. Баъзе футболкаҳоро ба қатори дигар тела дода, хатти чорумро ташкил медиҳанд. Дар тарафи рости қатори миёнаи футболкаҳо холигӣ пайдо мешуд.
Бо усули дар ин ҷо овардашуда, мо бо ҷомадони бодиққат печондашуда, ки аз фазои мавҷуда беҳтарин истифода мебарем, хотима меёбад.
Ин мақола дар аввал пайдо шудааст маҷаллаи тор нашри 289; онро дар ин ҷо харед!
