Entendiendo la propiedad de pantalla CSS

Jan 25, 2026

Cómo

[dieciséis]

Es medianoche, y ese div En su sitio todavía se parece al cofre de juguete de un niño. Todos los elementos son un desastre jumbido, y cada vez que juegas con CSS 's mostrar Propiedad, se reorganizan en un poco de tonterías completamente diferentes.

Si eres como yo, probablemente resolverá esto murmurando bajo la respiración y convertirá de manera consistente más agresiva con su teclado. Y aunque esa estrategia ha funcionado para mí antes, recientemente me propuse encontrar una mejor manera de entender el mostrar propiedad.

Resulta lo básico de mostrar Son mucho más simples de lo que pensé originalmente. De hecho, usan los mismos principios que empacar una maleta. Voy a cubrir bloqueo de pantalla De bloque en línea y en línea . Si ha arreglado una maleta de manera ordenada, verá el paralelo. Si usted es el tipo de persona que relieve toda su ropa de una manera al azar, bueno, solo hay tanto que puedo hacer por usted.

Nuestra maleta contendrá tres tipos de ropa:

Delicates, como una camisa de cuello.
Camisetas que se pueden enrollar
Calcetines o ropa interior que se pueden rellenar en huecos.

Para referencia, si modelamos la maleta en HTML, se vería así:

 & lt; div clase = 'maleta' & gt;
    & lt; div clase = 'delicado' & gt; & lt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'calcetines' & gt; & lt; / DIV & GT;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
    & lt; div clase = 'tshirt' & gt; / div & gt;
& lt; / DIV & GT;

Los artículos delicados en la parte superior

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer

Bloqueo de pantalla es el valor 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á al lado de otros elementos de hermanos, comenzará una nueva línea, y no permitirá otros elementos en su línea. Es similar a los delicados elementos que pones en la parte superior de tu maleta. Estos son artículos delicados o inteligentes, como camisas de cuello. No quieres que sean arrugados, para asegurarse de que no sean empujados contra otras piezas de ropa.

Esto trae una de las partes más difíciles de bloqueo de pantalla . Observe cómo la camisa collares no ocupa todo el ancho de la maleta. Eso no significa que otros artículos saltarán a su nivel. Digamos que esta camisa es del 60 por ciento del ancho de la maleta; Sendería que otros elementos se unirían a él en el nivel superior.

Es por eso que hay un borde naranja en la imagen. A bloqueo de pantalla Elemento agregará automáticamente un margen a su alrededor si no ocupa todo el espacio horizontal.

Camisetas cuidadosamente empacadas

Here we can see the top and bottom rows of T-shirts, with four shirts in each

La mayor parte de su maleta está probablemente llena del resto de su ropa para su viaje. Por el bien de la simplicidad, vamos a reducir esto a solo camisetas. Hay un gran debate en Internet sobre si el plegado o el rodamiento es más eficiente. Soy un tipo de persona plegable.

De todos modos, para adaptarse a la mayoría de los artículos, alineas tus camisetas de lado a lado. Esto es exactamente lo que Pantalla: bloque en línea está destinado para. 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 Elemento se moverá a la siguiente línea si no encaja en su contenido. div junto a la otra bloque en línea elementos. Para tener un derrame de camiseta en la siguiente fila, deberías cortarlo por la mitad y usar la mitad restante para iniciar una nueva fila. Bloque en línea Los elementos no se les permite dividir a la mitad si no caben en una línea.

Los calcetines que rellenan las brechas.

The socks are inline elements, which means they will fill the gaps around the T-shirts

Vuelve a la HTML original y notará que hay un calcetín & lt; div & gt; Entre las ocho camisetas. Pero eche un vistazo a la vista horizontal de la maleta a la derecha. Si hay un calcetines & lt; div & gt; ¿Cómo puede terminar la fila media y comenzar la fila inferior? Este es el propósito de Pantalla: En línea !

Un en línea Elemento se derramará a la siguiente línea si excede el ancho de la div (De esta manera es diferente de bloque en línea o cuadra ). Desde nuestros calcetines div está lleno de calcetines que se rellenan al azar en huecos, puede comenzar fácilmente a llenar el espacio en el lado derecho de la fila media y derrame para comenzar la fila inferior.

Ningún calcetín deberá ser cortado por la mitad para que esto suceda. Por eso pueden convertirse en en línea , mientras que las camisetas solo pueden ser bloque en línea . Si las camisetas de la fila media solo tomaron el 60 por ciento del ancho, los calcetines & lt; div & gt; Se movería para llenar todo el espacio en el resto de la fila.

Buen viaje

Este es el CSS final para nuestra maleta:

 .Delicate {
    bloqueo de pantalla;
    Ancho: 60%;
}

.camiseta de manga corta{
    Pantalla: bloque en línea;
    Ancho: 20%;
}

.medias{
    Pantalla: Inline;
}

Aquí hay un par de escenarios alternativos para ilustrar los diferentes usos de la pantalla. Si los delicados en la parte superior tuvieron Pantalla: bloque en línea , encajarían justo al lado de las camisetas. Algunas de las camisetas se moverían hasta la línea superior, y el resto se ajustaría en consecuencia. No habría un amortiguador cómodo a la izquierda y a la derecha de la camisa collar.

Si cada camiseta tuviera bloqueo de pantalla , tendrías una pila masiva de camisetas una encima de la otra, una por línea. Si los calcetines tenían Pantalla: bloque en línea Todos se sentarían en la fila inferior en lugar de fluir entre las dos filas. Algunas camisetas serían empujadas a otra fila, formando una cuarta línea. Habría una brecha a la derecha de la fila media de camisetas.

Con el método que he descrito aquí, terminamos con una maleta cuidadosamente empacada que hace el mejor uso del espacio disponible.

Este artículo apareció originalmente en revista neta emisión 289; cómpralo aquí !

Artículos relacionados:

5 de los mejores recursos para aprender HTML y CSS.
Construir diseños complejos con POSTCSS-FLEXBOX
28 Ejemplos sobresalientes de CSS

Entendiendo la propiedad de pantalla CSS

Los artículos delicados en la parte superior

Camisetas cuidadosamente empacadas

Los calcetines que rellenan las brechas.

Buen viaje

Cómo - Artículos más populares

Cómo usar el almacenamiento en la nube como creativo

Entiende el procesamiento de lenguaje natural

Mantenga el control de la versión perfecta con abstracto

Cómo crear un monstruo de estilo laberinto de PAN

Pinte una escena de cuento de hadas clásico con procrear

4 sencillos pasos para mejorar su render

Cómo usar herramientas digitales para crear una mirada dibujada a mano

Construye una interfaz MAYA personalizada

Categorías