Modelo de Caja
Para el navegador, cada texto, imagen y en general cada elemento HTML se muestra como una caja rectangular. El modelo de caja describe la forma en que CSS maneja el tamaño y espaciado de los elementos HTML. Hay 5 propiedades que conforman el modelo de caja, el ancho, el alto, el relleno, el borde y la margen.
Unidades de medida
CSS soporta muchos sistemas de medidas, tanto para pantallas como para impresión física. Estos sistemas están divididos en Absolutos y Relativos. La unidad de medida más común para los valores absolutos es el pixel y la unidad de medida más común para los valores relativos es el porcentaje. Cada una de las características del modelo de caja las podemos manejar por medio de estos valores. Se debe tener en cuenta que para usar pixeles se debe usar el sufijo px y para usar porcentajes el sufijo %
width: 30px; ó width: 50%;
Herramientas de desarrollo del navegador
Los navegadores modernos incluyen herramientas que permiten a los desarrolladores y diseñadores evidenciar las características del modelo de caja.
Firefox:
MEnu>Desarrollo Web> Inspector
ALt+SHIFT+C
Click derecho > Inspeccionar elemento
El Modelo de Tamaño
El tamaño de un elemento HTML como ya hemos visto se puede definir usando las propiedades ‘width’ y ‘height’. Para el modelo de caja tradicional, el cual es el que los navegadores usan de manera predeterminada, este width y height equivale a la sumatoria de las propiedades de caja: contenido + padding + border + margin.
En la web moderna se usa un modelo de tamaño que permite intuir de mejor manera cual es el tamaño total de los elementos, de manera que para los diseñadores sea más práctico definir las dimensiones y relaciones de los elementos.
elemento{
box-sizing: border-box;
}
Y para que esto funcione de manera global:
*{
box-sizing: border-box;
}
Ancho y Alto de las Cajas
Flujo Natural
Los elementos HTML se posicionan y organizan de manera predeterminada apilados uno encima del otro y ocupando todo el ancho del contenedor que en este caso es el elemento body.
Las primeras dos propiedades del modelo de caja corresponden al ancho ‘width’ y al alto ‘height’ de la caja. Colocando un valor a estas propiedades por medio de CSS se empieza a manipular la relación de cada caja las cajas cercanas y se cambia el flujo natural.
h1{
Width: 300px;
height: 200px;
}
p{
Width: 40%;
height: 200px;
}
Contenedor de Contenidos y Alineación
Para cambiar el flujo natural de un documento HTML en el navegador, se usa un contenedor, un elemento HTML que permitirá contener los demás elementos y alinearse de la forma en que el diseño lo requiera, al centro, a la derecha o a la izquierda. Lo mas común es usar un elemento div, que si recuerdan es un elemento genérico y se usa especialmente para diagramación de contenidos.
<body>
<div>
<!-- Contenido del document HTLM -->
</div>
</body>
Las reglas CSS para que este div actue como contenedor serán las siguientes:
div{
Width: 1200px;
Margin: 0 auto;
}
Márgenes
Las márgenes permiten adicionar o remover espacio alrededor del elemento, definiendo el espacio entre elementos.
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
Existe un método de colocar valores a las márgenes de acuerdo a las necesidades específicas, esto se conoce como ‘shorthand’
margin: 2px; // coloca el valor a todos los lados
margin: 2px 10px; // el primer valor para arriba y abajo, y el Segundo para derecha e izquierda
margin: 2px 10px 5px; // el primero para arriba, el segundo derecha e izquierda y el tercero abajo
margin: 2px 2px 2px 2px; // como las manecillas del reloj arriba, derecha, abajo, izquierda
Relleno
Las propiedades de relleno (padding) permiten adicionar o remover espacio alrededor del contenido, texto, imagen… del elemento.
padding-top: 2px;
padding -right: 2px;
padding -bottom: 2px;
padding -left: 2px;
Existe un método de colocar valores al relleno de acuerdo a las necesidades específicas, esto se conoce como ‘shorthand’
padding: 2px; // coloca el valor a todos los lados
padding: 2px 10px; // el primer valor para arriba y abajo, y el Segundo para derecha e izquierda
padding: 2px 10px 5px; // el primero para arriba, el segundo derecha e izquierda y el tercero abajo
padding: 2px 2px 2px 2px; // como las manecillas del reloj arriba, derecha, abajo, izquierda
Bordes
Todos los elementos HTML permiten que se les asigne un borde visual, de manera predeterminada la mayoría de los elementos no tienen asignado un borde. El borde se define por medio de tres propiedades, el ancho del borde (‘border-width’), el estilo del borde (‘border-style’) y el color del borde (‘border-color’).
border-color: red;
border-style: dotted;
border-width: 1px;
Existe un método de colocar valores a los bordes de acuerdo a las necesidades específicas, esto se conoce como ‘shorthand’
border: solid;
border: 2px dotted;
border: outset #f33;
border: medium dashed green;
también es posible colocar bordes solo a sectores específicos
border-bottom-color: red;
border-bottom-style: dotted;
border-bottom-width: 1px;
Bordes Redondeados
En CSS3 ahora es posible asignar bordes redondeados a los elementos HTML. Se usa las mismas características de aplicación de las márgenes y el padding, colocando distintos valores para cada juego de esquinas.
border-radius: 10px;
border-radius: 10px 5%;
border-radius: 2px 4px 2px;
border-radius: 1px 0 3px 4px;
también se pueden colocar valores específicos
border-top-left-radius: 4px;
border-top-right-radius: 3px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 3px;
Deja una respuesta