Sëtz: CSS-Layout

Wann de Layout vun der Säit oft néideg ass e Sëtz CSS-Manéier ze maachen: zum Beispill, den Haaptgrond Eenheet ze Zentrum. Et gi verschidde Léisunge fir dëse Problem, all vun deem desto gëtt oder spéider all ewech benotze muss.

Fir Text ze Zentrum

Oft fir dekorativen Zwecker wëllt dir den Text ze setzen Sëtz, CSS an dësem Fall, der Zäit vun Geldboussen ze reduzéieren. Virdru war dat HTML-Attributer benotzt gemaach, mä elo d'Norm néideg den Text mat der Stil Blat, fir. Am Géigesaz zu der Spär fir déi Dir d'externen padding an CSS Formatioun vun Text an der Mëtt mat engem eenzege Linn ass gemaach ze änneren wëllen:

• Text-fir: Zentrum;

Dëse Besëtz ass ierflecher an aus Elterendeel un all Kanner huet. Et gëllt net nëmmen den Text awer och zu aneren Elementer. Fir dës Zweck, sollen se geschriwen (zB, span) oder hannertenee-Spär (all spären datt Haaptsäit Propriétéit uginn: Spär) ginn. De Fonds Optioun kënnt Dir och d'Breed an d'Héicht vun der Element ze änneren, méi flexibel Configuratioun vun der Arécken.

Säiten fir oft Spezialfäegkeeten fir selwer d'Tag. Dëst mécht direkt de Code Onwierksamkeet, well W3C fir Spezialfäegkeeten empfond gefält. Andeems se op enger Säit ass net recommandéiert.

Sëtz Spär

Wann Dir der Formatioun vun der Divisiounen an d'Mëtt virbereet wëllt, kann CSS bidden eng ganz confortabel Manéier: de Gebrauch vun externen padding Spillraum. Padding kann als d'Spär Elementer uginn ginn, an Linn-blockéieren. Svoysva Wäert soll 0 (vertikal padding) ginn, an Auto (automatesch Arécken horizontal):

• Spillraum: 0 Auto;

Elo ass dës Optioun als absolut valabel unerkannt. och extern padding benotzt erlaabt Dir der Formatioun vun den Zentrum ze setzen: CSS-Spillraum Verméigen erméiglecht eis vill Problemer ze léisen op der Säit mat de Stellewäert Element assoziéiert.

Formatioun vu lénks oder riets Südsäit vun der Spär

Heiansdo CSS-Manéier verlaangen net Formatioun vun den Zentrum, mä et ass néideg den nächsten zwee Bléck bis Mëtt duerchgesat huet, ee vun der rietser Säit an déi aner - vu riets. Fir dës do ass de fléien Verméigen, déi ee vun dräi Wäerter huelen kann: lénks, riets oder keent. Loosst d'soen, dass Dir zwee Stécker geschnidden hunn, datt duerch Säit Faarwe Säit soll. Dunn ass de Code wéi follegt:

• .left {fléien: lénks;}
• .right {fléien: Recht}

Wann et eng drëtt Spär ass, deen ënnert déi éischt zwou spären (e.g., Fousszeilen) etabléiert ginn muss, dann ass et néideg kloer Fonktioun umellen:

• .left {fléien: lénks;}
• .right {fléien: Recht}
• Fousszeilen {kloer: souwuel}

D'Tatsaach, datt de Bléck mat der Opdeelung vun lénks a riets falen aus dem Ganzen Flux, dat heescht, all déi aner Elementer bestëmmen déi ganz Existenz vun Elementer ignoréiert. Property kloer: souwuel erlaabt Fousszeilen Spär oder all aner siichtbar Preisen aus dem Flux Zellen an verbitt geschenkt (fléien) souwuel iwwert déi lénks an riets. Dofir, an eisem Beispill ass de Fousszeilen zeréck geschéckter déplacéiert.

vertikalen Formatioun

Et gëtt Fäll, wou net genuch d'Formatioun vun den Zentrum vun der CSS-Weeër ze setzen, muss dir och de vertikalen Positioun vun der Spär Kand änneren. All Linn oder hannertenee-Spär Element kann géint der ieweschter oder ënnescht Grenz gekeltert ginn, matzen an der Mëtt vun der Elterendeel Element oder ginn an engem arbiträr Plaz. Am meeschten brauchen Formatioun vun den Zentrum vun der Spär, benotzt se vertikal-fir Spezialfäegkeeten. Ugeholl et ginn zwee Bléck, ee gemaach bannent den Trainer. An dësem Indoor Eenheet - hannertenee-Spär Element (Haaptsäit: inline-Spär). Et ass néideg de vertikalen Spär Kand, fir:

• Formatioun vun der ieweschter Grenz - .child {vertikalen-fir: erop};
• Sëtz - .child {vertikalen-fir: Mëtt};
• Formatioun vun ënnen Wäitschoss - .child {vertikalen-fir: ënnen};

Um Spär Elementer Audio Text-fir, oder Vertikal-fir Demande net.

Méiglech Problemer mat ageriicht Unitéiten

Heiansdo Divisiounen den Zentrum vun der CSS-Manéier fir kënnen e bësse Problemer féieren. Zum Beispill, wann en fléien benotzt: zum Beispill, sinn et dräi Bléck: .first, .second an .third. Den zweeten an drëtte Bléck leien an déi éischt. En Element mat enger Klass zweet lénks-ageriicht, an de leschten Spär - iwwert déi riets Säit. déi zwee, si waren nëmmen aus der Baach no aligning. Wann d'Elteren Element Héicht net definéiert ass (zB, 30em), et Cessatioun der Héicht vun Duechtergesellschaft Unitéiten ze zéien. Fir dës Feeler verhënneren, benotzen den "spacer" - eng besonnesch Eenheet, déi .second an .third gesäit. CSS-Code:

• .second {fléien: lénks}
• .third {fléien: Recht}
• .clearfix {Héicht: 0; kloer: souwuel;}

Pseudo oft benotzt: no, wat och de Bléck an Plaz fir zréck erlaabt vun psevdorasporki schafen (an der Beispill am Divisiounen mat Klass läit am Container an regruppéiert engem .first .left an .right):

• .left {fléien: lénks}
• .right {fléien: Recht}
• .container: no {Inhalt: ''; Haaptsäit: Dësch; kloer: souwuel;}

D'virun Optiounen - déi gemeinsam, obwuel et sinn e puer Variatiounen. Dir kënnt ëmmer fannen den einfachsten a Meeschter praktesch Manéier psevdorasporki duerch Experimenter ze schafen.

Anere Problem dacks begéint Layout - Formatioun vun Linn-Spär Elementer. No all vun hinnen ass e Raum automatësch derbäi. Packen et hëlleft der Spillraum Verméigen, déi vun den negativen Arécken definéiert ass. Et ginn aner Weeër, déi benotzt gi manner dacks, zum Beispill, Compteur der Schrëftgréisst. An dësem Fall, Registere d'Eegeschafte vun der Elterendeel Element Schrëftgréisst-Gréisst: 0. Wann bannent poléierte Text läit, hunn d'Eegeschafte vun Linn-Spär Elementer fir de gewënschte Schrëftgréisst zréck. Zum Beispill, Schrëftgréisst-Gréisst: 1em. Déi Method ass net ëmmer praktesch, also et ass méi allgemeng Versioun mat externen Rand benotzt.

Maer Aligning erlaabt Iech schéin a funktionell Säiten ze schafen: d'allgemeng Layout an Layout, an der Lag vun Wueren an de Geschäfter, an Fotoen op de Site vun enger klenger.