Capitulo 4

Capitulo 4
Modelo de cajas
(box model)

Introducción
• El "box model" es el comportamiento de CSS que
hace que todos los elementos incluidos en una
página HTML se representen mediante cajas
rectangulares.
• CSS permite controlar el aspecto de todas las
cajas.

4.1.1. Anchura
La propiedad CSS que controla la anchura de los elementos se denomina
width.

Ejemplo:
El siguiente ejemplo establece el valor de la
anchura del elemento <div> lateral
#lateral { width: 200px; }
<div id="lateral">
...
</div>

4.1.2. Altura
La propiedad CSS que controla la altura de los elementos se denomina
height.

Ejemplo
El siguiente ejemplo establece el valor de la altura
del elemento <div> de cabecera:
#cabecera { height: 60px; }
<div id="cabecera">
...
</div>

4.2.1. Margen
• CSS define cuatro propiedades para controlar cada uno de los
márgenes horizontales y verticales de un elemento.

Ejemplo
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer
tincidunt, risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>

Ejemplo
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}

Shorthand
La propiedad que permite definir de forma simultanea los cuatro márgenes
se denomina margin.

La notación {1, 4} de la definición anterior significa
que la propiedad margin admite entre uno y cuatro
valores, con el siguiente significado:
• Si solo se indica un valor, todos los márgenes tienen
ese valor.
• Si se indican dos valores, el primero se asigna al
margen superior e inferior y el segundo se asigna a
los márgenes izquierdo y derecho.
• Si se indican tres valores, el primero se asigna al
margen superior, el tercero se asigna al margen
inferior y el segundo valor se asigna los márgenes
izquierdo y derecho.
• Si se indican los cuatro valores, el orden de
asignación es: margen superior, margen
• derecho, margen inferior y margen izquierdo.

Ejemplo
Código CSS original:
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
div img {
margin: .5em;
margin-left: 1em;
}

Fusión de márgenes
• Cuando se juntan dos o más márgenes verticales, se fusionan de
forma automática y la altura del nuevo margen será igual a la altura
del margen más alto de los que se han fusionado.

4.2.2. Relleno
CSS define cuatro propiedades para controlar cada uno de los espacios de
relleno horizontales y verticales de un elemento.

.margen {
margin-top: 2em; margin-right: 2em; margin-
bottom: 2em; margin-left: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em;
paddingbottom: 2em; padding-left: 2em;
}

Shorthand
La propiedad que permite
definir de forma simultanea los cuatro márgenes se denomina padding.

Ejemplo
body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y
derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em,
inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho =
2em, inferior = 3em, izquierdo = 4em */

4.3. Bordes
4.3.1. Anchura
La anchura de los bordes se controla con las cuatro propiedades siguientes:
thin (borde delgado), medium (borde normal) y thick (borde ancho).

Ejemplo
div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}

Ejemplo
p { border-width: thin } /* thin thin thin thin */
p { border-width: thin thick } /* thin thick thin thick */
p { border-width: thin thick medium } /* thin thick
medium thick */
p { border-width: thin thick medium thin } /* thin thick
medium thin */

4.3.2. Color
El color de los bordes se controla con las cuatro propiedades siguientes:

Ejemplo
div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}

4.3.3. Estilo
CSS permite establecer el estilo de cada uno de los bordes mediante las
siguientes propiedades:

Ejemplo
div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}

Shorthand global 1
Ejemplo:
h1 {
border-bottom: solid red;
}

Shorthand global 2
Ejemplo:
Div { border: 1px solid red; }

4.5. Fondos
background-color
Ejemplo:
body {
background-color: #F5F5F5;
}

background-image
Ejemplo:
body { background-image:url("imagenes/fondo.png") }

background-repeat
Ejemplo:
#hdr
{
background: url("/images/ds.gif") repeat-x;
width: 100%;
text-align: center;
}

background-position
Ejemplo
#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;
}

Shorthand
Ejemplo:
body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; }

Capitulo 4

Más contenido relacionado

Similar a Capitulo 4 (20)

Último (20)

Capitulo 4