Representación de los cuadros (box) CSS
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..
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.
- Logical-top
- Font-top
- Baseline.
- Font-bottom
- 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.
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.
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!CITAR ARTÍCULO
Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos
Referencia en Formato APA:
Delgado, Hugo. (2014).
Representación de los cuadros (box) CSS.
Recuperado 03 de November, 2024, de
https://disenowebakus.net/representacion-de-los-cuadros.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de...
CSS permite liberar los elementos del flujo normal del documento y posicionarlos a voluntad con...
Las hojas de estilo constan de una serie de instrucciones que definen cómo se han de representar...
Existen tres formas para declarar instrucciones CSS al código HTML: dentro del tag (inline), en...
¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
1 Comentario en "Representación de los cuadros (box) CSS"
Artículos destacados
Glosario de términos Diseño Web -Diccionario de programación
Terminología y vocabulario más utilizado sobre Internet en la World Wide Web...
Tablas HTML ejemplos básicos y avanzados - thead tbody tfoot
El tag table permite crear una tabla en HTML. Para definir las filas se utiliza...
Mark Zuckerberg - Creador de Facebook
Mark Zuckerberg es cofundador y director ejecutivo del sitio web de redes...
Listas HTML - Sin orden ul, ordenadas ol y de definición dl
Existen tres tipos de listas en HTML que nos permiten organizar la información:...
Cuadro bloque Los elementos bloque son por ejemplo, el elemento
, el contenedorDeja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información