Manuel Rosa Ramos 24 de julio de 2015 a las 13.47
   Imprimir artículo
elWebmaster.com

HTML5: Tama√Īo y posici√≥n personalizadas con CSS calc()


HTML5_logo_and_wordmark.svgLa propiedad CSS calc() se puede utilizar como un valor para otras propiedades CSS como width, height y top. Permite realizar cálculos con las unidades de medida en CSS Рcomo píxeles, EMS y porcentajes.

La propiedad CSS calc() se puede utilizar como un valor para otras propiedades CSS como width, height y top. Permite realizar cálculos con las unidades de medida en CSS Рcomo píxeles, EMS y porcentajes.

calc() puede ser √ļtil para muchos prop√≥sitos en lo que se refiere al tama√Īo de los objetos, de manera que no es necesario calcular los l√≠mites superior, izquierda, derecha, e ¬†inferiores, o las anchuras y alturas manualmente.

Aquí mostraremos un ejemplo sencillo para ilustrar la propiedad. Lo que hacemos puede lograrse con facilidad y sin calc pero sirve como una ilustración.

Primero a√Īadimos dos recuadros o capas en el cuerpo de la p√°gina HTML.

IM1

Luego, queremos que estos dos recuadros ocupen la p√°gina de forma equitativa el ancho de la p√°gina, es decir, cada recuadro con una anchura del 50% de la p√°gina. Sin embargo, cuando definimos estilos que afectan los m√°rgenes y bordes para estos elementos, no habr√° suficiente espacio en la p√°gina a nivel horizontal ocasionando que el segundo recuadro se vaya a la siguiente l√≠nea. A√Īadiendo calc, podemos entonces restar al ancho de los recuadros lo utilizado para m√°rgenes y bordes.

IM2

Así, ambos elementos podrán ocupar todo el ancho de la página sin ocasionar que el segundo recuadro se desplace a la segunda línea.

IM3

Adicional a calc, podemos incluir la propiedad box-sizing sin ning√ļn problema, que es soportada por casi todos los navegadores.

Esta propiedad admite dos valores: content-box (aplica las propiedades width y height sólo sobre el contenido del elemento, excluyendo el espacio ocupado por margin, padding y border), y border-box (en el que se incluye todo dentro del ancho y alto del elemento). El valor por defecto de la propiedad es content-box.

En el ejemplo definiremos la propiedad box-sizing con el valor border-box, ya que con el otro valor ambos recuadros no estarían en la misma fila.

A continuación, se muestra un ejemplo con el uso de las dos propiedades, calc y box-sizing:

IM4

Como puede verse en la propiedad calc, sólo se resta del 50% definido como ancho, lo que corresponde al margin y padding definidos (multiplicado por dos ya que se considera a la izquierda y derecha del elemento). Como resultado se obtiene que ambos recuadros forman parte de la misma fila, respetando el espacio o ancho asignado.

IM5

La propiedad box-sizing es una de las que deber√≠as usar hoy d√≠a si a√ļn no la utilizas. En cuanto a la propiedad calc, resulta mejor que depender de preprocesadores CSS como Less y Sass por el momento, ya que posee muchos m√°s beneficios que una implementaci√≥n de c√°lculo de las unidades de medida.

Fuente original del artículo: PHPgang

Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder