Il layout con div è diventato a lungo lo standard e presenta numerosi vantaggi rispetto al layout della tabella. Tuttavia, in realtà, gli sviluppatori alle prime armi sono confusi sul comportamento di questi stessi blocchi.
Diamo un'occhiata ai punti principali del layout dei blocchi. Per ora, non prenderemo in considerazione lo standard html5, ma esamineremo solo le basi del layout con i blocchi div, che viene utilizzato quando si crea un layout o qualche tipo di un componente separato pagine.
Che cosa è considerato un elemento di blocco?
L'area di tale elemento sulla pagina è rappresentata da un rettangolo, per impostazione predefinita occupa l'intera larghezza disponibile e inizia con nuova linea.
L'elemento più comune utilizzato nel layout dei blocchi è l'elemento universale
Quindi, dal semplice al complesso. Vediamo come blocchi div per impostazione predefinita, senza che gli stili ne influenzino la posizione. Per chiarezza, aggiungeremo stili agli elementi in linea, tramite l'attributo style.
Aggiungiamo un valore di larghezza per ogni blocco:
Si può notare che, secondo la specifica, ogni blocco si trova su una nuova riga. Questo è il loro comportamento normale.
Ora la domanda è come organizzare blocchi div su una riga, uno dopo l'altro?
Per fare ciò, esiste una proprietà che determina su quale lato il blocco sarà costretto ad allinearsi. Allo stesso tempo, dall'altro bordo, può essere avvolto con altri elementi.
La proprietà float ha i seguenti significati:
- sinistra - la scatola è allineata a sinistra, avvolgendosi a destra
- a destra - il blocco è allineato a destra, avvolgere a sinistra
- none - non viene specificato alcun wrapping, il blocco si comporta per impostazione predefinita come negli esempi precedenti.
Aggiungi float: left alle nostre caselle in modo che le caselle siano allineate a sinistra:
Di conseguenza, i blocchi si sono allineati su una riga. Ok, diciamo di voler aggiungere un altro div in fondo e lo faremo senza specificare la proprietà float:
Blocco 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blocco 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Perchè è successo? In breve, ciò accade perché gli elementi flottati vengono eliminati dal flusso di documenti. Tuttavia, questo è un argomento per un articolo separato. Qui faremo conoscenza con una nuova proprietà che controlla il comportamento degli elementi flottati:
- left - disabilita il wrapping sul lato sinistro, tutti gli elementi verranno mostrati su una nuova riga (sotto l'elemento)
- destra - non consente il flusso attorno all'elemento sul lato destro
- entrambi - proibisce lo scorrimento attorno a un elemento su entrambi i lati, si consiglia di usarlo quando è esplicitamente necessario mostrare un elemento su una nuova riga o non si sa da che parte è possibile scorrere attorno ad altri elementi
Aggiungi una proprietà clear: left al Blocco 4, che impedirà a questo elemento di scorrere attorno ad altri elementi flottati sul lato sinistro.
Blocco 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Il blocco 4 è stato posizionato su una nuova linea, di cui abbiamo bisogno.
V in questo caso sappiamo come si trovano gli altri blocchi, quindi nell'esempio abbiamo subito specificato clear: left. Ci sono situazioni in cui non sappiamo esattamente da che parte starà il blocco flottante, quindi in questi casi vale la pena specificare chiaramente: entrambi, che annulla il flusso su entrambi i lati. Ora abbiamo capito come disporre i div orizzontalmente sulla stessa linea.
Va ricordato che i blocchi con valore float posizionato su una riga se la larghezza lo consente elemento genitore... Se gli elementi del blocco non rientrano in una riga, verranno a capo di una nuova riga. Se questo è critico, ad esempio, durante la disposizione dei layout, è necessario tenerne conto e per i blocchi con float è necessario impostare la larghezza - fissa (px) o elastica (%, rem, ecc.). Esaminiamo ulteriormente tali situazioni.
Come influenziamo i blocchi se vogliamo posizionare questi blocchi al centro?
La soluzione classica sarebbe aggiungere un genitore ai blocchi e utilizzare il margine: 0 auto;
Perché abbiamo dato la classe .wrapper al genitore stesso? "Wrapper" in traduzione significa "wrapper". È una pratica generalmente accettata definire un nome di classe quando un elemento avvolge altri blocchi e quindi consente di controllarli / influenzarli modificando il genitore stesso.
Prendiamo il markup dagli esempi precedenti e lo perfezioniamo.
Blocco 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Blocco 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tutto sembra essere semplice qui.
E se non ci piace il fatto che il testo aderisca strettamente al bordo del blocco genitore e vogliamo aggiungere campi senza modificare il markup, solo con usando CSS... Aggiungiamo la proprietà padding agli elementi:
Blocco 1. Lorem
Blocco 2. Lorem ipsum
Blocco 3. Lorem ipsum
Blocco 4. Lorem
E vediamo che il nostro layout si sta sgretolando! Il blocco 3 è andato da qualche parte. Perchè è successo? La risposta è semplice. Aggiungendo margini agli elementi, abbiamo aumentato la loro larghezza. Ora i valori sono i seguenti:
Blocco 1: 10 + 200 + 10 = 220 px
Blocco 2: 10 + 150 + 10 = 170 px
Blocco 3: 10 + 100 + 10 = 120 px
Blocco 4: 10 + 450 + 10 = 470 px
220 + 170 + 120 = 510 px
La larghezza totale dei tre blocchi è 510, non si adattano alla larghezza del genitore (450) e quindi si avvolgono su una nuova riga.
Come sistemarlo? Puoi fare quanto segue:
- Reimpostare le larghezze per ogni blocco, tenendo conto dei margini. Riducendo le dimensioni dei blocchi. Tutto si adatterà perfettamente a un'unica riga. D'accordo, questo è scomodo? Ogni volta per entrare nel layout e modificare qualcosa.
- Usa box-sizing: proprietà border-box. In modo che il calcolo sia preso dalla larghezza totale del blocco. Ti consiglio di scoprire qual è il modello di blocco css.
Usiamo la seconda opzione, risulta così:
Blocco 1. Lorem
Blocco 2. Lorem ipsum
Blocco 3. Lorem ipsum
Blocco 4. Lorem
Ora raccoglieremo insieme tutte le informazioni ricevute e proveremo a creare un semplice layout tipico a tre colonne con disposizione in gomma che si estenderà fino a un massimo di 900px, dopodiché l'intero layout sarà centrato.
Creiamo il markup del layout:
Scriviamo stili:
Corpo (larghezza massima: 900 px; / * limite larghezza massima* / margine: 0 automatico; ) / * per tutti i blocchi all'interno del corpo, cambia l'algoritmo per il calcolo della larghezza dei blocchi e aggiungi margini di 10px a tutti i blocchi * / body div (-webkit-box-sizing: border-box; -moz-box-sizing : border-box; box-sizing: border-box; padding: 10px;) .header (background: # CCA69E; padding: 10px;) .left-sidebar (width: 20%; background: # 8ED9B6; float: left; ) .content (float: left; width : 60%;) .right-sidebar (width: 20%; background: # FF9282; float: left;) .footer (background: # 000; clear: entrambi; / * disabilita il wrapping su entrambi i lati, il blocco viene visualizzato su una nuova riga * / color: #ccc;)
Se qualcosa non è chiaro chiedi nei commenti.
Ciao cari amanti dell'informatica. Oggi, il modo principale per creare bellissimi siti multipagina si basa sul layout a blocchi utilizzando il tag div.
In caso di ignoranza delle complessità di base del lavoro con questo strumento, ahimè e oh, ma attraente design reattivo non lo otterrai in alcun modo. Pertanto, questo articolo è dedicato all'argomento "Come creare un blocco in html". Descriverò in dettaglio come creare da zero oggetti blocco sulla pagina, come decorare lo sfondo e il design dei blocchi e, soprattutto, ti dirò come collegare il foglio di stile. Quindi, cominciamo!
Caratteristiche degli elementi di blocco
blocchi Sono elementi rettangolari che occupano l'intera larghezza della pagina disponibile, iniziano sempre su una nuova riga e per impostazione predefinita calcolano automaticamente l'altezza in base al contenuto.
Tutti gli elementi del blocco sono costituiti da 4 proprietà che, come i frame, circondano il contenuto dell'oggetto.
La cosa principale nel blocco è contenuto.
Ci sono campi intorno ad esso, che sono chiamati imbottitura... I margini sono responsabili della distanza tra il contenuto dell'oggetto e il suo bordo interno dei bordi.
Dopo di che ci sono i confini stessi, che sono chiamati parola inglese confine.
E, infine, l'ultimo fotogramma intorno a tutto quanto sopra è margine- rientri dal bordo esterno del bordo ai bordi della pagina o altri elementi. Va notato che non è necessario impostare queste proprietà.
Ad esempio, programmiamo 2 e riempiamo gli elementi creati con il testo.
Sul questo momento questo codice verrà visualizzato come normali due frasi. Per decorare il design dei blocchi, è necessario collegare il foglio di stile e linguaggio css impostare determinate proprietà.
Portiamo colori brillanti nella vita di tutti i giorni html
Affinché gli oggetti blocco appaiano interessanti e attraenti, dovremmo assolutamente includere un foglio di stile a cascata.
Per fare ciò, nel contenitore head dopo il tag Blocca in css - 2.
Blocca in css - 3.