CSS: Box Model-display-float-positioning de los elementos
Aprendiendo un poco mas acerca de CSS.
La manera de mostrar la información puede definir el éxito de una aplicación web. Por lo que se hace esencial saber desarrollar layouts con una interfaz que sea sencilla, que se explique por si misma, y sobretodo con buena estética.
En este artículo vamos a conocer algunos conceptos y propiedades de diseño web que nos ayudan a crear excelentes layouts, el primero es:
Box Model
TODO elemento en diseño web es una caja rectangular. Este fue mi momento “ah-ha”, que realmente me ayudo a empezar a entender el diseño web basado en CSS, y lograr desarrollar los diseños que quería. ¿Que quiero decir con esto?. Veamos por que dicen por allí que ¿Una imagen vale mas que mil palabras no?
Veamos como se calcula el tamaño de la caja exactamente.
- Cada elemento tiene un tamaño de alto y ancho en su contenido(azul en el diagrama).
- Padding - Limpia una area alrededor del contenido. El padding es transparente
- Border - Es un simple borde que va alrededor del padding y el contenido.
- El Margin(naranja en el diagrama) es el único que no afecta el tamaño de la caja como tal, sin embargo, afecta otro contenido que esté interactuando con la caja, y esto sin duda es una parte importante del CSS box Model.
¿Como se calcula el alto y ancho de un elemento?
Al definir el height o el width de un elemento, solo estamos definiendo el tamaño de su contenido, para calcular su tamaño total, debes sumarle el tamaño de los paddings, margins y borders.
El ancho se calcula con la suma de estos atributos: width + padding-left + padding-right + border-left + border-right + left margin + right margin.
El alto se calcula con la suma de estos atributos: height + padding-top + padding-bottom + border-top + border-bottom + top margin + bottom margin.
¿Que ocurre si estos valores no son declarados?
Si el padding, border o margin no están declarados, hay dos opciones: estos son definidos con valores por defecto por el browser o están en cero(lo mas seguro es que estés usando alguna técnica de reinicio de CSS).
Hablando de ello, ¿Porque esto es importante?.
Básicamente un reinicio de CSS remueve los estilos por defecto de los elementos de la página, de esta manera puedes empezar a maquetar solo con los atributos que tu elijas aplicar.
Esto es importante por dos motivos principalmente:
- Te aseguras que tu aplicación luce igual en todos los diferentes navegadores.
- Te permite dar estética pensando en añadir atributos en vez de tener que remover atributos de los diferentes elementos de tu sitio web.
Si quieres conocer mas acerca de esto, puedes hacerlo acá. Personalmente utilizo el CSS reset propuesto por Eric Meyers al ser muy conocido en la web, además de ser de libre uso.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{ margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
} ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
} table {
border-collapse: collapse;
border-spacing: 0;
}
Propiedad Display
Como hablamos hace un rato, cada elemento en una aplicación web es una caja rectangular. La propiedad display en CSS, solo determina como dicha caja se va a comportar. Hay solo algunos valores de esta propiedad que son utilizados comúnmente:
div { display: inline; /* Default de cada elemento HTML*/ display: inline-block; /* Caracteristicas de block, pero se comporta como inline */ display: block; /* El browser coloca algunos elementos como block */
display: none; /* Esconder el elemento */ }
Block
Un elemento de nivel de bloque siempre inicia en una nueva linea y toma el ancho total disponible (Se agranda a la izquierda y derecha tanto como pueda). Algunos de ellos son: <div>,<h1> — <h6>, <p>, <form, <header>, <footer> y <section>.
Inline
Un elemento en linea no inicia en una nueva linea y solo toma el ancho que necesite. Algunos de ellos son: <span>, <a>, <img>
Inline-Block
La principal diferencia con inline, es que te permite setear un tamaño(width y height) específico al elemento, además, el elemento respeta los margenes y paddings de los otros elementos.
La principal diferencia con block es que no obliga al elemento a ir a la siguiente linea, de esta manera el elemento puede estar al lado de otros.
Display: None
display: none; es comúnmente utilizado con JavaScript para esconder y mostrar elementos sin borrarlos y crearlos de nuevo.
Propiedad Float
La propiedad float en CSS es utilizada para el posicionamiento y el diseño de los sitios webs. Por ejemplo, dejar una imagen flotar a la izquierda del texto en un container.
Para entender su propósito y origen, podemos mirar el diseño de una impresión, En un diseño de una impresión, las imagenes podrian estar ubicadas, de tal manera que el texto se ubica alrededor de ellas como sea necesario.
En diseño web este comportamiento puede ocurrir exactamente igual.
En la web, float puede ser usado para crear diseños de una web enteros:
Sin embargo, para dicha utilidad, existen algunas herramientas que hoy en día son mas utilizadas(flex, grid).
Posibles valores:
- none: El elemento no flota. Este es el valor inicial
- left: El elemento flota a la izquierda de su container
- right: El elemento flota a la derecha de su container
Positioning
La propiedad position especifica el tipo de método de posicionamiento utilizado por un elemento (static, relative, fixed, absolute o sticky).
Los elementos son posicionados en el top, bottom, left y right. Sin embargo, estas propiedades no van a funcionar a no ser que la propiedad position haya sido definida. Además cada uno de estos valores va a cambiar el comportamiento del elemento.
Static
Los elementos HTML son posicionados static por defecto. Al tener este valor, no son afectados por top, bottom, left o right.
div.static {
position: static;
border: 3px solid #73AD21;
}
Relative
Un elemento con position: relative; es posicionado relativo a su posición normal.
Configurando el top, right, bottom o left, va a causar que el elemento sea ajustado con respecto a su posición normal. Otro contenido no va a ser ajustado para rellenar el espacio que queda.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
En este ejemplo, el elemento se posiciona 30 px de diferencia izquierda con su propia posición.
Fixed
Un elemento con position: fixed; es posicionado relativo al viewport, lo cual significa que siempre se va a quedar en el mismo lugar, incluso si la pagina es “scrolleada”.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
En este ejemplo el elemento, se ubica con nada de diferencia del bottom y el right de la posición del viewport, y siempre va quedarse allí, incluso cuando el usuario baje a otra sección.
Configurando el top, right, bottom o left, va a causar que el elemento sea ajustado con respecto a su posición normal. Otro contenido no va a ser ajustado para rellenar el espacio que queda.
Absolute
Un elemento con position: absolute; es posicionado relativo a su “antecesor” posicionado mas cercano. Esto quiere decir que si un elemento con absolute no tiene antecesores con “relative” asignado, este va a utilizar a body como su referencia de movimiento.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Sticky
Un elemento con position: sticky; es posicionado basado en la posición del scroll del usuario.
Un elemento con sticky, cambia su position entre relative y fixed, dependiendo de la posición del scroll. Es posicionado relative hasta que el usuario empiece a moverse a diferentes secciones de la pagina web, en cuyo caso se comporta como fixed.
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
z-index
Cuando los elemento son posicionados, estos pueden sobreponerse unos sobre otros.
La propiedad z-index, especifica el orden de pila de un elemento(cual elemento debería colocarse de frente, detrás de otros).
img {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 140px;
z-index: -1;
}
Estos valores podrían incluso ser negativos, en caso de necesitarse.
Recomendaciones finales
Luego de conocer diferentes algunos conceptos y propiedades CSS que nos permiten maquetar sitios webs con mayor flexibilidad, te invito a que practiques cada uno de ellos. Ya que esto es lo esencial para poder utilizarlos de manera correcta.
