Content
- Els elements delicats a la part superior
- Samarretes ben embalades
- Els mitjons que omplen els buits
- Bon viatge
És mitjanit, i aquella div al vostre lloc encara sembla un cofre de joguina infantil. Tots els elements són un embolic confús i cada vegada que es juga amb CSS visualització propietat, es reordenen en una tonteria totalment diferent.
Si sou com jo, probablement resoldreu això murmurant sense deixar de respirar i ser sempre més agressiu amb el teclat. I tot i que aquesta estratègia ja m’ha funcionat, recentment em vaig proposar trobar una manera millor d’entendre-ho visualització propietat.
Resulta els conceptes bàsics de visualització són molt més senzills del que pensava originalment. De fet, fan servir els mateixos principis que empaquetar una maleta. Vaig a cobrir pantalla: bloc, bloc en línia i en linia. Si abans heu disposat una maleta de manera ordenada, veureu el paral·lel. Si ets el tipus de persona que cobreix tota la teva roba de manera atzarosa, bé, només puc fer molt per tu.
La nostra maleta contindrà tres tipus de roba:
- Delicats, com una camisa de coll
- Samarretes que es poden enrotllar
- Mitjons o roba interior que es poden omplir en buits
Com a referència, si modeléssim la maleta en HTML, quedaria així:
div class = 'maleta'> div class = 'delicat'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'mitjons'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'samarreta'> / div> / div>
Els elements delicats a la part superior
Pantalla: bloc és el valor predeterminat per a la majoria d'elements HTML. Això vol dir que l'element ocupa tot l'espai horitzontal del contenidor div. Si es troba al costat d'altres elements germans, començarà una nova línia i no permetrà altres elements a la seva línia. És similar als articles delicats que heu posat a la part superior de la maleta. Es tracta d’articles delicats o intel·ligents, com ara samarretes de coll. No voleu que s’arruguin, de manera que assegureu-vos que no estiguin empeses contra altres peces de roba.
Això fa aparèixer una de les parts més difícils de pantalla: bloc. Fixeu-vos que la camisa de coll no ocupa tota l’amplada de la maleta? Això no vol dir que altres elements pugin al seu nivell. Diguem que aquesta camisa representa el 60% de l’amplada de la maleta; encara bloquejaria la incorporació d'altres elements al nivell superior.
Per això, a la imatge hi ha una vora taronja. A pantalla: bloc l'element afegirà automàticament un marge al seu voltant si no ocupa tot l'espai horitzontal.
Samarretes ben embalades
Probablement la major part de la maleta estigui plena de la resta de roba per al vostre viatge. Per simplificar, ho reduirem a només samarretes. Hi ha un gran debat a Internet sobre si plegar o rodar és més eficient. Sóc una persona plegable.
De totes maneres, per tal d’adaptar-se al màxim d’elements, alineu les samarretes una al costat de l’altra. Això és exactament el que pantalla: bloc en línia està destinat a. Aquests elements poden situar-se l'un al costat de l'altre a la mateixa línia, així com al costat visualització: en línia elements.
A diferència de visualització: en línia elements, an bloc en línia l'element es mourà a la següent línia si no s'ajusta al seu contingut div al costat de l'altre bloc en línia elements. Per poder vessar una samarreta a la següent fila, haureu de tallar-la per la meitat i utilitzar la meitat restant per començar una nova fila. Bloqueig en línia els elements no es poden dividir per la meitat si no encaixen en una línia.
Els mitjons que omplen els buits
Torneu a l'HTML original i notareu que hi ha un mitjó div> entre les vuit samarretes. Però mireu la vista horitzontal de la maleta a la dreta. Si hi ha un mitjó div>, com pot acabar la fila del mig i començar la fila inferior? Aquest és el propòsit de visualització: en línia!
An en linia l'element es desplaçarà fins a la següent línia si supera l'amplada del fitxer div (d 'aquesta manera és diferent de bloc en línia o bé bloc). Des dels nostres mitjons div està ple de mitjons que s’han omplert de manera fortuïta en buits, pot començar fàcilment a omplir el buit del costat dret de la fila central i vessar-se per començar la fila inferior.
No haurà de tallar-se mitges per la meitat perquè això passi. Per això poden esdevenir en linia, mentre que les samarretes només poden ser-ho bloc en línia. Si les samarretes de la fila central només ocupaven el 60 per cent de l’amplada, els mitjons div> es desplaçaria cap amunt per omplir tot l'espai de la resta de la fila.
Bon viatge
Aquest és el CSS final de la nostra maleta:
.delicate {display: block; amplada: 60%; } .tshirt {display: inline-block; amplada: 20%; } .socks {display: inline; }
Aquí teniu un parell d’escenaris alternatius per il·lustrar els diferents usos de la pantalla. Si els delicats a la part superior tenien pantalla: bloc en línia, hi cabrien just al costat de les samarretes. Algunes de les samarretes pujarien a la línia superior i la resta s’ajustaria en conseqüència. No hi hauria cap amortidor còmode a l'esquerra i a la dreta de la camisa de coll.
Si cada samarreta tingués pantalla-bloc, tindríeu una pila massiva de samarretes una sobre l’altra, una per línia. Si els mitjons tinguessin pantalla: bloc en línia, tots seien a la fila inferior en lloc de fluir entre les dues files. Algunes samarretes serien empeses a una altra fila, formant una quarta línia. Hi hauria un buit a la dreta de la fila central de samarretes.
Amb el mètode que he exposat aquí, acabem amb una maleta ben feta que fa un millor ús de l’espai disponible.
Aquest article va aparèixer originalment a revista net número 289; compreu-lo aquí!
