Visualización y flujo normal
Deja tres párrafos y un par de enlaces en una página sin ningún CSS y aún se distribuyen solos: los párrafos se apilan hacia abajo en la página, los enlaces se sientan dentro del texto donde los escribiste. Nadie le dijo al navegador que hiciera eso. Antes de que escribas una sola regla de diseño, ya existe un diseño, y cada técnica que utilices después es un cambio a ese diseño en lugar de comenzar desde cero. Este capítulo trata sobre ese punto de partida y la única propiedad que lo controla.
Flujo normal
Cuando un navegador diseña una página sin tu propio CSS de diseño, utiliza flujo normal: la forma predeterminada en que se distribuyen los elementos. Las cosas de bloque como los párrafos y encabezados se apilan de arriba hacia abajo, cada una en su propia línea. El texto y los enlaces corren dentro de una línea, de izquierda a derecha, ajustándose a la siguiente línea cuando se quedan sin espacio.
Ya has conocido las piezas que fluyen alrededor: este capítulo se basa en el modelo de caja, porque son esas cajas las que fluyen. El flujo normal vale la pena nombrarlo porque todo lo demás en el diseño se define contra él. Flexbox, grid y posicionamiento son todas formas de decir "distribuye estos de forma diferente al predeterminado", así que conocer el predeterminado es lo que hace que los cambios tengan sentido.
Cajas de bloque y cajas inline
Los elementos vienen en dos sabores principales en flujo normal. Una caja de bloque toma el ancho completo de su contenedor y se apila en su propia línea, empujando el siguiente elemento hacia abajo. Un párrafo <p>, un encabezado <h1> y un <div> son todos bloques, que es por qué se alinean uno debajo del otro.
Una caja inline es diferente. Se sienta dentro de una línea de texto y toma solo el espacio que su contenido necesita, así que varios pueden compartir una línea. Un <span> o un enlace <a> es inline, que es por qué un enlace dentro de una oración se mantiene en el flujo de las palabras en lugar de saltar a su propia línea.
<p>Este párrafo es un bloque, así que se sienta en su propia línea.</p>
<p>Lee el <a href="/css/box-model">modelo de caja</a> para más.</p>
<!-- el enlace es inline, así que se mantiene dentro de la oración --><p> y <div> toman el ancho completo y se apilan en sus propias líneas. Las cajas inline como <span> y <a> se sientan dentro de una línea y toman solo el espacio que necesitan. Por eso un enlace se mantiene dentro de tu oración en lugar de romper a su propia fila. La propiedad display
Cada elemento tiene un tipo predeterminado, bloque o inline, pero no estás atrapado con eso. La propiedad display te permite cambiar cuál se comporta un elemento. Establece display: block en un enlace y ahora toma su propia línea; establece display: inline en un elemento de lista y se sienta en una fila.
Hay un tercer valor que resuelve un problema común: display: inline-block. Fluye en la línea como una caja inline, pero acepta un ancho, una altura y relleno vertical como un bloque. Eso es lo que quieres para algo como un botón o una pastilla de navegación que debe sentarse al lado de sus vecinos pero aún tomar un tamaño establecido.
.nav-link {
display: inline-block; /* fluye en la línea, pero acepta width y padding */
padding: 8px 16px; /* el relleno vertical ahora funciona, a diferencia del inline simple */
}display cambia si un elemento se comporta como un bloque o como una caja inline. block toma su propia línea, inline se sienta en la línea de texto. La opción intermedia útil es inline-block, que fluye en la línea pero aún acepta un ancho y relleno, así que es lo que quieres para botones y enlaces de navegación. Ocultando cosas: display none versus visibility hidden
A veces necesitas que un elemento no se muestre. Hay dos formas, y se comportan diferente. display: none elimina el elemento por completo: desaparece y no deja brecha, como si no estuviera en la página en absoluto. visibility: hidden lo hace invisible pero mantiene su espacio, así que hay un agujero vacío donde solía estar.
Cuál quieres depende de si quieres el espacio de vuelta. Usa display: none para soltar algo por completo, como un menú que está cerrado. Usa visibility: hidden cuando quieras ocultar algo sin que el diseño se salte, porque su caja se mantiene reservada.
.closed-menu {
display: none; /* desaparecido, y sin brecha dejada */
}
.placeholder {
visibility: hidden; /* invisible, pero aún ocupa su espacio */
}display: none elimina el elemento y no deja brecha, visibility: hidden lo hace invisible pero mantiene su espacio. Elige display: none cuando quieras que el espacio desaparezca también, como un menú cerrado. Elige visibility: hidden cuando no quieras que el diseño se salte. Cómo display cambia el diseño interno
Has visto display cambiar un elemento entre bloque e inline. Hace más que eso en el extremo más profundo. La misma propiedad es lo que convierte un contenedor en un flexbox o una cuadrícula, que son las dos herramientas modernas para distribuir hijos en filas y columnas. Por ahora, lo que debes recordar es que display es el único dial que decide cómo una caja se distribuye y cómo sus hijos se distribuyen dentro de ella.
El diseño no es un gran interruptor que gires una sola vez. Cambias display en los contenedores específicos que necesitan una distribución diferente, y todo lo que dejas solo se mantiene en flujo normal. Los capítulos de flexbox y posicionamiento continúan desde aquí.
display que cambia bloque e inline es también lo que convierte un contenedor en un flexbox o una cuadrícula para distribuir hijos. El diseño no es un interruptor que giras una sola vez; cambias display en los contenedores que lo necesitan y dejas el resto en flujo normal. Los capítulos de flexbox y posicionamiento continúan desde aquí.