Share
Ho ricevuto più richieste per tutorial CSS più semplici che insegnano i fondamentali difficili. Questo servirà come prima voce in una serie che riceverà nuove aggiunte sporadicamente ogni mese. Oggi esamineremo i trucchi overflow: hidden e clearfix per forzare un div genitore a contenere i suoi figli.
Hai mai notato che quando fai galleggiare tutti gli elementi figli all'interno di un div, il genitore occupa lo spazio zero? Ad esempio, nel tuo editor di codice, aggiungendo quanto segue all'interno del tag body.
Ora aggiungiamo un po 'di CSS per simulare un tipico sito web.
#container background: red; larghezza: 800px; imbottitura-fondo: 2em; #main background: green; altezza: 500 px; larghezza: 600 px; float: giusto; #sidebar background: blue; altezza: 500 px; larghezza: 200 px; fluttuare: a sinistra;
In alto, stiamo semplicemente impostando i colori di sfondo e fluttuando rispettivamente la barra laterale e le div principali a sinistra ea destra. Notare "padding-bottom: 2em;". Questo dovrebbe permetterci di vedere lo sfondo rosso in fondo, giusto? Visualizza la pagina nel tuo browser e vedrai:
Dove è finito lo sfondo rosso? Perché non viene visualizzato?
Quando fai galleggiare tutti i bambini, il genitore non occupa sostanzialmente spazio. Per meglio illustrare questo fatto, impostiamo un'altezza arbitraria di 50 px sul contenitore, quindi riduciamo l'opacità dei div dei bambini in modo che possiamo vedere lo sfondo rosso sotto.
#container ... altri stili altezza: 50px; #main, #sidebar opacity: .5;
Aggiorna il browser e vedrai:
Che strano. Abbiamo specificato un'altezza di 50px per il nostro contenitore div, ma le divs principale e sidebar in modo evidente straripamento i suoi confini, come le divinette viziate.
Torna al tuo foglio di stile e applica uno stile:
#container ... altri stili overflow: nascosto;
Dopo un altro aggiornamento, vediamo:
Bene, questo aiuta parzialmente. Ora, non dobbiamo preoccuparci dei bambini pubescenti che disobbediscono ai loro genitori. Detto questo, questo in realtà non aiuta la nostra situazione.
"Cerca di evitare di specificare le altezze il più possibile. Di solito c'è un metodo più intelligente.
La soluzione è strappare la proprietà di altezza dal nostro contenitore. Rimuovere la seguente proprietà.
#container ... altri stili altezza: 50px; /* Rimuovilo */
Un ultimo aggiornamento e il problema sembra risolto.
Puoi anche rimuovere le proprietà di opacità. Erano solo a scopo dimostrativo. Il metodo sopra dimostrato funzionerà nella maggior parte dei casi. Tuttavia, introduciamo un'altra variabile. Cosa succede se vogliamo posizionare un'immagine sul bordo del nostro contenitore, in modo che si sovrapponga. Hai visto questo effetto molte volte. Per fare un esempio, utilizzeremo semplicemente un'immagine di un cerchio con uno sfondo trasparente. Su un sito reale, questo potrebbe rappresentare un pulsante "Acquista ora" o "Registrati" - qualcosa di simile in questo modo.
Usando i CSS, posizioniamo l'immagine nella parte in alto a destra del nostro "sito web", sovrapponendo i bordi. Questo è ciò che vogliamo:
Innanzitutto, facciamo riferimento all'immagine nel nostro codice HTML.
... resto di html
Successivamente, torna al tuo foglio di stile e aggiungi i seguenti stili.
img position: absolute; a destra: -100px; sopra: 20px;Posizionamento del contesto
Si potrebbe pensare che questo posizionerà l'immagine appena sopra il bordo destro del contenitore div. Tuttavia, si sbaglia.
Poiché non abbiamo impostato un contesto di posizionamento, verrà utilizzata la finestra.
Ovviamente, questo non è ciò che vogliamo. Per applicare un contesto di posizionamento al nostro contenitore div, aggiungi semplicemente "position: relativo;" a #container. Una volta fatto ciò, l'immagine non utilizzerà più la finestra come riferimento.
Qual è il problema ora?
Ma ora abbiamo un nuovo problema! Perché impostiamo l'overflow: nascosto al nostro contenitore div, ci siamo un po 'sparati ai piedi. Come possiamo rompere i confini e prendere i nomi se l'overflow è impostato su nascosto? Dovremmo semplicemente accettare che questo particolare sito Web non assumerà nomi oggi? Assolutamente no. In questi casi, vale la pena utilizzare un metodo diverso.
Il trucco Clearfix
Con questo metodo, utilizzeremo i CSS per aggiungere contenuti dopo il nostro contenitore div. Questo contenuto creato cancellerà quindi il nostro div, forzandolo quindi a contenere i suoi figli. Ora ovviamente non vogliamo vedere questo contenuto, quindi dobbiamo essere sicuri di nasconderlo dal visualizzatore.
Ritorna al tuo foglio di stile, rimuovi "overflow: hidden;" dal tuo contenitore div e aggiungi quanto segue:
#container ... altri stili _height: 1%; #container: after content: "."; visibilità: nascosta; blocco di visualizzazione; chiaro: entrambi; altezza: 0; dimensione carattere: 0;Questo potrebbe sembrare complicato, ma ti assicuro che è piuttosto semplice.
- _altezza: Trigger "haslayout" in Internet Explorer, utilizzando il trucco di sottolineatura per indirizzare direttamente IE6.
- soddisfare: Dopo il div contenitore, aggiungere un punto.
- visibilità: Non vogliamo vedere il periodo, quindi nascondilo dalla pagina. (Uguale all'impostazione dell'opacità: 0;)
- display: Forza il periodo in modo che venga visualizzato a livello di blocco anziché in linea.
- chiaro: L'importante proprietà. Questo cancella i div main e sidebar. Questo è come aggiungere un non-romantico
alla nostra pagina.- altezza: Non occupare spazio.
- dimensione del font: Solo una precauzione per Firefox. Questo browser a volte aggiunge un po 'di spazio dopo il nostro elemento genitore. Impostando la dimensione del carattere a zero si corregge questo.
Conclusione
Anche se l'overflow: il trucco nascosto è preferibile, non è sempre l'ideale. È necessario utilizzare la soluzione migliore per l'attività in corso. L'importante è imparare ogni metodo, in modo da avere gli strumenti per risolvere il puzzle.
- Seguici su Twitter o iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.
Accentsconagua
... resto di html 
