Meadhanaichte: CSS-dhealbhachd

Nuair cruth an duilleag S tric a dh'fheumar a dhèanamh stèidhichte CSS-slighe: mar eisimpleir, gu Ionad phrìomh aonad. Tha grunn fuasglaidhean gus an duilgheadas seo, gach fear de a bhios a 'Mhàiri Bhòidheach a bhith a' cleachdadh sam bith Coder.

Co-thaobhaich teacs ionaid

Gu math tric airson adhbharan sgeadaichte thu ag iarraidh a chur an teacs stèidhichte, CSS sa chùis seo, a 'lùghdachadh an àm a sparradh. Roimhe seo a dhèanamh a 'cleachdadh HTML-buadhan, ach a-nis an ìre a dh'fheumas a cho-thaobhadh an teacsa còmhla ris an stoidhle duilleag. Ann an coimeas ri an loga bacaidh airson a bheil thu airson atharrachadh taobh a-muigh padding CSS ann an co-thaobhadh de teacs anns a 'mheadhan a chaidh a dhèanamh le aon loidhne:

• Ur-thaobhadh: ionad;

Tha seo a dhìleab agus seachad bho phàrant gu chloinn uile. Tha e a 'toirt buaidh air nach eil ach an teacs ach cuideachd ri eileamaidean eile. Airson an adhbhair seo, bu chòir dhaibh a bhith lowercase (me, span) no sreath-bacaidh (blocaichean sam bith gun sònraich an taisbeanadh seilbh: bacaidh). Tha an dàrna roghainn cuideachd a 'toirt cothrom dhuibh atharrachadh leud is àirde an eileamaid, nas sùbailte rèiteachaidh na indentation.

buadha duilleagan tric a 'co-thaobhadh ris fhèin an taga. Tha seo a 'bhad a' dèanamh an còd mì-dhligheach, bho W3C 'gabhail ris a cho-thaobhadh buadha à bith. A bhith ga cleachdadh air an duilleag nach eil a 'moladh.

Meadhanaichte bacaidh

Ma tha thu ag iarraidh a chur an co-thaobhadh de na div anns a 'mheadhan, a' tabhann CSS math cofhurtail-slighe: a 'cleachdadh taobh a-muigh padding iomall. Padding Faodar an sònrachadh mar an loga bacaidh eileamaidean, agus loidhne-bacaidh. Svoysva luach a bu chòir a bhith 0 (dìreach padding), agus auto (fèin-ghluasadach indentation chòmhnard):

• OIR: 0 auto;

A-nis an roghainn seo air aithneachadh mar dìreach dligheach. Padding 'cleachdadh taobh a-muigh cuideachd a' leigeil leat a chur air an co-thaobhadh an ionaid: CSS-iomall-seilbh a 'toirt cothrom dhuinn a' fuasgladh mòran duilgheadasan co-cheangailte ri positioning eileamaid air an duilleag.

Co-thaobhadh de an taobh chlì no deas iomall an loga bacaidh a '

Uaireannan CSS-slighe Chan eil feum air co-thaobhadh an ionaid, ach tha e riatanach a chur an ath dà bhloca, aon bhon taobh chlì agus an taobh eile - bhon làimh dheis. Airson seo, tha an seòladh-seilbh, a 'gabhail fear de na trì luachan: chlì, ceart no gin. Nach can thu tha dà bhloca a bu chòir a bhith air an cur taobh ri taobh. An uair sin tha an còd air mar a leanas:

• .left {pùta: chlì;}
• .right {pùta: dheis}

Ma tha an treas bacaidh, a dh'fheumas a bhith suidhichte fo 'chiad dà bhloca (me, footer), an uair sin tha e riatanach gus clàradh soilleir feart:

• .left {pùta: chlì;}
• .right {pùta: dheis}
• footer {soilleir: an dà chuid}

Tha an fhìrinn gu bheil na blocaichean le na clasaichean de deas is clì a thuit a-mach às an àireamh iomlan sruth, 'se sin, a h-uile eileamaidean eile a leigeil seachad fìor bith de eileamaidean a rèir a chèile. Seilbh soilleir: an dà chuid a 'leigeil footer no bacaidh sam bith eile ri fhaicinn bho precipitated an t-sruth agus a' cur bacadh ceallan Wrap (seòladh) air an dà chuid an taobh chlì agus an taobh dheas. Uime sin, ann ar n-eisimpleir, tha an footer fhuadachadh sìos.

dìreach co-thaobhadh

Tha cùisean far nach eil gu leòr a chur air co-thaobhadh am meadhan na CSS-dòighean, feumaidh tu cuideachd atharrachadh dìreach an suidheachadh a 'phàiste bacaidh. Sam bith air an loidhne no an t-sreath-bacaidh eileamaid faodar bruthadh an aghaidh na h-àrd no an oir ìosal, suidhichte ann am meadhan na pàrant no eileamaid ann a bhith neo-àite. As tric a 'co-thaobhadh feum air meadhan an togalaich, tha e a' cleachdadh dhìreach-thaobhadh buadha. Creidsinn a tha dà bhloca, aon a 'neadachadh taobh a-staigh eile. Anns an aonad a-staigh - sreath-bacaidh eileamaid (a taisbeanadh: inline-bacaidh). Tha e riatanach gu thaobhadh dhìreach an loga bacaidh a 'phàiste:

• co-thaobhadh de na h-àrd chrìoch - .child {dhìreach-thaobhadh: top};
• stèidhichte - .child {dhìreach-thaobhadh: meadhan};
• co-thaobhadh bonn oir - .child {dhìreach-thaobhadh:-ìosal};

Aig an loga bacaidh eileamaidean èisteachd Ur-thaobhadh, no bheartaigeal-thaobhadh Chan eil a 'buntainn.

Comasach air a bhith na duilgheadasan co-thaobhadh le aonadan

Uaireannan div a cho-thaobhadh am meadhan na CSS-slighe urrainn adhbharachadh beagan trioblaid. Mar eisimpleir, nuair a 'cleachdadh an seòladh: mar eisimpleir, tha trì blocaichean: .first, .second agus .third. Tha an dàrna agus an treas blocaichean luidhe anns an toiseach. An eileamaid le clas dàrna dh'fhàg-thaobhadh, agus mu dheireadh an loga bacaidh - air an làimh dheis. Às dèidh an co-fhreagairt an dà thuit bhon allt. Ma tha na pàrantan nach eil eileamaid a mhìneachadh àirde (eg, 30em), bidh e sgur a shìneadh àirde fo-aonadan. Airson sheachnadh mhearachd seo, cleachd an "spacer" - aonad sònraichte, a tha a 'faicinn .second agus .third. CSS-code:

• .second {bhog:} taobh chlì
• .third {pùta: dheis}
• .clearfix {àirde: 0; soilleir: an dà chuid;}

fuadain tric air a chleachdadh: an dèidh sin, a tha cuideachd a 'toirt cothrom tilleadh na blocaichean ann an àite le bhith a' cruthachadh psevdorasporki (ann an eisimpleir ann an div le clas laighe am broinn na container agus gabhail a-steach .first .left agus .right):

• .left {pùta:} taobh chlì
• .right {pùta: dheis}
• .container: dèidh {susbaint: '' '; taisbeanadh: an clàr; soilleir: an dà chuid;}

Tha na roghainnean gu h-àrd - a 'chuid as cumanta, ged a tha beagan eadar-dhealaichte. 'S urrainn dhut an-còmhnaidh a' lorg an dòigh as fhasa agus as goireasaiche a chruthachadh psevdorasporki le deuchainnean.

Trioblaid eile tric a thachair cruth - co-thaobhadh de loidhne-bacaidh eileamaidean. An dèidh gach àite a chur ris gu fèin-obrachail. Handle e a 'cuideachadh an iomall an seilbh, a tha air a mhìneachadh le àicheil indentation. Tha dòighean eile ann, a tha air an cleachdadh cho tric, mar eisimpleir, ath-shuidheachadh an cruth-clò meud. Anns a 'chùis seo, feartan pàrant eileamaid chlàras font-size: 0. Ma tha suidhichte taobh a-staigh blocaichean de theacsa, feartan loidhne-bacaidh eileamaidean air tilleadh a miannaichte font meud. Mar eisimpleir, font-size: 1em. Tha an dòigh nach eil an-còmhnaidh freagarrach, mar sin tha e fada nas cumanta a chleachdadh taobh a-muigh le dreach oirean.

Thaobhadh Blocks leigeas leat a chruthachadh àlainn agus Gnìomhachail duilleagan: coitcheann cumadh agus cruth, agus an location bathair anns na bùthan, agus dealbhan air làrach beag.