Unaozingatia: CSS-layout

Wakati mpangilio wa ukurasa ni mara nyingi muhimu ya kufanya katikati CSS njia: kwa mfano, na kituo kitengo kuu. Kuna ufumbuzi kadhaa tatizo hili, ambayo kila mmoja itakuwa mapema au baadaye kutumia coder yoyote.

Align Nakala ya katikati

Mara nyingi kwa ajili ya mapambo unataka kuweka maandishi unaozingatia, CSS katika kesi hii, kwa kupunguza muda wa kuanzishwa. Hapo awali hili lilifanyika kwa kutumia HTML-sifa, lakini sasa kiwango required align maandishi na karatasi style. Tofauti na kuzuia ambayo unataka kubadilisha padding nje katika CSS alignment Nakala katikati imeundwa na mstari moja:

• text-align: center;

Mali hii hurithiwa na kupitishwa kutoka kwa mzazi kwa watoto wote. Unaathiri si tu maandishi lakini pia mambo mengine. Kwa kusudi hili, lazima herufi ndogo (kwa mfano, span) au mstari-block (vitalu yoyote ambayo bayana kuonyesha mali: block). chaguo la mwisho pia inaruhusu wewe kubadili upana na urefu wa kipengele, zaidi rahisi usanidi wa indentation.

kurasa mara nyingi align sifa kwake tag. Hii mara moja inafanya msimbo batili, kwa kuwa W3C alikubali align sifa umepitwa na wakati. Kwa kutumia kwenye ukurasa haifai.

unaozingatia kuzuia

Kama unataka kuweka alignment ya div katikati, CSS inaweza kutoa njia kabisa starehe na: matumizi ya nje padding kiasi. Padding inaweza maalum kama mambo kuzuia, na line-ya kuzuia. Svoysva thamani lazima 0 (wima padding), na auto (moja kwa moja indentation sambamba):

• margin: 0 auto;

Sasa chaguo hili kutambuliwa kama halali kabisa. Kwa kutumia padding nje pia inaruhusu wewe kuweka alignment wa kituo: CSS-margin mali inaturuhusu kutatua matatizo mengi yanayohusiana na nafasi ya kipengele katika ukurasa.

Alignment ya kushoto au kulia makali ya kuzuia

Wakati mwingine CSS njia hauhitaji alignment ya katikati, lakini ni muhimu kuweka ya vitalu mbili, moja kutoka upande wa kushoto na mwingine - kutoka kulia. Kwa hili kuna kuelea mali, ambayo inaweza kuchukua moja ya thamani tatu: kushoto, kulia au hakuna. Tuseme una maeneo mawili yanayopaswa kuwekwa upande kwa upande. Kisha code ni kama ifuatavyo:

• .left {kuelea: kushoto;}
• .right {kuelea: kulia}

Kama kuna block ya tatu, ambao lazima iko chini ya vitalu mbili za kwanza (kwa mfano, footer), basi ni muhimu kusajili kipengele wazi:

• .left {kuelea: kushoto;}
• .right {kuelea: kulia}
• footer {wazi: zote mbili}

ukweli kwamba vitalu na madarasa ya kuanguka kushoto na kulia nje ya mtiririko jumla, ambayo ni, mambo mengine yote kupuuzwa sana kuwepo kwa mambo iliyokaa. Mali wazi: zote mbili utapata footer kuzuia au yoyote inayoonekana nyingine kulisababishwa na mtiririko seli na inakataza wrap (kuelea) juu wote wa kushoto na kulia. Kwa hiyo, katika mfano wetu, footer ni makazi yao ya kushuka.

Mpangilio wima

Kuna maeneo ambapo kutosha kuweka alignment ya katikati ya CSS-njia, lazima pia kubadilisha nafasi wima ya kuzuia mtoto. Yoyote mstari au safu ya-block kipengele inaweza kuwa taabu dhidi ya makali ya juu au ya chini, iko katikati ya kipengele mzazi au wawe katika eneo kiholela. Mara nyingi zinahitaji alignment ya katikati ya kuzuia, inatumia wima-align sifa. Tuseme kuna vitalu mbili, moja Furushi ndani mmoja. Katika kitengo hiki ndani - safu-block kipengele (kuonyesha: inline-block). Ni muhimu align wima kuzuia mtoto:

• alignment ya mipaka ya juu - .child {wima-align: juu};
• unaozingatia - .child {wima-align: katikati};
• alignment ya makali ya chini - .child {wima-align: chini};

Wakati kuzuia mambo ya kusikiliza text-align, au wima-align haitumiki.

kutokea matatizo vitengo zimepangiliwa

Wakati mwingine div align kituo cha CSS njia inaweza kusababisha matatizo kidogo. Kwa mfano, wakati wa kutumia kuelea: kwa mfano, kuna vitalu tatu: .Kwanza, .second na .third. pili na tatu vitalu uongo kwanza. kipengele na darasa la pili kushoto iliyokaa, na kuzuia mwisho - upande wa kulia. Baada ya kuandaa mbili imeshuka kutoka mkondo. Kama kipengele mzazi si defined urefu (km 30em), itakuwa kusitisha wa kunyoosha urefu wa vitengo ndogo. Ili kuepuka hitilafu hii, kutumia "spacer" - kitengo maalum, ambayo anaona .second na .third. CSS-code:

• .second {kuelea: kushoto}
• .third {kuelea: kulia}
• .clearfix {urefu: 0; wazi: zote mbili;}

Pseudo mara nyingi hutumika: baada, ambayo pia inaruhusu kurudi vitalu katika nafasi kwa kujenga psevdorasporki (katika mfano katika div na darasa lipo ndani ya chombo na inajumuisha .left .Kwanza na .right):

• .left {kuelea: kushoto}
• .right {kuelea: kulia}
• .container: baada {maudhui: ''; kuonyesha: meza, wazi: zote mbili;}

juu ya chaguzi - ya kawaida, ingawa kuna baadhi ya tofauti. Daima unaweza kupata njia rahisi na rahisi zaidi ya kujenga psevdorasporki na majaribio.

Tatizo lingine mara nyingi walikutana mpangilio - mfungamano wa mstari-block vipengele. Baada ya kila mmoja wao nafasi huongezwa moja kwa moja. Kushughulikia inasaidia kiasi mali, ambayo inaelezwa na indentation hasi. Kuna njia nyingine, ambayo hutumiwa mara chache, kwa mfano, kuweka upya ukubwa wa herufi. Katika hali hii, mali ya kipengele mzazi madaftari font-size: 0. Kama iko ndani ya vifungu vya maandishi, mali ya mstari-block mambo ya kurudi kwa taka ukubwa wa herufi. Kwa mfano, font-size: 1em. Mbinu daima si rahisi, hivyo ni zaidi ya kawaida kutumika toleo kwa kishindo nje.

Kuandaa vitalu utapata kujenga kurasa nzuri na kazi: mpangilio wa jumla na layout, na mahali ya bidhaa katika maduka, na picha kwenye tovuti ya ndogo.