Santre: CSS-Layout

Lè Layout a nan paj la se souvan nesesè fè yon santre CSS-fason: pou egzanp, nan sant inite prensipal la. Gen solisyon plizyè nan pwoblèm sa a, chak nan yo ki pral pi bonè oswa pita gen yo sèvi ak nenpòt ki xslt.

Aliman tèks nan sant

Anpil fwa pou rezon dekoratif ou vle yo mete tèks la santre, CSS nan ka sa a, diminye tan an nan enpozisyon. Précédemment sa a te fè lè l sèvi avèk HTML-atribi, men kounye a estanda nan oblije fè aliman tèks la ak fèy la style. Nan contrast nan blòk la pou ki ou vle chanje padding la ekstèn nan aliyman CSS nan tèks nan mitan an se te fè ak yon sèl liy:

• tèks-aliman: sant;

Sa a se pwopriyete eritye li pase nan men paran nan tout timoun yo. Li afekte pa sèlman tèks la, men tou nan lòt eleman. Pou rezon sa a, yo ta dwe miniskil (egzanp, span) oswa ranje-blòk (nenpòt ki blòk ki presize pwopriyete ekspozisyon: blòk). Opsyon nan lèt tou pèmèt ou chanje lajè a ak wotè nan eleman an, plis fleksib konfigirasyon nan dekoupaj an.

paj souvan aliman atribi nan kè l 'tag a. Sa a imedyatman fè kòd la valab, depi W3C rekonèt aliman atribi demode. Lè l sèvi avèk l 'sou yon paj pa rekòmande.

santre blòk

Si ou vle yo mete aliyman an nan div la nan mitan an, CSS ka ofri byen yon fason konfòtab: itilize nan Marge padding ekstèn. ka ranbouraj dwe espesifye kòm eleman yo blòk, ak liy-blòk. valè Svoysva ta dwe 0 (vètikal padding), ak oto (otomatik dekoupaj orizontal):

• Marge: 0 oto;

Koulye a, se opsyon sa a rekonèt kòm absoliman ki valid. Lè l sèvi avèk kouvèti ekstèn te tou pèmèt ou mete aliyman an nan sant la: pwopriyete CSS-Marge pèmèt nou rezoud anpil pwoblèm ki asosye avèk eleman nan pwezante sou paj la.

Aliyman nan kwen gòch la oswa dwa nan blòk la

Pafwa CSS-fason pa mande pou aliyman nan sant la, men li se nesesè yo mete pwochen de blòk yo, yon sèl soti nan bò gòch, lòt la - soti nan bò dwat la. Pou sa a gen pwopriyete a flote, sa ki ka pran youn nan twa valè: agoch, adwat oswa anyen menm. Se pou nou di ou gen de blòk ki ou dwe mete yo kòt a kòt. Lè sa a, kòd la se jan sa a:

• .Left {flote: kite;}
• .Dwa {flote: dwa}

Si gen yon blòk twazyèm, ki dwe ki sitiye anba de premye blòk yo (egzanp, footer), Lè sa a, li nesesè yo enskri karakteristik klè:

• .Left {flote: kite;}
• .Dwa {flote: dwa}
• footer {klè: tou de}

Lefèt ke blòk yo ak klas yo nan kite la ak dwa tonbe soti nan koule nan total, ki se, se tout lòt eleman inyore egzistans la anpil nan eleman ki aliyen. Pwopriyete klè: tou de pèmèt blòk footer oswa nenpòt lòt vizib presipite soti nan selil yo koule e li entèdi vlope (flote) sou tou de bò gòch la ak dwa. Se poutèt sa, nan egzanp nou an, se footer a deplase anba.

vètikal aliyman

Gen ka kote pa ase yo mete aliyman an nan sant la nan CSS-fason yo, ou dwe chanje tou pozisyon an vètikal nan blòk la timoun. Ka Nenpòt liy oswa ranje-blòk eleman dwe bourade kont kwen an anwo oswa pi ba, ki chita nan mitan an nan eleman nan paran oswa dwe nan yon kote abitrè. Pi souvan mande pou aliyman nan sant la nan blòk la, li itilize vètikal-aliman atribi. Sipoze gen de blòk, youn enbrike nan lòt la. Nan ka sa inite andedan kay la - ranje-blòk eleman (ekspozisyon: aliye-blòk). Li nesesè fè aliman vètikal blòk timoun nan:

• aliyman nan fwontyè a anwo - .timoun {vètikal-aliman: tèt};
• santre - .Timoun {vètikal-aliman: presegondè};
• aliyman nan kwen an anba - .Timoun {vètikal-aliman: anba};

Nan eleman blòk odyo tèks-aliman, oswa vètikal-aliman pa aplike.

pwoblèm posib ak inite Alinye

Pafwa div fè aliman sant la nan CSS-fason a kapab lakòz yon ti kras pwoblèm. Pou egzanp, lè w ap itilize yon flote: pou egzanp, gen twa blòk: .premye, .dezyèm ak .twazyèm. Blòk yo dezyèm ak twazyèm kouche nan premye a. Yon eleman avèk yon klas dezyèm kite-aliyen, ak blòk ki sot pase a - sou bò dwat la. Apre aliyen de la tonbe soti nan kouran an. Si eleman nan paran se pa sa defini wotè (egzanp, 30em), li ap oblije sispann detire wotè a nan inite oksilyè. Pou evite erè sa a, sèvi ak "spacer a" - yon inite espesyal, ki wè .Dezyèmman ak .twazyèm. CSS-kòd:

• .dezyèm {flote: gòch}
• .twazyèm {flote: dwa}
• .clearfix {wotè: 0; klè: tou de;}

pseudo souvan itilize: apre, ki tou pèmèt yo retounen blòk yo nan plas pa kreye psevdorasporki (nan egzanp lan nan div a ak klas manti andedan veso a epi konprann yon .Left .Premye ak .Dwa):

• .Left {flote: gòch}
• .Dwa {flote: dwa}
• .Veso: apre {kontni: ''; ekspozisyon: tab; klè: tou de;}

Opsyon yo pi wo a - ki pi komen an, byenke gen kèk varyasyon. Ou ka toujou jwenn fason ki pi fasil ak pi pratik yo kreye psevdorasporki pa eksperyans.

Yon lòt pwoblèm souvan rankontre Layout - aliyman nan eleman liy-blòk. Apre chak nan yo se yon espas te ajoute otomatikman. Manch li te ede pwopriyete a Marge, ki se defini nan dekoupaj an negatif. Gen lòt fason, ki yo te itilize mwens souvan, pou egzanp, Reyajiste gwosè a font. Nan ka sa a, pwopriyete yo nan eleman nan paran anrejistre font-gwosè: 0. Si ki sitiye nan blòk nan tèks, pwopriyete yo nan eleman liy-blòk te retounen nan gwosè a vle font. Pou egzanp, font-gwosè: 1em. Metòd la se pa toujou pratik, kidonk li se pi plis souvan itilize vèsyon ak marges ekstèn.

Aliyen blòk pèmèt ou kreye paj bèl ak fonksyonèl: Layout la an jeneral ak layout, ak kote a nan machandiz nan boutik yo, ak foto sou sit la nan yon ti.