Box-model
Le regole CSS hanno come presupposto il fatto che tutti gli elementi generano uno o più riquadri rettangolari chiamati riquadri elemento.
Ogni riquadro elemento, ha al centro un'area di contenuto, circondata da dimensioni facoltative di padding, border e margin. Padding, border e margin, si considerano facoltativi perché si possono impostare con una lunghezza zero. In questo caso non sono presenti nel riquadro elemento.
L'immagine mostra la rappresentazione del riquadro elemento o box-model.
Margin, border, e padding sono controllate dalle rispettive proprietà. Lo sfondo dell'area di contenuto, si estende anche al padding, mentre i margini sono sempre trasparenti, così lo sfondo dell'elemento contenitore è sempre visibile.
Mentre i margini possono avere valori negativi (-50px), il padding no. I bordi si creano con gli stili definiti menttre il colore è dato dalla proprietà border-color.
Se non è definito un colore per il bordo, questo eredita il colore di primo piano
dell'elemento. I bordi con spazi vuoti fanno intravedere il colore dello sfondo (background).
Il bordo non può avere larghezze espresse con valori negativi.
Questa è la rappresentazione del box-model vista dai CSS 2.1; per rendere più flessibile il box model, i CSS3 aggiungono la proprietà box-sizing. Tale proprietà ha due valori:
- content-box:
- i valore di width e height, fanno riferimento all'area del contenuto, come previsto dal modello tradizionale CSS 2.1 spiegata sopra, ed è il valore predefinito.
- border-box:
- i valore di width e height, comprendono anche il padding e il bordo, ma non i margini.
In questo esempio, si vuole cambiare il modello del box model di deafault (content-box), e impostarlo in border-box così da sommare nel valore di width anche il padding e il bordo che restano comunque valori facoltativi.
.box {
box-sizing: border-box;
width: 30%;
border: 1em solid #040;
float: left;
}
Elementi CSS
Ogni elemento è disposto nella pagina in relazione al suo blocco contenitore, in altre parole il blocco contenitore è "l'ambiente di layout" dell'elemento... Il blocco contenitore è costituito dal limite del contenuto dell'elemento di blocco, della cella di tabella, o del riquadro antenato inline-block più vicini.
<body>
<div>
<p> questo è un paragrafo <p>
<div>
<body>
Il layout di p dipende dal layout di div che a sua volta dipende dal layout di body.
E. Meyer - CSS guida completa - terza edizione
Gli elementi e i termini che interessano la formattazione sono i seguenti:
- Elemento di blocco
- Sono elementi come div, p, blockquote, h1 ecc. Questi elementi generano nuove linee, si estendono per
occupare tutto lo spazio orizzontale e si dispongono uno di seguito l'altro in verticale, distanziandosi attraverso i margini.
La dichiarazione display:inline, fa sì che un elemento di blocco sia visualizzato come elemento inline.
Agli elementi di blocco si applicano tutte le proprietà del box-model.
La dichiarazione dispaly:block per un elemento inline e display:inline per un elemento di blocco, variano la visualizzazione di questi elementi, non la loro natura di elementi inline o di blocco.ul li{ display:inline; box-shadow:0 -1px 0 #996633; }
Questo significa che nonostante siano dichiarate visualizzazioni diverse con CSS, il codice x/html dovrà sempre essere scritto correttamente quindi elementi di blocco possono contenere elementi inline e non viceversa.Es. l'elemento a dell'esempio resta comunque un elemento inline ed è annidato nel p: codice html: <p>questo è un elemento reso block-level vedi <a href="https://www.display.com"> proprietà display</a></p> regola CSS a{ display:block; } - Elemento inline
- Elementi che non causano interruzioni di riga, si dispongono orizzontalemente per occupare l'area di contenuto
dell'elemento genitore, di solito un elemento di blocco; sono discendenti da elementi di blocco. Nel html5 sono chiamati "elementi frasali".
La dichiarazione display:inline consente la visualizzazione degli elementi di blocco come elementi di inline;
I margini verticali, (top e bottom), non hanno influenza sugli elementi inline, mentre i margini orizzontali (left e right)si.
L'altezza della riga non è influenzata dalla proprietà height ma esclusivamente da line-height.a{ display:block; }Nella disposizione degli elementi in linea si deve considerare la proprietà vertical-align poiché questa stabilisce l'allineamento verticale di un elemento in linea all'interno di una linea di altezza maggiore. Per gli elementi di blocco la proprietà vertical-align non ha alcun valore e non stabilisce l'allineamento verticale del testo degli elementi di blocco
- Elemento non rimpiazzato
- È l'elemento il cui contenuto si trova nella pagina come il testo di un paragrafo.
- Elemento rimpiazzato
- Il contenuto di questo elemento non si trova nella pagina ma viene inserito nel punto in cui questo elemento si trova. L'esempio classico è l'elemento img
- Elemento radice
- È l'elemento che racchiude tutti gli altri elementi. In x/html è l'elemento html
- Flusso normale
- Con questo termine si indica la visualizzazione del testo da sinistra a destra e dall'alto in basso delle lingue occidentali. Per far uscire un elemento dal flusso normale si può solo attribuirgli la proprietà float o posizionarlo
Formattazione orizzontale
La larghezza (width) è la distanza dal limite sinistro al limite destro di un elemento.
A volte si può lasciare al browser il compito di determinare la width di un elemento in base al contenuto.
È preferibile definire la width in modo esplicito nel caso di elementi resi fluttuanti con la proprietà float.
Se il contenuto dovesse fuoriuscire dall'elemento contenitore, si può intervenire con la proprietà overflow.
L'altezza (height) è la distanza tra il limite interno inferiore e il limite interno superiore di un elemento. A un elemento possono essere applicate sia width sia height, anche se height è preferibile sia determinata dal browser in relazione all'estensione verticale del contenuto.
Height può essere definta nel caso in cui si conosca la dimensione intrinseca dell'elemento, come nel caso delle immagini, o se si vuole definire un'altezza precisa di un elemento contenitore. Se il contenuto dovesse fuoriuscire dall'elemento contenitore, si può intervenire con la proprietà overflow.
La formattazione orizzontale (layout) si rifà al box-model ed è la somma di width + padding + border + margin. (left e right).
Mentre la formattazione verticale è la somma di height + padding + border + margin (top e bottom). Questo significa che qualsiasi valore di padding, border e margin, viene aggiunto alla width, vale a dire l'area del contenuto.
<p style="width:300px; padding:5px; border:1px solid;
margin:15px;">Formattazione orizzontale</p>
Questo esempio stabilisce una larghezza dell'area di contenuto di 300px alla quale si aggiungono 10px di padding (somma del padding destro 5px e padding sinistro 5px), 2px di border (somma di 1px bordo sinistro e 1px bordo destro), e 30px (15px di margine sinistro e 15 px di margine destro). L'elemento sarà largo 342px data dalla somma di: 300 + 10 + 2 + 30
Per height, si sommano i valori verticali:
<p style="height:50px; padding:5px; border:1px solid;
margin:15px;">Formattazione verticale</p>
Questo esempio al valore di height 50px somma i valori di padding-top e bottom, di border-top e bottom e margin-top e bottom
per un'altezza complessiva dell'elemneto di 50px + 10px + 2px + 30px=92px
Visti i valori la regola si poteva scrivere anche così
<p style="width:300px height:50px; padding:5px;
border:1px solid; margin:15px;">Formattazione verticale</p>
La somma dei componenti orizzontali di un elemento di blocco corrisponde sempre alla width, del genitore vale a dire del blocco contenitore dell'elemento. Soltanto width, margin-left e margin-right possono essere impostati come auto. Padding e border, (left e right) devono essere impostate con valori specifici oppure se non vi è alcuna dichiarazione, assumono il valore predefinito di 0.
La proprietà width deve essere impostata come auto (l'area del contenuto si allarga per contenere il contenuto)o con valori non negativi.
Una width definita e margin-auto sono dichiarazioni per centrare gli elementi nella pagina
<p style="width:300px; margin-left:auto;
margin-right:auto;>Formattazione verticale</p>
I margini possono essere impostati con valori negativi, così da portare l'elemento all'esterno del suo genitore
I valori percentuali utilizzati per la larghezza per il padding e per i margini vengono applicati seguendo le stesse regole delle altre misure (px, em). È consigliabile non mischiare troppo diverse misure per evitare complicazioni. Le percentuali applicate agli elementi di blocco, (width, padding) sono utilizzate per creare layout flessibili, vale a dire che si adattano alla larghezza del video.
es:layout flessibile impostando il padding di body.
body{
padding:0 20%; /* padding-top e padding-bottom hanno valore zero; padding-left e padding-right hanno valore 20% ciascuno, in questo modo il div#container è centrato nella pagina.*/
}
header, main, article, aside, footer{
display:block; /*per browser che non supportano questi elementi html5*/
}
main{
width:100%;
min-width:450px;
max-width:960px;
}
header{
width:100%;
height:3em;
border-bottom:1px solid #004000;
}
article{
65%;
}
aside{
38%;
}
footer{
width:100%;
height:1.5em;
border-top:1px solid #004000;
border-bottom:1px solid #004000;
}
es:layout flessibile impostando il padding di body.
#container è centrato nella pagina com margin auto.
body{
padding:1% 15%;
color:#21120B;
font:100%/1.5em "gill sans mt", arial, helvetica,
verdana, sans-serif;
text-align:left;
background:#CBDF7C;
/*background-image:url(../ima/foglia.jpg);
background-repeat:repeat;*/
}
main{
min-width:550px;
max-width:960px;
margin:0 auto;
Elementi rimpiazzati
Sono valide le regole per gli elementi di blocco non rimpiazzati solo che la width e la height, sono lasciate come auto, la larghezza (altezza) dell'elemento sono quelle intrinseche del contenuto. pertanto un'immagine larga 500px e alta 300px, avrà quella dimensione anche nel documento.
es:1
<img src="nomefile" alt="immagine di 500x300px"
title="immagine di 500x300px" />
questa immagine nella pagina occupa la sua dimensione
intrinseca.
es:2
<img src="nomefile" width="50" height="30"
alt="immagine di 50x30px" title="immagine di 50x30px" />
questa immagine nella pagina occupa 50x30px
Nel secondo esempio l'immagine viene ridotta a 50x30 px dal browser seguendo i valori dichiarati. Se l'immagine originale però è di 500x30px, è questa che viene caricata e poi ridimensionata dal browser. Le immagini piccole ridimensionate a immagini più grandi sgranano. È opportuno quindi creare immagini di dimensione più o meno corretta, così da evitare eccessivi costi di banda nel trasferimento o visualizzazioni non definite.
Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever
