Programación Web » Aprender CSS » Unidad 1. Aprender CSS:

Representación de los cuadros (box)

Visto: 455

css

Cuadro bloque

Los elementos bloque son por ejemplo, el elemento <body>, el contenedor <div>, lo párrafos, las listas, y tablas.

Cada cuadro bloque empieza en una línea nueva y ocupa generalmente todo el ancho disponible. Eso significa que, en el flujo de texto, siempre quedan ordenados uno debajo de otro. La altura se regula según el contenido. Estos cuadros sólo pueden ser descendientes de otros elementos bloque.

Algunos de los elementos bloque más típicos son:

Address, bloquote, dir, div, dl, fieldset, form, hx, hr, menu, noframes, noscript, ol, p, pre, table, ul.

Cuadros inline

Los cuadros inline no precisan una línea nueva antes o después del elemento. Dentro del flujo normal de texto siempre aparecen ordenados uno junto al otro, sin márgenes respecto a los elementos contiguos, no se les puede asignar dimensiones y sólo ocupan el lugar necesario para su contenido. Pueden ser elementos hijo de cualquier otro elemento bloque o inline y pueden contener otros elementos inline.

Algunos elementos inline típicos:

a, abbr, acronym, applet, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, textarea, tt, var.

Modelo de cuadro inline.

Los elementos inline tienen su propio modelo cuadro, el cual consta de un cuadro line y un cuadro inline. Es un modelo bastante complicado y poco madura aún.

Cuadro line

Es el cuadro propiamente dicho y contiene todas las líneas. Verticalmente se extiende desde el cuadro inline alineado más arriba hasta el lado inferior del cuadro inline situado más abajo.

Cuadro inline

Cada trozo de texto genera un cuadro inline. Hay cinco líneas horizontales básicas que influyen en el cuadro inline.

Imagnes página 56

  1. Logical-top
  2. Font-top
  3. Baseline.
  4. Font-bottom
  5. Logical-bottom

La diferencia entre Font-top y Font-bottom viene definida por la altura de la fuente, la distancia entre logical-top y logical-bottom viene determinada por la propiedad line-height. El valor de lline-height siempre determina, por tanto, la altura del cuadro inline de cualquier parte de texto.

Para las partes de texto distintas (por ejemplo, definidas con mayor altura o ampliadas) se calcula un cuadro inline propio. El cuadro line queda definido una vez calculados y ordenador todos los cuadros inline.

Imagen página 56

Los navegadores antiguos y también IE, en sus diferentes versiones, interpretan algunos formatos y el salto de línea dentro del cuadro de maneras muy diferentes, por lo que es imprescindible probarlos a fondo.

Artículos de navegación

Acerca del Profesor

Adrián Delgado Rodríguez

Ingeniero en Computación, docente por convicción y apasionado por la programación Web.

Actualmente trabaja como Profesor para en el Centro Universitario de la Costa de la Universidad de Guadalajara y como Desarrollador Web.

Síguenos:

 

Ver el perfil completo de Hugo Adrián Delgado Rodríguez (akus.net).

Deja un comentario

avatar comentario
Jose
Cuadro bloque Los elementos bloque son por ejemplo, el elemento , el contenedor
, lo párrafos, las listas, y tablas.




Diseño de páginas Web en Puerto Vallarta y Bahía de Banderas akus.net
subir

Síguenos en Facebook

Artículo de la semana

Cómo iniciar una página WebMetodología para la creación de sitios

Comprende las fases de Análisis, Planificación, Contenido, Diseño. ¿Qué método utilizas?