Cargando

Ir a contenido


 


HTML5 - Sizing

En este tutorial veremos un poco más sobre cómo controlar los tamaños de los elementos en nuestras páginas usando algunas de las reglas de CSS que nos ayudan a controlar nuestra disposición en el HTML5.


Escrito por el may 12 2014 18:12 html5


Los navegadores web como Firefox, Chrome, Safari, Opera, etc. Todos ellos siguen reglas sobre como re-dimensionar los elementos dependiendo del flujo y del layout de la página, estás reglas pueden ser muy detalladas tal vez, pero es lo que nos permite especificar como deben tratar los elementos de forma que los tamaños siempre se mantengan en proporción a lo que queremos de ellos.

Propiedades de tamaño


Existen unas propiedades de tamaño que nos permiten indicarle al navegador como debe interpretar nuestros elementos, veamos un listado de ellas antes de pasar a su aplicación:

Width/Height: Configuran el ancho y el alto de un elemento, los valores que puede tomar son los siguientes: auto <longitud> y <%>.

min-width/min-height: Nos permite establecer el ancho o el alto mínimo para un elemento, los valores que puede tomar son los siguientes: auto <longitud> y <%>

max-width/max-height: Establece el alto o el ancho máximo aceptable para un elemento, sus posibles valores son: auto <longitud> y <%>

box-sizing: Establece cual parte de la caja del elemento se toma para el tamaño, los disponibles son: content-box padding-box border-box margin-box .

De no establecer ningún valor a las propiedades vistas el valor por defecto será: auto, aunque no esté especificado, significando que el navegador será quien establezca los tamaños, también como vimos podemos establecer los tamaños utilizando medidas de longitud o porcentajes, siendo los porcentajes calculados en base al ancho del elemento contenedor.

Ya vista la teoría, entraremos ahora a la práctica, veamos el siguiente código donde estableceremos el tamaño de dos elementos para que veamos cómo va funcionando todo esto:


<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
	 <style type="text/css">
		 div {
			 width: 75%;
			 height: 100px;
			 border: thin solid black;
		 }
		 img {
			 background: lightgray;
			 border: 4px solid black;
			 margin: 2px;
			 height: 50%;
		 }
		 #first {
			 box-sizing: border-box;
			 width: 50%;
		 }
		 #second {
			 box-sizing: content-box;
		 }
	 </style>
</head>
<body>
	 <div>
		 <img id="first" src="banana-small.png" alt="small banana">
		 <img id="second" src="banana-small.png" alt="small banana">
	 </div>
</body>
</html>

Como vemos es muy sencillo lo que hemos hecho acá, establecimos un ancho y un alto para elemento div de la página, luego especificamos dos identificadores donde a cada uno le colocamos diferentes box-sizing, veamos lo que nos genera todo esto:


Como observamos una de las imágenes pierde su proporción y la siguiente se mantiene de un tamaño que no la hace ver distorsionada.

Qué pasa si ahora jugamos un poco con el re-dimensionamiento del tamaño de la ventana del navegador, sabemos que el div será 75% del tamaño de su contenedor, en este caso su contenedor es body que cambia con la ventana y a su vez la imagen con el selector #first es un 50% de ancho de su contenedor que en este caso es div, al ver esto sabemos que algo no se va a mantener como está, veamos que pasa en el navegador con todo esto.




Las proporciones cambian debido al uso de valores en porcentajes, ahora podemos ver como el navegador trata los elementos cuando establecemos algunas de las reglas de tamaño. Con esto finalizamos nuestro tutorial, ahora queda practicar hasta lograr que el navegador trate de la forma que queremos el re-dimensionamiento y los tamaños de los elementos en nuestros documentos HTML5.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado may 12 2014 18:12
  •   Actualizado may 12 2014 18:12
  •   Visitas 603



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse