Contenido
- Los artículos delicados en la parte superior
- Camisetas bien empaquetadas
- Los calcetines que llenan los huecos
- Buen viaje
Es medianoche, y esa div en su sitio todavía parece un baúl de juguetes para niños. Todos los elementos son un desastre y cada vez que juegas con CSS monitor propiedad, se reorganizan en una tontería completamente diferente.
Si eres como yo, probablemente resolverás esto murmurando en voz baja y volviéndote más agresivo con tu teclado. Y aunque esa estrategia me ha funcionado antes, recientemente me propuse encontrar una mejor manera de comprender la monitor propiedad.
Resulta que los conceptos básicos de monitor son mucho más simples de lo que pensaba originalmente. De hecho, utilizan los mismos principios que para hacer una maleta. Voy a cubrir bloqueo de pantalla, bloque en línea y en línea. Si ha arreglado una maleta de manera ordenada antes, verá el paralelo. Si eres el tipo de persona que aporrea toda tu ropa de manera desordenada, bueno, no puedo hacer mucho por ti.
Nuestra maleta contendrá tres tipos de ropa:
- Delicados, como una camisa con cuello
- Camisetas que se pueden enrollar
- Calcetines o ropa interior que se puedan meter en huecos.
Como referencia, si modelamos la maleta en HTML, se vería así:
div class = 'maleta'> div class = 'delicado'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'camiseta'> / div> div class = 'calcetines'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'camiseta'> / div> / div>
Los artículos delicados en la parte superior
Bloqueo de pantalla es el predeterminado para la mayoría de los elementos HTML. Eso significa que el elemento ocupa todo el espacio horizontal dentro de su contenedor. div. Si está junto a otros elementos hermanos, comenzará una nueva línea y no permitirá otros elementos en su línea. Es similar a los artículos delicados que colocas en la parte superior de tu maleta. Estos son artículos delicados o elegantes, como camisas con cuello. No desea que se arruguen, por lo que debe asegurarse de que no se empujen contra otras prendas.
Esto trae a colación una de las partes más difíciles de bloqueo de pantalla. ¿Observa cómo la camisa con cuello no ocupa todo el ancho de la maleta? Eso no significa que otros elementos salten a su nivel. Digamos que esta camisa mide el 60 por ciento del ancho de la maleta; todavía impediría que otros elementos se unieran a él en el nivel superior.
Por eso hay un borde naranja en la imagen. A bloqueo de pantalla El elemento agregará automáticamente un margen a su alrededor si no ocupa todo el espacio horizontal.
Camisetas bien empaquetadas
La mayor parte de su maleta probablemente esté llena del resto de su ropa para su viaje. En aras de la simplicidad, vamos a reducir esto a solo camisetas. Existe un gran debate en Internet sobre si plegar o enrollar es más eficiente. Soy un tipo de persona plegable.
De todos modos, para que quepan la mayoría de los artículos, alinea sus camisetas una al lado de la otra. Esto es exactamente lo que pantalla: bloque en línea está destinado. Estos elementos pueden sentarse uno al lado del otro en la misma línea, así como al lado de pantalla: en línea elementos.
a diferencia de pantalla: en línea elementos, un bloque en línea El elemento se moverá a la siguiente línea si no encaja en su contenido. div junto al otro bloque en línea elementos. Para que una camiseta se derrame en la siguiente fila, deberá cortarla por la mitad y usar la mitad restante para comenzar una nueva fila. Bloque en línea los elementos no pueden dividirse por la mitad si no caben en una línea.
Los calcetines que llenan los huecos
Vuelve al HTML original y notarás que hay un calcetín div> entre las ocho camisetas. Pero eche un vistazo a la vista horizontal de la maleta a la derecha. Si hay un calcetín div>, ¿cómo puede terminar la fila del medio y comenzar la fila inferior? Este es el propsito de pantalla: en línea!
Un en línea El elemento se extenderá a la siguiente línea si excede el ancho del div (de esta manera es diferente de bloque en línea o cuadra). Desde nuestros calcetines div está lleno de calcetines que están metidos al azar en espacios, puede comenzar a llenar fácilmente el espacio en el lado derecho de la fila central y desbordarse para comenzar la fila inferior.
No será necesario cortar los calcetines por la mitad para que esto suceda. Por eso pueden volverse en línea, mientras que las camisetas solo pueden bloque en línea. Si las camisetas de la fila central solo ocupaban el 60 por ciento del ancho, los calcetines div> se movería hacia arriba para llenar todo el espacio en el resto de la fila.
Buen viaje
Este es el CSS final para nuestra maleta:
.delicate {display: block; ancho: 60%; } .tshirt {display: inline-block; ancho: 20%; } .socks {display: inline; }
Aquí hay un par de escenarios alternativos para ilustrar los diferentes usos de la pantalla. Si las delicadas de arriba tuvieran pantalla: bloque en línea, encajarían junto a las camisetas. Algunas de las camisetas subirían a la línea superior y el resto se ajustaría en consecuencia. No habría ningún amortiguador cómodo a la izquierda y a la derecha de la camisa con cuello.
Si cada camiseta tuviera bloqueo de pantalla, tendrías una enorme pila de camisetas una encima de la otra, una por línea. Si los calcetines tuvieran pantalla: bloque en línea, todos se sentarían en la fila inferior en lugar de fluir entre las dos filas. Algunas camisetas se colocarían en otra fila, formando una cuarta línea. Habría un espacio a la derecha de la fila central de camisetas.
Con el método que he descrito aquí, terminamos con una maleta bien empaquetada que aprovecha al máximo el espacio disponible.
Este artículo apareció originalmente en revista neta número 289; Cómpralo aquí!
