I layout possono essere una delle cose più difficili da padroneggiare quando si parla di CSS, anche se sono innegabilmente uno dei più importanti. In questo suggerimento, esamineremo il flusso di documenti normale e come può aiutarti con i tuoi layout.
introduzione
Prima di spiegare cosa significa Flusso di documento normale, devo spiegare i diversi tipi di elementi html e come vengono visualizzati per impostazione predefinita.
Ci concentreremo sui due tipi principali di elementi HTML, vale a dire elementi "a livello di blocco" e "in linea". Dall'avvento di HTML5 abbiamo una categorizzazione degli elementi più specifica (fraseggio, flusso e sezionamento) anche se i browser si appoggiano ancora efficacemente al blocco e alle definizioni in linea.
Questo è un esempio di diversi elementi in linea tutto contenuto in un paragrafo che include un'ancora una duratae un tag dell'enfasi.Ridimensiona il browser e vedrai come un browser gestisce questi elementi in linea per impostazione predefinita. Esatto, tutto viene visualizzato su una riga e viene chiuso quando non c'è più spazio.
Guarda questa demo inline element in azione.
Elementi a livello di blocco comunque, come divs e paragrafi, più i nuovi membri HTML5 come articolo e sezione, hanno proprietà molto diverse per impostazione predefinita. Gli elementi a livello di blocco normalmente, ma non sempre, contengono elementi inline o altri elementi a livello di blocco. Pensa a loro come l'elemento "strutturale" dei due.
I browser (per impostazione predefinita) formattano gli elementi a livello di blocco con un'interruzione di riga prima e dopo. In altre parole, gli elementi a livello di blocco inizieranno sempre su una nuova riga (impilati come blocchi), a meno che non vengano disegnati diversamente.
Messa in piega
In tutti i casi possiamo modificare il modo in cui un elemento viene visualizzato utilizzando la proprietà di visualizzazione CSS:
elemento display: block; / * o inline, ad esempio * /
Queste caratteristiche di visualizzazione dettano anche che altro possiamo modellare. Ad esempio, siamo liberi di determinare la larghezza e l'altezza di un elemento a livello di blocco, ma non così con gli elementi in linea. Padding e margini possono essere applicati agli elementi inline, ma non influenzano le dimensioni dell'elemento contenitore. Dai un'occhiata a questo esempio per vedere cosa intendo:
Gli altri
Oltre al blocco comune e agli attributi di visualizzazione in linea, ci sono alcuni esempi meno frequenti. Ad esempio, che cosa succede se si desidera visualizzare un elemento in linea, ma lo si disegna come un elemento a livello di blocco? Inserisci il inline-block valore. Gli elementi di blocco in linea mantengono proprietà come larghezza, altezza, margine e riempimento in quanto vengono applicati agli elementi a livello di blocco, pur mantenendo le qualità strutturali di un elemento in linea.
Inline-Block è una potenziale alternativa agli elementi fluttuanti, ma certamente non è privo di problemi in queste circostanze.
Un altro valore di visualizzazione, che non è così usato è list-item, che fa esattamente quello che dice sulla scatola. Ogni elemento con il valore dell'elemento dell'elenco applicato viene visualizzato verticalmente, come ci si aspetterebbe da un elenco, ma hanno anche punti elenco accanto. Questo è utile per elencare i dati, ad esempio un elenco di nomi, ed è logicamente come voci di lista come queste:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
sono visualizzati per impostazione predefinita.
Infine, l'ultimo valore di visualizzazione che vale la pena menzionare è 'none'. Riesci a indovinare cosa fa? Esatto, qualsiasi elemento che ha la proprietà display impostata su "none" semplicemente non viene visualizzato nella pagina; è visivamente (insieme a tutti gli elementi in esso contenuti) rimosso dal documento. Il markup per quell'elemento è ancora inviato al browser, ma non genera una casella ed è nascosto alla vista - gli screen reader non lo rilevano neanche. Non occupa spazio, quindi altri elementi possono prendere il suo posto.
Quindi cos'è il flusso di documenti normale?
È come viene presentata una pagina quando non si fa nulla per quanto riguarda lo stile strutturale.
Tenendo presente quanto sopra, cos'è esattamente il flusso di documenti normale? È come viene presentata una pagina quando non si fa nulla per quanto riguarda lo stile strutturale. I browser visualizzano il contenuto nell'ordine in cui viene rilevato; prima di tutto, procedendo verso il basso.
Quando le persone iniziano per la prima volta il web design, sono spesso ansiosi di affrontare ogni tipo di trucco, senza imparare le basi e le basi. Se riesci a capire il normale flusso di documenti, i tuoi progetti web saranno sempre migliori!
Esercizio: il markup
Iniziamo a creare una semplice galleria fotografica con CSS molto semplice. Ho rapidamente creato un file html per iniziare, dopotutto ci concentriamo principalmente sullo stile. Copia il codice qui sotto nel tuo editor di testo e ti spiegherò cosa c'è dentro.
Flusso di documenti normale
Un'introduzione al flusso di documenti normale.
Benvenuti nella mia galleria fotografica!
Sono l'uomo senza nome, Zapp Brannigan! Bender, essere Dio non è facile. Se fai troppo, le persone diventano dipendenti da te, e se non fai niente, perdono la speranza. Devi usare un tocco leggero. Come un safecracker o un borseggiatore. Ehi, indovina a cosa sei accessori. Leela, Bender, stiamo andando a rubare la tomba. Anche Zoidberg. Oh caro! È bloccata in un loop infinito, ed è un idiota! Bene, questo è l'amore per te.
Posso usare la pistola? Oh no! Il professore mi colpirà! Ma se Zoidberg lo "corregge"… allora forse regali! Friggere! Smetti di fare la cosa giusta, idiota! Chi ha il coraggio di volare in qualcosa che tutti chiamiamo sempre una sfera della morte? Non ho sentito molto di nulla da quando la mia cavia è morta.
C'è un blocco CSS vuoto in alto. Qui è dove inizieremo lo styling. Di seguito è riportato un collegamento condizionale allo script Shiv HTML5 che consentirà a Internet Explorer di riconoscere e visualizzare correttamente gli elementi HTML5. Sotto di questo, il tag obbligatorio del corpo. All'interno del tag body è il contenitore per l'intera pagina e anche quello per la galleria fotografica. Ho usato il placekitten per ottenere immagini segnaposto e Fillerama per il testo di riempimento. Quindi questo è tutto.
OK, quindi ora solo per dimostrare come funziona Normal Document Flow dare un'occhiata alla pagina che hai appena fatto. Proprio come ti aspetteresti giusto? Le immagini vengono visualizzate in una riga, fino alla larghezza dell'elemento genitore, in questo caso viene riempita la figura (impostata su 100% della finestra, ma probabilmente con alcuni margini per impostazione predefinita). E anche se non puoi ancora vederlo, tutti gli elementi a livello di blocco, come div, la figura e l'articolo, sono sulla loro stessa linea.
Questo è normale flusso di documenti in azione. Ora, ridimensiona il browser per un secondo. Sì, è fluido! Beh, forse no completamente fluido come siamo arrivati a comprenderlo - le immagini mantengono le loro dimensioni indipendentemente dalla vista. Tuttavia, i tuoi layout saranno sempre liquidi per impostazione predefinita.
Esercizio: il CSS di base
Solo per dimostrare che non sto prendendo in giro elementi a livello di blocco, aggiungiamo loro alcuni colori di sfondo. Nel blocco di codice CSS nella parte superiore del file HTML, aggiungere questo:
Ora, dopo aver aggiunto alcuni colori di sfondo, controlla il risultato. Dovrebbe essere evidente come vengono visualizzati gli elementi a livello di blocco.
Esercizio: il layout CSS
Lo stile sotto contiene solo proprietà CSS dal modello box (larghezza, margine, riempimento, ecc.), Tuttavia mostra quanto poco CSS può creare layout solidi.
In questo CSS abbiamo designato la larghezza del contenitore al 65%. Potremmo anche aver utilizzato un valore di pixel fisso, ma le percentuali mantengono la natura fluida del documento e dimostrano il flusso del documento in modo più efficace. Abbiamo anche centrato la pagina usando margine: 0 auto.
Il resto riguarda l'estetica. Ho aggiunto un po 'di padding per dare tutto un po' di respiro, specificato i font e i colori dei font, questo è tutto.
Salva quel documento e visualizzalo nel tuo browser.
Ogni volta che sto lavorando a un progetto, considero sempre come apparirà in Normal Document Flow. Questo mi permette di pensare a come posso migliorarlo con il minor numero possibile di CSS.
Conclusione
Usando i principi che abbiamo imparato oggi, prova a creare i tuoi esempi. Scoprirai che (strutturalmente) puoi ottenere molto prima di entrare nei tecnicismi dei galleggianti e del posizionamento.
Risorse addizionali
Elementi incorporati nella rete di sviluppatori Mozilla
Elementi a livello di blocco sulla rete di sviluppatori Mozilla
Modello di formattazione visuale di W3C
La dichiarazione di visualizzazione su QuirksMode
Visualizzazione CSS: inline-Block: Why It Rocks, e Why It Sucks di Robert Nyman
Qual è l'affare con display: Inline-Block? di Josh Johnson
Non utilizzare display: nessuno per nascondere visivamente il contenuto destinato agli screen reader su 456 Berea St.
Accentsconagua
Share
