Cajas en CSS

Es muy impotante diferenciar entre elementos de bloque y en linea. Con la propiedad DISPLAY se puede alterar esta características, sus valores son block|inline.

1. Width

Define el ancho de un elemento tipo bloque. Valores posibles son: absoluto (px,em) | relativo (%) | auto, ademas de los valores globales initial | unset | inherit.

Valores posibles: absoluto (px|em) | relativo (%) | auto.
width: 150px;
width: 100%;
width: auto;
width: 3px 10px;
width: 3px 12px 4px 10px;
width-top: 10px;
width-right: 3px;
width-bottom: 10px;
width-left: 5px;

Al usar valores absolutos: 1em = 16px. Al usar valores relativos (%) es respecto al tamaño de letra del elemento padre.

Se aplica a todo los elementos tipo bloque: <h1>..<h6>, <p>, <div>, <li>, <form>, <header>, <footer> y <session>. Ademas a las etiquetas: <TD> e <IMG> a pesar que son inline.

auto hace que tome en tamaño justo del contenido interno.

Las propiedades min-width y max-width anulan la propiedad width.

Al usar valores absolutos: 1em = 16px. Al usar valores relativos (%) es respecto al tamaño de letra del elemento padre.

1.1 Min-Width

Define el valor mínimo, pero si contenido así lo exige se hace mas ancho.

Valores posibles: absoluto (px|em) | relativo (%) | auto.
min-width: 150px;
min-width: 100%;
min-width: auto;
min-width: 3px 10px;
min-width: 3px 12px 4px 10px;
min-width-top: 10px;
min-width-right: 3px;
min-width-bottom: 10px;
min-width-left: 5px;

Esta propiedades anulan la propiedad width.

1.2 Max-Width

Limita el ancho del elemento bloque.

Valores posibles: absoluto (px) | relativo (%) | auto.
max-width: 150px;
max-width: 100%;
max-width: auto;
max-width: 3px 10px;
max-width: 3px 12px 4px 10px;
max-width-top: 10px;
max-width-right: 3px;
max-width-bottom: 10px;
max-width-left: 5px;

Esta propiedades anulan la propiedad width.

2. Height

Define el alto de un elemento tipo bloque. Valores posibles son: absoluto (px,em) | relativo (%) | auto, ademas de los valores globales initial | unset | inherit.

Valores posibles: absoluto (px) | relativo (%) | auto.
height: 100px;
height: 33%;
height: 10px 5px;
height: 0 3px 10px 5px;
height-top: 10px;
height-right: 3px;
height-bottom: 10px;
height-left: 5px;

Las propiedades min-height y max-height anulan la propiedad height.

2.1 Min-Height

Define el valor mínimo, pero si contenido así lo exige se hace mas alto.

Valores posibles: absoluto (px) | relativo (%) | auto.
min-height: 100px;
min-height: 33%;
min-height: 10px 5px;
min-height: 0 3px 10px 5px;
min-height-top: 10px;
min-height-right: 3px;
min-height-bottom: 10px;
min-height-left: 5px;

Esta propiedades anulan la propiedad height.

2.2 Max-Height

Limita el alto del elemento bloque.

Valores posibles: absoluto (px) | relativo (%) | auto.
max-height: 100px;
max-height: 33%;
max-height: 10px 5px;
max-height: 0 3px 10px 5px;
max-height-top: 10px;
max-height-right: 3px;
max-height-bottom: 10px;
max-height-left: 5px;

Esta propiedades anulan la propiedad height.

3. Padding

Define todos los padding de una sola vez. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj. Valores posibles: absoluto (px) | relativo (%) | auto.

paddin: 5px;
paddin: 2px 3px;
padding: 3px 10px 4px 0;
padding-top: 10px;
padding-right: 5px;
padding-bottm: 3px;
padding-left: 7px;

4. Margin

Define todos los margen de una sola vez. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.

Valores posibles: absoluto (px) | relativo (%) | auto.
margin: 10px;
margin: 0 5px;
margin: 5px 2px 3px 4px;
margin-top: 10px:
margin-right: 10px:
margin-bottom: 10px:
margin-left: 10px:

5. Border

Define de una sola vez el ancho, estilo y color del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.

border: [grosor];
border: [grosor-horizontales] [grosor-verticales];
border: [grosor-top] [grosor-der] [grosor-abajo] [grosor-izquierda];
border: [grosor] [estilo] [color];
border: 1px;
border: 0 5px:
border: 2px 5px 1px 10px:
border: 2px dotted;
border: medium dashed green;
border-top: 1px solid #C00;
border-right: 1px solid #00F;
border-bottom: 1px solid #00F;
border-left: 1px solid #00F;

5.1 Border-Width

Define el ancho del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj. Valores posibles: absoluto (px) | none.

border-Width: [grosor];
border-Width: [grosor-horizontales] [grosor-verticales];
border-Width: [grosor-top] [grosor-der] [grosor-abajo] [grosor-izquierda];
border-width: 1px:
border-width: 0 1px:
border-width: 5px 3px 4px 1px:
border-top-width: 1px:
border-right-width: 1px:
border-bottom-width: 1px:
border-left-width: 1px:

5.2 Border-Style

Define el estilo del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.

Border-Style: none | solid | double | dotted | groove | ridge | insert | outset | inherit.
Estilos de borde
ParámetroDescripción
noneNo se muestra ningún borde. Valor por omisión.
hiddenNo muestra ningún borde.
dottedBorde punteado, formado por una serie de puntos separados por espacios.
dashedBorde discontinuo, formado por una serie de pequeños trazos intercalados por espacios.
solidBorde continuo, formado por una línea recta continua.
doubleBorde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco.
grooveBorde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla
ridgeBorde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla
insertBorde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla
outsetBorde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla
inheritHereda.
border-style: solid;
border-style: dotted solid;
border-style: dotted solid solid double;
border-top-style: dotted;
border-right-style: groove;
border-bottom-style: none;
border-left-style: solid;

5.3 Border-Color

Define el dolor del borde. Si pones un solo valor este sera aplicado a los 4 lados. Si pone 2 valores el primero sera aplicado a superior e inferior y el segundo a izquierda y derecha. En caso de cuatro valores ten en cuenta el orden: arriba, derecha, abajo izquierda, es decir como las manecillas del reloj.

Border-Color: nombre color | #hex | rgb() | hsl();
border-color: red;
border-color: blue red;
border-color: yellow grey red navy;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

Para saber mas de colores y ver el juego completo de nombre de colores clic aqui.

5.4 Border-Radius

Establece el redondeo de las equinas. Posibles valores: absoluto(px|em)

Border-Radius: radios:
Border-Radius: radio-der radio-izq
Border-Radius: radio-der-sup radio-der-inf radio-izq-sup radio-izq-inf
Border-Radius: 3px;
Border-Radius: 15px 50px;
Border-Radius: 3px 5px 2px 10px;

5.6 Border-Image

Permite especificar una imagen para usar como borde alrededor de un elemento.

border-image: URL [slice] [width] [outset] [repeat];
Parámetros de Border-image
ParámetroDescripción
border-image-sourceespecifica la ruta a la imagen que se usará como borde (en lugar del borde normal alrededor de un elemento).
border-image-sliceespecifica cómo cortar la imagen especificada por border-image-source. La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el centro.
border-image-widthespecifica el ancho de la imagen del borde.
border-image-outsetespecifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde.
border-image-repeatespecifica si la imagen del borde debe repetirse, redondearse o estirarse.
border-image: URL(image.jpg);
border-image: URL(image.jpg) 20% round;

6 Outline

Define el grosor de los elementos bloque. Aunque es muy similar a border en su apariencia, su principal diferencia es que no ocupa espacio como border, se dibujan por encima del elemento y que pueden tener formas no rectangulares. Al igual que con border se pude definir grosor, estilo y color a la vez.

outline: [ancho] [estilo] [color];
Parámetros de Outline
ParámetroDescripción
Outline-widthAncho del contorno
Outline-styleEstilo del esquema
Outline-colorColor del contorno
Outline-offsetagrega espacio entre un contorno y el borde del elemento.
outline: 3px dotted navy;
<span style="outline:1px solid red;">Ejemplo de
texto largo que
ocupa varias
líneas.</span>

Ejemplo de
texto largo que
ocupa varias
líneas.

7 Float

El elemento se mueve hacia a un lado y el texto se ajustará a su lado. Posibles valores: none | left | right | inherit.

float: left | right | none;

La propiedad display es ignorada.

8 Clear

Esta propiedad especifica si un elemento permite elementos flotantes a sus lados. Posibles valores son: none | left | right | both | inherit.

clear: both;

9 Overflow

Cuando haces un elemento flotantes este se sale de su elemento contenedor resultando en una visualización incorrecta. El motivo de este comportamiento es que un elemento posicionado de forma flotante ya no pertenece al flujo normal de la página HTML. La solución consiste en usar la propiedad overflow en el elemento contenedor. visible | hidden | scroll | auto | inherit

overflow: visible | hidden | scroll | auto | initial | inherit;
#pag {
  border: 1px solid #CCC;
  background-color: #E0E0E0;
  padding: .5em;
  overflow: hidden;
}
.der {float: right;}
.izq {float: left; }

//En HTML
<p id=pag>
  <span class=izq>« Anterior</span>
  <span class=der>Siguiente »</span>
</p>

« Anterior Siguiente »

9.1 Overflow-x

Especifica si se debe recortar el contenido, agregar una barra de desplazamiento o mostrar el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes izquierdo y derecho.

overflow-x: visible | hidden | scroll | auto | initial | inherit;

9.2 Overflow-y

Especifica si se debe recortar el contenido, agregar una barra de desplazamiento o mostrar el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes superior e inferior.

overflow-y: visible | hidden | scroll | auto | i nitial | inherit;

10. Box-shadow

Esta propiedad adjunta una o más sombras a un elemento.

h-offsetNecesario. El desplazamiento horizontal de la sombra. Un valor positivo pone la sombra en el lado derecho del cuadro, un valor negativo pone la sombra en el lado izquierdo del cuadro. v-offsetNecesario. El desplazamiento vertical de la sombra. Un valor positivo pone la sombra debajo del cuadro, un valor negativo pone la sombra encima del cuadro. blurOpcional. El radio borroso. Cuanto mayor sea el número, más borrosa será la sombra. spreadOpcional. El radio de propagación. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra. colorColor de la sombra.
ParámetroDescripción
box-shadow: none | h-offset v-offset blur spread color;
box-shadow: 5px 10px;
box-shadow: 5px 10px #888888;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

Para adjuntar más de una sombra a un elemento, agregue una lista de sombras separadas por comas.