CSS3 07 Tipos de Elementos

 CSS3 07 Tipos de Elementos

Cada etiqueta HTML tiene una representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos:

Obsérvese que por defecto, todos los elementos <div> son elementos de bloque (block) y todos los elementos <span> son elementos en línea (inline). Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas <div> como las siguientes:

    <div>Elemento 1</div>

    <div>Elemento 2</div>

    <div>Elemento 3</div>

A estas etiquetas HTML le vamos a aplicar el siguiente código CSS:

div {

    background: blue;

    color: white;

    margin: 1px;

}

Con esto observaremos que en nuestro navegador nos aparecen 3 cajas azules colocadas en vertical (una debajo de otra) que cubren todo el ancho disponible de la página. Esto ocurre porque la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, que tiene un tipo de representación block por defecto. Cada etiqueta HTML tiene un tipo de representación concreta.

Sin embargo, este comportamiento de elementos puede cambiarse con la propiedad CSS display. Tan sencillo como añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal (una al lado de la otra) que cubren sólo el ancho del contenido de cada una. Ahora los <div> de esa página son elementos en línea (el tipo de representación visual que tienen los <span>).

Otros tipos de elementos

A medida que vamos cambiando el tipo de representación de estos elementos, nos damos cuenta que es insuficiente para realizar tareas y vamos necesitando más tipos de caja. Vamos a rellenar un poco más la tabla, con las características más importantes de las opciones que puede tomar la propiedad CSS display:

Ocultar elementos

Existe un truco bastante interesante para ocultar elementos con CSS. Mediante la mencionada propiedad display podemos aplicar un valor none y ocultar completamente elementos que no queramos que se muestren, los cuales desaparecen por completo. Es muy útil para hacer desaparecer información cuando el usuario realiza alguna acción, por ejemplo.

Tipo de caja        Características

    none                Hace desaparecer visualmente el elemento, como si no existiera.

No obstante, también existe una propiedad CSS llamada visibility que realiza la misma acción, con la ligera diferencia de que no sólo oculta el elemento, sino que además mantiene un vacío con el mismo tamaño de lo que antes estaba ahí.

Dicha propiedad visibility tiene las siguientes opciones:

Ojo: Utilizar visibility:hidden es muy interesante si queremos que un elemento y su contenido se vuelva invisible, pero siga ocupando su espacio y así evitar que los elementos que le sigan se desplacen hacia arriba, lo que suele ser un comportamiento no deseado en algunos casos.