CSS
Son estilos en cascada porque los estilos se aplican de arriba a abajo y, en caso de existir ambigüedad, siguen una serie de normas para resolverla.
Gracias a CSS podemos llevar a cabo el concepto de separación de presentación (diseño, colores, formas - CSS) y contenido (información y datos - HTML).
Espaciado CSS
Así se ve el modelo caja en el inspector de cada navegador (derecha: Chrome, izquierda: Firefox):
- Padding: entre elemento y elementos internos
- Margin: entre elemento y elementos externos
Ejemplo:
.warning {
padding-top: 100px; /* este no aplica,
porque el siguiente lo sobreescribe */
padding: 50px;
}
Los márgenes entre elementos del mismo nivel no se suman, sino que se queda el mayor. Con los paddings sí se suman (son una propiedad interna de la caja).
Recomendación: usar por lo general padding-bottom. Sobre todo mantener un mismo criterio.
Box-sizing
div {
box-sizing: content-box;
height: 200px;
width: 300px; /* width aplica al contenido */
}
Content-box se rompe fácil intentando restar píxeles de margen al % de width.
div {
box-sizing: border-box;
height: 200px;
width: 300px; /* width aplica al margen */
}
Content-box se rompe fácil intentando restar píxeles de margen al % de width.
.page_container {
margin: 0 auto;
}
Recursos habituales
Cascada y herencia
- En igualdad de condiciones, gana lo que está escrito después en el CSS.
- Los hijos heredan estilos del padre. No ocurre con todas las propiedades: No ocurre con border, margins, padding, ... Sí ocurre con color, font, ...
- Se puede forzar la herencia asignando el valor inherit a la propiedad que queremos que aplique:
background-color: inherit;
Clases de utilidad
Nos ayudan a separar responsabilidades (ej.: estilos visuales y estilos de layout).
.margin-bottom-s {
margin-bottom: 12px;
}
Flexbox
#pond { display: flex; }
Al asignarles el tipo flex a los divs, pasan a ocupar solo lo que su contenido necesita.
Posible solución: usar media queries o:
.card_content {
width: 300px;
flex-grow: 1;
}