Scribd
Cargar
56 vistas50 páginas

Modelo de Caja en CSS: Guía Completa

Cargado por

Rubenpd66
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
56 vistas50 páginas

Modelo de Caja en CSS: Guía Completa

Cargado por

Rubenpd66
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Hojas de estilo en cascada

(CSS)

3. Modelo de cajas
Modelos de cajas
• El modelo de caja CSS es esencialmente una caja que envuelve cada elemento
HTML. Se compone de: márgenes, bordes, relleno y el contenido real. La imagen de
abajo ilustra el modelo de caja:
• Este elemento caja también se llama contenedor o bloque (block).

El W3C:
 Contenido del elemento: es lo que está en el núcleo de la caja está
el.Relleno (padding): es el espacio que rodea al contenido.
 Borde (border): es la parte que perfila el relleno.
 Margen (margin): es el espacio que rodea al borde, la parte más externa del
elemento.
2
Altura y anchura de un elemento
• La dimensión total del elemento caja se calcula del siguiente modo: contenido +
márgenes interiores + bordes + márgenes exteriores.
Ejemplo
<!DOCTYPE html> La anchura del elemento caja es, en
<html lang="es"> este caso, de 300 píxeles que se
<head> descomponen de la forma siguiente
<title>Html5</title> (de izquierda a derecha): 20 píxeles
<meta charset="UTF-8"> de margen exterior + 10 píxeles para
<style type="text/css"> el borde + 20 píxeles de margen
p { width: 200px; interior + 200 píxeles de contenido +
border: 10px solid rgb(125,165,205); 20 píxeles de margen interior + 10
padding: 20px; píxeles de borde + 20 píxeles de
margin: 20px; margen exterior. El total es, en efecto,
background-color: rgb(215,230,245); 300 píxeles.
</style>
</head>
<body>
<p>Noción de caja en CSS</p>
</body>
</html>
3
Altura y anchura de un elemento
Las propiedades de estilo width y height van a fijar, respectivamente, la
anchura y la altura del elemento caja.

auto
Los valores width y height especifican la
anchura y la altura del contenido (sin
width: o bien valor de longitud
márgenes interiores, sin bordes y sin márgenes
o bien porcentaje exteriores).
auto
El valor auto ajusta automáticamente la
height: o bien valor de longitud dimensión del contenido.
o bien porcentaje El valor de longitud especifica un valor fijo.
El porcentaje especifica un valor relativo.

La propiedad max-height se utiliza


max- generalmente de forma conjunta con la
height: Fija la altura máxima propiedad min-height para fijar un margen de
min- Fija la altura mínima maniobra en lo que respecta a la visualización
height:
Fija la anchura máxima de los elementos afectados. Este concepto
max-width: también sirve para las propiedades max-width
Fija la anchura mínima
min-width: y min-width.
4
Altura y anchura de un elemento
De este modo, si la anchura sobrepasa la anchura especificada por max-width, el
navegador recalcula la anchura del elemento basándose en el valor de max-width.
Del mismo modo, si la anchura es inferior a la de min-width, el navegador recalcula
la anchura en función del valor determinado en min-width. El navegador procede de
forma similar para las propiedades max-height y min-height.

5
Altura y anchura de un elemento
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
</head>
<body>
<p>width</p>
<div style= "border: 2px solid black;
width: 250px;">
xxx xxx xxx xxx xxx xxx xxx xxx
</div>
<p>min-width</p>
<div style="border: 2px solid black; Para la primera división, la anchura se ha fijado
min-width: 250px;"> mediante width: 250px. En la segunda, ésta se
xxx xxx xxx xxx xxx xxx xxx xxx ha determinado mediante min-width: 250px.
</div>
<p>max-width</p>
Como este valor mínimo no se ha alcanzado, la
<div style="border: 2px solid black; división ocupa toda la anchura de la ventana.
width: 250px; En la última división, la anchura responde al
max-width: 150px;"> valor máximo max-width: 150px.
xxx xxx xxx xxx xxx xxx xxx xxx
</div>
</body>
</html>
6
Altura y anchura de un elemento
• Otro ejemplo:
• Importante: cuando configura las propiedades de ancho y alto de un elemento con
CSS, simplemente establece el ancho y el alto del área de contenido . Para calcular
el tamaño completo de un elemento, también debe agregar relleno, bordes y
márgenes.

320px (ancho)
+ 20px (izquierda + derecha)
+ 10px (borde izquierdo + derecho)
+ 0px (margen izquierdo + derecho)
= 350px

El ancho total de un elemento debe calcularse así:


Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde
izquierdo + borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así:
Altura total del elemento = altura + relleno superior + relleno inferior + borde
superior + borde inferior + margen superior + margen inferior
7
Altura y anchura máxima
Establecer el width de un elemento a nivel de bloque evitará que se extienda hacia
los bordes de su contenedor. Luego, puede establecer los márgenes en automático
para centrar horizontalmente el elemento dentro de su contenedor. El elemento
ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre
los dos márgenes:
Este elemento <div> tiene un ancho de 500 px y un margen establecido en
automático.

Nota: El problema con el <div> anterior ocurre cuando la ventana del navegador es
más pequeña que el ancho del elemento. El navegador luego agrega una barra de
desplazamiento horizontal a la página.

El uso max-width lugar, en esta situación, mejorará el manejo del navegador de


ventanas pequeñas. Esto es importante al hacer que un sitio sea utilizable en
dispositivos pequeños:
Este elemento <div> tiene un ancho máximo de 500 px y un margen establecido en
automático.

8
Altura y anchura máxima

9
Altura y anchura máxima
Ejemplo con los dos div a 500:

10
Márgenes externos
Esta propiedad permite definir el margen exterior del elemento caja.
margin:

margin-top: auto

margin-right: o bien valor de longitud

margin-bottom: o bien porcentaje

margin-left:

El valor auto deja al navegador la gestión de los márgenes exteriores.


Un valor de longitud define con precisión los márgenes exteriores.
Un porcentaje define la longitud respecto a un elemento padre.
El margen exterior de cada lado del elemento caja puede definirse, igualmente, con ayuda de las propiedades
margin-top, margin-right, margin-bottom y margin-left. Las direcciones top, right, bottom, left diseñan,
respectivamente, los bordes superior, derecho, inferior e izquierdo. Estas propiedades son especificaciones
CSS2.
Es posible abreviar la escritura de las propiedades del margen externo margin-top, margin-right, margin-
bottom y margin-left, informado uno, dos, tres o cuatro valores mediante la propiedad margin.
Si se informa un único margen, se aplica a los cuatro lados.
Con dos márgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales
(márgenes derecho e izquierdo).
Con tres valores, el primero se aplica al lado superior, el segundo a los márgenes laterales y el tercero al lado
inferior.
Con cuatro márgenes, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir
superior, derecho, inferior e izquierdo.
Los márgenes pueden definirse con valores negativos, lo que puede generar efectos visuales interesantes,
aunque también existe el riesgo de que se interpreten de forma distinta según cada navegador. 11
Márgenes externos
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
.body { margin: 0px;}
.bloque { border: 1px solid
black;
margin: 20px 20px 0px
20px;
text-align: center;}
</style>
</head>
<body>
<div class="bloque">
margen exterior
</div>
</body>
</html>
12
Márgenes internos
Esta propiedad permite definir el margen interior del elemento caja.
. padding:

padding-top: auto

padding-right: o bien valor de longitud

padding-bottom: o bien porcentaje

padding-left:

El valor auto deja al navegador la gestión para la visualización de los márgenes internos.
Un valor de longitud define con precisión los márgenes interiores.
Un porcentaje define la longitud respecto al elemento padre.
El margen interior a cada lado del elemento caja puede definirse de forma individual mediante las propiedades
padding-top, padding-right, padding-bottom y padding-left. Las direcciones top, right, bottom, left indican,
respectivamente, los bordes superior, derecho, inferior e izquierdo.
Es posible abreviar la escritura de las propiedades del margen interno padding-top, padding-right, padding-
bottom y padding-left, informando uno, dos, tres o cuatro valores de la propiedad padding.
Si se informa un único margen, se aplica a los cuatro lados.
Con dos márgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales
(márgenes derecho e izquierdo).
Con tres valores, el primero se aplica al lado superior, el segundo a los márgenes laterales y el tercero al lado
inferior.
Con cuatro márgenes, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir
superior, derecho, inferior e izquierdo.

13
Márgenes internos
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
.marge { width: 300px;
padding-left: 50px;
border: solid 1px gray;}
</style>
</head>
<body>
<div class="margen">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras
elementum ultrices diam.
</div>
</body>
</html>

14
Características de los modelos de cajas.
• Hay algunas características fundamentales del modelo de cajas que vale la
pena destacar:
• El relleno, los bordes y los márgenes son opcionales, por lo que, si ajustas
a cero sus valores se eliminarán de la caja.
• Cualquier color o imagen que apliques de fondo al elemento se extenderá
por el relleno.
• Los bordes se generan con propiedades de estilo que especifican su estilo
(por ejemplo: sólido), grosor y color. Cuando el borde tiene huecos, el
color o imagen de fondo aparecerá a través de esos huecos.
• Los márgenes siempre son transparentes (el color del elemento padre se
verá a través de ellos).
• Cuando definas el largo de un elemento estás definiendo el largo del área
de contenido (los largos de relleno, de borde y de márgenes se sumarían a
esta cantidad).
• Puedes cambiar el estilo de los lados superior, derecho, inferior e
izquierdo de una caja de un elemento por separado.

15
Color del borde.
• Estas propiedades de estilo permiten definir el color de los cuatro bordes del
elemento caja o de cada borde tomado individualmente.

nombre del color

notación hexadecimal en formato #rrggbb

notación hexadecimal abreviada en formato #rgb


border-color:
notación en formato RGB mediante enteros entre 0 y 255
border-top-color:
notación en formato RGB con porcentajes entre 0% y
border-right-color: 100%

border-bottom- notación en formato RGBa donde a está comprendidoentre


color: 0 y1

border-left-color: notación en formato HSL

notación en formato HSLa donde a está comprendido entre


0y1

transparent

16
Color del borde.
• La propiedad CSS 1 border-color define el color (único) de los cuatro lados del elemento caja. De
este modo, con la propiedad border-color: red, los cuatro bordes tendrán el mismo color rojo.
• El color no puede aplicarse si no se han definido el tipo de borde (border-style) ni el grosor del
mismo (border-width), sin los cuales el borde no existe.
• Los colores de cada lado del elemento caja pueden definirse individualmente gracias a las
propiedades border-top-color, border-right-color, border-bottom-color y border-left-color. Las
direcciones top, right, bottom, left informan respectivamente los bordes superior, derecho, inferior
e izquierdo.
• Es posible abreviar la escritura (algo larga) de las propiedades border-top-color, border-right-color,
border-bottom-color y border-left-color, informando uno, dos, tres o cuatro colores en la propiedad
border-color.
• Si se indica un solo color, se aplicará a los cuatro lados.
• Con dos colores, el primero se aplicará en los lados superior e inferior. El segundo valor se aplicará
en los laterales (derecho e izquierdo).
• Con tres colores, el primero se aplicará al lado superior, el segundo en los laterales y el tercero al
lado inferior.
• Con cuatro colores, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior,
es decir superior, derecho, inferior e izquierdo.
• Con el valor transparent, el color de los bordes es transparente, aunque el borde existe y tiene
presencia.

17
Color del borde.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 { border-style: solid;
border-width: 7px;
border-top-color:
rgb(215,230,245);
border-bottom-color:
rgb(215,230,245);
border-left-color:
rgb(125,165,205);
border-right-color:
rgb(125,165,205);
text-align: center;}
</style>
</head>
<body>
<p></p>
<h1>Html5 + CSS3</h1>
</body>
</html>
18
Color del borde.
• Otro ejemplo:

19
Grosor del borde.
• Esta propiedad permite definir el grosor de los cuatro bordes de forma simultánea
o de cada borde de forma individual.
El valor thin se traduce en un borde fino, medium en un
borde medio y thick en un borde grueso. La interpretación
del grosor, a partir de las palabras clave, puede variar de un
border-width:
valor de longitud;
navegador a otro.
border-top-width: El grosor no se muestra si el tipo de borde (border-style) no
thin; se ha definido.
border-right-width: Es posible definir el grosor de cada lado de forma individual
medium; gracias a las propiedades border-top-width, border-right-
border-bottom-width:
thick; width, border-bottom-width y border-left-width. Las
border-left-width: direcciones top, right, bottom, left informan,
respectivamente, los bordes superior, derecho, inferior e
izquierdo.
Es posible abreviar la escritura (algo larga) de las
propiedades border-top-width, border-right-width, border-
bottom-width y border-left-width, informando uno, dos, tres
o cuatro colores en la propiedad border-width.
Si se indica un grosor, se aplicará a los cuatro lados.
Con dos grosores, el primero se aplicará en los lados
superior e inferior. El segundo valor se aplicará en los
laterales (derecho e izquierdo).
Con tres grosores, el primero se aplicará al lado superior, el
segundo en los laterales y el tercero al lado inferior.
Con cuatro grosores, éstos se aplican en el sentido de las
agujas del reloj partiendo del lado superior, es decir 20
superior, derecho, inferior e izquierdo.
Grosor del borde.
• <!DOCTYPE html>
• <html lang="es">
• <head>
• <title>Html5</title>
• <meta charset="UTF-8">
• <style type="text/css">
• h1 { border-style: solid;
• border-color:
rgb(125,165,205);
• border-width: thin thick;
• text-align: center;}
• </style>
• </head>
• <body>
• <h1>Html5 + CSS3</h1>
• </body>
• </html>

21
Estilo del borde.
• Esta propiedad CSS aporta cierta variedad a los bordes respecto al estilo único de
los bordes de Html.
Es interesante ilustrar estos bordes, la mayoría de ellos
nuevos en el ámbito del diseño de páginas Web. De
border-
este modo, cada palabra clave muestra:
style: solid: un trazo liso,
dashed: guiones,
border-top- dotted: pequeños puntos,
style: double: trazos lisos dobles,
groove: efecto 3D de relieve incrustado en la página
border-
solid o dashed o dotted o double o groove o (opuesto a ridge),
right-style:
ridge o inset o outset o hidden o none; ridge: efecto 3D de relieve saliendo de la página
border- (opuesto a groove),
bottom- inset: bordes entrantes, incrustados en la página
style: (inverso de outset),
outset: bordes salientes, biselados de la página
border-left-
(inverso de inset),
style:
hidden: sin borde (influye sobre el borde adyacente),
none: equivalente a border-width: 0px o, lo que es lo
mismo, sin borde.

22
Estilo del borde.
• Esta propiedad CSS aporta cierta variedad a los bordes respecto al estilo único de
los bordes de Html.
Para double, la longitud definida mediante border-width se
corresponde con el tamaño de ambos trazos más el espacio entre ellos.
El estilo de borde no se mostrará si no se ha definido el grosor del
borde (border-width).
El estilo de cada lado puede igualmente definirse de forma individual
gracias a las propiedades border-top-style, border-right-style, border-
solid
bottom-style y border-left-style. Las direcciones top, right, bottom, left
dashed
informan, respectivamente, los bordes superior, derecho, inferior e
dotted izquierdo.
double Es posible abreviar la escritura (algo larga) de las propiedades border-
groove top-style, border-right-style, border-bottom-style y border-left-style,
ridge informando uno, dos, tres o cuatro colores en la propiedad border-
inset style.
outset Si se indica un estilo, se aplicará a los cuatro lados.
Con dos estilos, el primero se aplicará en los lados superior e inferior. El
segundo valor se aplicará en los laterales (derecho e izquierdo).
Con tres estilos, el primero se aplicará al lado superior, el segundo en
los laterales y el tercero al lado inferior.
Con cuatro estilos, éstos se aplican en el sentido de las agujas del reloj
partiendo del lado superior, es decir superior, derecho, inferior e
izquierdo.
El resultado, en lo que respecta al método abreviado, no está
garantizado.
23
Estilo del borde.
• <!DOCTYPE html>
• <html lang="es">
• <head>
• <title>Html5</title>
• <meta charset="UTF-8">
• <style type="text/css">
• h2 { border-style: double;
• border-width: 10px;
• border-color: gray;
• text-align: center;}
• </style>
• </head>
• <body>
• <h2>Un borde con estilo</h2>
• </body>
• </html>

24
Estilo del borde.
• Otro ejemplo:

25
Escritura abreviada del borde
Esta propiedad de estilo para informar de forma abreviada las diferentes propiedades
permite definir los bordes de un elemento, es decir las propiedades border-color, border-
style y border-width.
Ejemplo
border: red double 5px;
Comentarios
Esta forma sólo vale en el caso de que los cuatro bordes sean idénticos.
Los valores para las diferentes propiedades se agrupan y pueden informarse, no importa en
qué orden, separados por espacios.
Para asegurar la compatibilidad óptima entre los distintos navegadores, se recomienda
informar las tres propiedades. <!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 { border: dotted 1px black;
text-align: center;}
</style>
</head>
<body>
<h1>Borde abreviado</h1>
</body>
</html>
26
Otro ejemplo

27
Tipos de bordes
Cómo los navegadores muestran los diferentes tipos de bordes.

28
Ejercicio resuelto.
Ejemplo resuelto:

https://librosweb.es/libro/css/capitulo_15/ejercicio_4.html

29
Atributos de posición.

30
Atributos margin.

31
Atributos padding

32
Atributos de contenido.

33
Elemento en bloque o línea
• La propiedad de estilo display permite redefinir un elemento en línea como un
elemento en bloque, y a la inversa. <!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
inline; (en línea) nav { display: block;
display: width: 360px;
block; (de tipo bloque)
border: 1px solid gray;
background-color: rgb(215,230,245);
padding-left: 4px;}
a { text-decoration; none;}
</style>
</head>
<body>
<nav>
<a>Inicio</a> |
<a>Productos</a> |
<a>Soluciones</a> |
<a>Puntos de venta</a> |
<a>Contacto</a>
</nav>
</body>
</html>
34
Elemento en bloque o líneas
• Los items de las listas son elementos de bloque. Aparecen unos debajo de otros. Mediante la
propiedad display: inline, es posible mostrarlos en pantalla en una única línea

• Ejemplo 2
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="UTF-8">
<style type="text/css">
ul { list-style: none ;
padding: 5px;;}
li { display: inline;
border: 1px solid gray;
background-color: rgb(215,230,245);
text-align: center;
margin-right: 3px;
padding-right: 15px;
padding-left: 15px;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>

35
Características de los modelos de cajas.
Hay algunas características fundamentales del modelo de cajas que vale la
pena destacar:
• El relleno, los bordes y los márgenes son opcionales, por lo que, si ajustas
a cero sus valores se eliminarán de la caja.
• Cualquier color o imagen que apliques de fondo al elemento se extenderá
por el relleno.
• Los bordes se generan con propiedades de estilo que especifican su estilo
(por ejemplo: sólido), grosor y color. Cuando el borde tiene huecos, el
color o imagen de fondo aparecerá a través de esos huecos.
• Los márgenes siempre son transparentes (el color del elemento padre se
verá a través de ellos).
• Cuando definas el largo de un elemento estás definiendo el largo del área
de contenido (los largos de relleno, de borde y de márgenes se sumarían a
esta cantidad).
• Puedes cambiar el estilo de los lados superior, derecho, inferior e
izquierdo de una caja de un elemento por separado.

36
Box-sizing
• La propiedad CSS box-sizing se usa para
alterar el box model o modelo de caja por
defecto usado para calcular alturas y
anchuras de elementos. Es posible usar esta
propiedad para emular el comportamiento
de navegadores que no soportan
correctamente la especificación de box model
de CSS.
• El box model o modelo de caja en CSS
funciona de la siguiente manera:
• width + padding + border = actual
visible/rendered width of box
• height + padding + border = actual
visible/rendered height of box

37
Box-sizing
• La sintaxis de la propiedad box-sizing es la siguiente:

• La sintaxis de la propiedad box-sizing


Propiedad box-sizing es la siguiente:
content-box | • Los valores que puede tomar esta
Valores padding-box | propiedad son los siguientes:
border-box • content-box: este es el estilo por
Todos los defecto especificado en el estándar de
CSS. Las propiedades width y height se
elementos que
Se aplica a miden incluyendo sólo el contenido,
aceptan width o pero no el borde, margen o relleno.
height • padding-box: las propiedades width y
Valor inicial content-box height incluyen el tamaño del relleno
pero no incluyen el borden ni margen.
Indica el
componente del
• border-box: las propiedades width y
modelo de caja
height incluyen el relleno y el borde,
pero no el margen.
que se toma
Descripción
como referencia .example { box-sizing: border-box; width: 500px; }
para calcular el
alto o ancho de
un elemento 38
overflow-x y overflow-y
• La sintaxis de la propiedad box-sizing es la siguiente:

Propiedad
overflow-x, • Las propiedades overflow son
overflow-y utilizadas para controlar el
visible | hidden | comportamiento del contenido dentro
Valores scroll | auto | de un elemento de bloque.
inherit Especifican si recortan el contenido,
Todos los muestran una barra de
Se aplica a
elementos de desplazamiento o contenido "se sale"
bloque e inline- de un elemento de bloque cuando se
block desborda en los bordes izquierdo y
Valor inicial auto derecho (x) o superior e inferior (y).
Indica el
comportamiento
Descripción del contenido al
superar el tamaño
de su contenedor

39
Ejemplos

40
Box-sizing
• Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es
aplicado solo al contenido de la caja del elemento. Si el elemento tiene algún borde
(border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el
tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se
definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier
borde o relleno que se pueda añadir.
• La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:
• content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-
sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido
del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno
ser añadirá al ancho final desplegado.
• border-box le dice al navegador tomar en cuenta para cualquier valor que se
especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si
se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran
cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para
absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar
elementos.

41
Box-sizing
• content-box Este es el valor inicial y por defecto especificado por el estándar CSS.
Las propiedades width and height no incluyen el borde, relleno o margen. Por
ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un
ancho de 370 pixeles. Aquí, las dimensiones de un elemento son calculados como:
ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos
no son incluídos en el cálculo.) border-box Las propiedad de width y height incluyen
el contenido, relleno y borde pero no incluyen el margén. properties include the
content, padding, and border, but do not include the margin. Tenga en cuenta que
el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px;
border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de
contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible
usar el border-box para hacer que el elemento desaparezca. Las dimensiones del
elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura
= borde + relleno + altura del contenido.

• content-box | border-box

42
Box-sizing

43
Box-sizing

44
Box-sizing

45
Box-sizing
• Cuando establecemos el tamaño de un elemento se aplica sin contar el padding y el
border, por lo que el tamaño de ambos se añade al contenedor y puede hacer variar
las medidas.
Esto supone un problema, ya que el ancho especificado varía al sumarle los rellenos
y bordes, pero con box-sizing podemos evitarlo perfectamente y es totalmente
compatible con la mayoría de navegadores.

46
Box-sizing
• El ejemplo anterior ilustra que pasaría si usásemos box-sizing con dos de sus
funciones básicas, que son content-box y border-box, que especifican a que le
aplicamos el ancho (width).
Si se lo aplicamos al contenido con content-box (por defecto es así) el bloque sin
contar rellenos y bordes será del tamaño establecido y de no ser así y usar border-
box aplicaremos el ancho (width) al total, por lo que el contenido tendrá el espacio
equivalente al que hayamos establecido restándole los rellenos y bordes.
La teoría muchas veces no es fácil de explicar ni entender sin un ejemplo, en los
siguientes puntos se puede ver mejor la comparación.

47
Box-sizing
• En la actualidad nos podemos encontrar con la situación de que queremos poner en
línea varios bloques, y por un borde (o relleno) uno de los elementos se pasa a
abajo.
Esto cuando se hace con medidas absolutas (como px) no hay ningún problema en
restarle esos píxeles extra al ancho o alto, pero cuando se usan medidas relativas
(como porcentajes) puede que se desborden los elementos.

Este primer ejemplo tiene el


box-sizing por defecto, por lo
que el padding se suma al
ancho, a diferencia del
ejemplo, que el padding no
influencia al ancho.
48
Box-sizing.Uso con bordes
• Al igual que lo hemos hecho con el padding podemos hacerlo con bordes, que
dejarán de ocupar esos píxeles que muchas veces molestan en nuestros diseños.

• Estos dos ejemplos son idénticos al anterior solo que cuentan con un borde de más,
por lo que vemos la facilidad con la que nos quitamos estar restando el tamaño del
padding y del border al tamaño del bloque.

• El código que hemos puesto en uso para los casos que encajaban bien es el
siguiente:
• box-sizing: border-box; 49
Bibliografía. Para saber más
• https://librosweb.es/libro/css/capitulo-2.html
• https://www.arkaitzgarro.com/css3/capitulo-2.html
• CSS Avanzado – Javier Eguíluz Pérez: CSS Avanzado.
• Curso CSS3. Antonio Navajas.
• Desarrollo de Aplicaciones Web. José Luis Comesaña.
• http://interfacesweb.github.io/unidades/02-estilos/index.html
• http://www.maestrosdelweb.com/cssintaxis/
• https://www.w3schools.com/css/
• https://emiliocobos.net/la-propiedad-box-sizing/
• Libro editorial Rama. Diseño Web. José Eduardo Córcoles y Fco. Montero.
• resumen de los patrones de selectores CSS existentes.
http://www.w3c.es/divulgacion/guiasreferencia/css21/#selectores
Existe una herramienta llamada CSS Selectors test que permite comprobar los
selectores que soporta el navegador con el que se hace la prueba.

50

También podría gustarte