Diferència entre revisions de la pàgina «CSS box model»
(Es crea la pàgina amb «El CSS Box Model és el "model de caixes" que gestiona com s'han de mostrar els elements d'una pàgina HTML amb CSS. Les "caixes" CSS es solen realitzen amb el tag DIV. …».) |
|||
| Línia 42: | Línia 42: | ||
== Propietats de la caixa == | == Propietats de la caixa == | ||
| − | + | Principals: | |
| − | * | + | * Dimensions: '''''width''''' i '''''height'''''. Es pot donar en mesures absolutes (px) o relatives (em, %). |
| − | * | + | *:Article sobre [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=3 width i height]. |
| + | * Background: igual que hem vist al body en altres capítols. | ||
| + | * Box model: '''''border''''', '''''margin''''' i '''''padding'''''. | ||
| + | ** Articles sobre [http://www.w3schools.com/css/css_margin.asp margin a W3Schools] i [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=4 ''margin'' en català]. | ||
| + | ** Articles sobre [http://www.w3schools.com/css/css_padding.asp padding a W3Schools] i [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=5 ''padding'' en català]. | ||
| + | ** Articles sobre [http://www.w3schools.com/css/css_border.asp border a W3CSchools] i [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=6 ''border'' en català]. | ||
| + | * Flux: propietat '''''display''''' pot ser '''''block''''' o '''''inline'''''. | ||
| + | * Posicionament (static, absolute, relative, float, fixed). | ||
| + | * ... | ||
| + | També: | ||
| + | * '''Overflow''': indica què fer quan el contingut de la caixa sobrepassa a aquesta. Pot ser '''''visible''''', '''''hidden''''', '''''scroll''''', '''''auto''''' i '''''inherit'''''. | ||
| + | *:Article sobre [http://www.w3schools.com/Css/pr_pos_overflow.asp overflow a W3CSchools]. | ||
| + | * ... | ||
== Alineació d'una caixa en mode normal == | == Alineació d'una caixa en mode normal == | ||
Es realitza amb la '''propietat ''margin'''''. | Es realitza amb la '''propietat ''margin'''''. | ||
Revisió del 16:25, 5 març 2011
El CSS Box Model és el "model de caixes" que gestiona com s'han de mostrar els elements d'una pàgina HTML amb CSS.
Les "caixes" CSS es solen realitzen amb el tag DIV. Qualsevol element HTML/CSS té la seva pròpia caixa (per exemple, P o H1), però el tag DIV és còmode per crear "caixes buides" sense cap propietat a priori, per exemple:
<div id="caixa_gran">
<div id="caixa_petita">
Text dintre de la caixa petita <SPAN class="negreta">amb lletra negreta</SPAN> pel mig.
</div> <!-- tanco caixa gran -->
</div> <!-- tanco caixa petita -->
Tenim 2 caixes, i una (la gran) conté una altra a dins.
Contingut
Regions d'una caixa
Les regions d'una caixa que cal conèixer són les següents:
- Àrea del text/element
- Padding: del text al border. Article sobre padding.
- Border
- Margin: des del border fins la següent caixa. Article sobre margin.
Llegeix aquest article per veure-ho en profunditat: http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=4&subcapitol=2
Modes de bloc i inline
Els modes "bloc" i "inline" es corresponen a la idea que tenim entre els DIV i SPAN, és a dir:
- Mode block (DIV): ocupa tota l'amplada del contenidor.
- Mode inline (SPAN): ocupa només el tamany del text.
Pots llegir més:
Qualsevol DIV es pot tornar un SPAN i al revés si canviem la seva propietat display a "block" o "inline". Per exemple:
P {
display: inline; /* amb això transformem el bloc "P" a un element "inline" més similar a un SPAN */
}
Propietats de la caixa
Principals:
- Dimensions: width i height. Es pot donar en mesures absolutes (px) o relatives (em, %).
- Article sobre width i height.
- Background: igual que hem vist al body en altres capítols.
- Box model: border, margin i padding.
- Articles sobre margin a W3Schools i margin en català.
- Articles sobre padding a W3Schools i padding en català.
- Articles sobre border a W3CSchools i border en català.
- Flux: propietat display pot ser block o inline.
- Posicionament (static, absolute, relative, float, fixed).
- ...
També:
- Overflow: indica què fer quan el contingut de la caixa sobrepassa a aquesta. Pot ser visible, hidden, scroll, auto i inherit.
- Article sobre overflow a W3CSchools.
- ...
Alineació d'una caixa en mode normal
Es realitza amb la propietat margin.
