Cómo se coloca cada caja en el flujo (bloque, en línea, flex, grid), si se ve y qué pasa con lo que no cabe.
display: El tipo de caja.
overflow: Qué pasa con el contenido que no cabe en la caja.
Cómo se coloca cada caja en el flujo (bloque, en línea, flex, grid), si se ve y qué pasa con lo que no cabe.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El tipo de caja. block ocupa todo el ancho y empieza línea; inline va dentro de la línea y no admite ancho ni alto; inline-block, en línea pero con tamaño; flex y grid convierten sus hijos en elementos flexibles o de rejilla; none lo quita de la página.
Valores: block, inline, inline-block, flex, grid, inline-flex, contents, none
Oculta el elemento pero deja su hueco (a diferencia de display: none).
Valores: visible, hidden, collapse
Esencial. Qué pasa con el contenido que no cabe en la caja: se ve, se corta o aparece una barra de desplazamiento. Por eje: overflow-x, overflow-y.
Valores: visible, hidden, auto, scroll, clip
Saca la caja del flujo y la pega a un lado para que el texto la rodee (una imagen en un artículo). Para maquetar, hoy se usa flex o grid.
Valores: left, right, none, inline-start
Hace que la caja empiece debajo de los elementos flotantes anteriores.
Valores: left, right, both, none
Con auto, el navegador no dibuja lo que está fuera de la pantalla hasta que te acercas: acelera páginas muy largas.
Valores: visible, auto, hidden
Avisa al navegador de que lo de dentro de la caja no afecta a lo de fuera, para que calcule menos.
Valores: none, layout, paint, content, strict
Cómo se coloca cada caja en el flujo (bloque, en línea, flex, grid), si se ve y qué pasa con lo que no cabe.
Código del tema: .caja { display: inline-block; width: 6rem; text-align: cent
Cómo se coloca cada caja en el flujo (bloque, en línea, flex, grid), si se ve y qué pasa con lo que no cabe.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El tipo de caja. block ocupa todo el ancho y empieza línea; inline va dentro de la línea y no admite ancho ni alto; inline-block, en línea pero con tamaño; flex y grid convierten sus hijos en elementos flexibles o de rejilla; none lo quita de la página.
Valores: block, inline, inline-block, flex, grid, inline-flex, contents, none
Oculta el elemento pero deja su hueco (a diferencia de display: none).
Valores: visible, hidden, collapse
Esencial. Qué pasa con el contenido que no cabe en la caja: se ve, se corta o aparece una barra de desplazamiento. Por eje: overflow-x, overflow-y.
Valores: visible, hidden, auto, scroll, clip
Saca la caja del flujo y la pega a un lado para que el texto la rodee (una imagen en un artículo). Para maquetar, hoy se usa flex o grid.
Valores: left, right, none, inline-start
Hace que la caja empiece debajo de los elementos flotantes anteriores.
Valores: left, right, both, none
Con auto, el navegador no dibuja lo que está fuera de la pantalla hasta que te acercas: acelera páginas muy largas.
Valores: visible, auto, hidden
Avisa al navegador de que lo de dentro de la caja no afecta a lo de fuera, para que calcule menos.
Valores: none, layout, paint, content, strict