Aspectos básicos del diseño
Las propiedades de medida y ubicación están disponibles a través de las propiedades de la hoja de estilos en cascada y el modelo DOM (Document Object Model) DHTML. Puede usar las propiedades del modelo DOM DHTML para establecer las propiedades de la hoja de estilos en cascada mediante programación. Las propiedades expuestas a través del modelo DOM DHTML devuelven valores basados en el modo en que un elemento se representa en el documento. Las propiedades de hoja de estilos en cascada devuelven valores basados en los valores preestablecidos de otras propiedades de hoja de estilos en cascada.
El cuadro de elemento
Todos los elementos visibles en una página web ocupan una cantidad de espacio absoluta en el documento. La cantidad de espacio que ocupa un elemento está definida por el rectángulo o cuadro del elemento. Un rectángulo de elemento incluye todas las propiedades de diseño y presentación además del contenido.
En el gráfico anterior, las propiedades margin, border y padding se muestran rodeando el contenido de un elemento genérico. "Element Width" representa el ancho del contenido del elemento y "Box Width" representa el ancho del contenido más el espacio adicional que ocupan las propiedades de diseño. El alto de un elemento y sus propiedades de diseño se pueden representan de forma similar.
Comparación de elementos de bloque y elementos en línea
Todos los elementos HTML visibles se muestran en bloques o en línea. Un elemento de bloque, como un elemento DIV, suele comenzar una línea nueva y su tamaño se ajusta en función del ancho del contenedor primario. Un elemento en línea, como un elemento SPAN, no suele comenzar una línea nueva y su tamaño se ajusta en función del alto y ancho de su propio contenido.
Tamaño, diseño y ubicación de los elementos
Un elemento tiene un diseño cuando se cumplen una de las siguientes condiciones:
Tiene especificado un ancho, un alto o ambos.
Es un elemento en línea-bloque (display: inline-block).
Tiene un posicionamiento absoluto (position: absolute).
Es un elemento flotante (float: left, float: right).
Es un elemento table.
Se transforma (style="zoom: 1").
Casi todos los elementos en línea y de bloque tienen diseño. La excepción es un elemento en línea que no esté posicionado ni tenga especificado su alto o ancho.
Un elemento posicionado tiene medidas específicas y se puede establecer en una ubicación con las propiedades de diseño de hoja de estilos en cascada: top, right, left y bottom. La ubicación de los elementos no posicionados es relativa a su antecesor más próximo que tenga un diseño. La ubicación resulta útil al mover uno o más elementos a coordenadas relativas o absolutas dentro del documento. También puede ser útil para crear estilos de documento específicos.