English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il modello di formato visivo di solito spiega come elaborare gli elementi dell'albero del documento per media visivi come schermi di computer.
Il modello di formato visivo CSS è un algoritmo utilizzato per gestire documenti di media visivi. Nel modello di formato visivo, ogni elemento dell'albero del documento viene trattato in baseModello di casellaGenerare zero o più caselle.
La disposizione di queste caselle dipende dai seguenti fattori:
Dimensioni della scatola.
il tipo di elemento (bloccante o inline).
pianificazione di posizionamento (flusso normale,flottamentoePosizionamento assoluto)
Le relazioni tra gli elementi dell'albero del documento.
Informazioni esterne, come la dimensione della viewport, le dimensioni native delle immagini ecc.
Attenzione:L'albero del documento è la gerarchia degli elementi codificati nel documento sorgente. Ogni elemento dell'albero del documento ha un solo elemento padre, eccetto l'elemento radice.
Ogni elemento visualizzato nella pagina web genera una casella rettangolare. Di seguito sono descritti i tipi di caselle che possono essere generate dagli elementi.
Gli elementi bloccanti sono quegli elementi che vengono formati visivamente come blocchi (cioè occupano tutta la larghezza disponibile) e hanno un ritorno a capo prima e dopo l'elemento. Ad esempio, gli elementi paragrafo (<p>e titoli (<h1> - <h6>e separazione (<div>e altri come ).
Di solito, gli elementi bloccanti possono contenere elementi inline e altri elementi bloccanti.
Gli elementi inline sono quegli elementi che non costituiscono nuovi blocchi di contenuto nel documento sorgente; il contenuto è distribuito a riga. Ad esempio, gli elementi paragrafo (<em>e spazi (<span>e elementi forti (<strong>e altri all'interno di ) ecc. per il testo in evidenza.
Gli elementi inline possono solitamente contenere solo testo e altri elementi inline.
Attenzione:Diversamente dai elementi bloccanti, gli elementi inline occupano solo la larghezza necessaria e non forzano il riwrap.
Puoi utilizzare l'attributo display CSS per modificare il modo in cui l'elemento viene visualizzato nella pagina web. VedraiNel prossimo capitoloConosci l'attributo display.