Visualización de las cajas

1. Propiedades CSS

La principal propiedad CSS de visualización de las cajas es display. Esta propiedad está disponible en la versión CSS 2.1 (http://www.w3.org/TR/CSS2/visuren.html#propdef-display).

He aquí los valores que pueden utilizarse: inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

Esta propiedad display se aborda en un módulo dedicado a las CSS3, el módulo CSS Display Module Level 3 que está en estado Working Draft a 15 de octubre de 2015.

2. Visualización en bloque y en línea

El uso de la propiedad display permite cambiar el comportamiento "normal" de las cajas, con el objetivo de facilitar la maquetación.

Un ejemplo clásico es la creación de una barra de navegación mediante una lista <ul>, donde cada enlace está situado en un elemento <li>. Por defecto, los elementos <li> se muestran en bloque, es decir, uno a continuación del otro. Modificando este comportamiento, puede ubicar los elementos uno al lado del otro para construir una barra de navegación.

He aquí el código HTML sin maquetación CSS:


<!DOCTYPE html>  
<html lang="es">  
<head>  
     <title>Una barra de navegación</title>  
     <meta charset="UTF-8"...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Recortar una caja
Siguiente
Mostrar y ocultar las cajas