Cajas en CSS

Es muy impotante diferenciar entre elementos de bloque y en linea. Con la propiedad DISPLAY se puede alterar esta caracteristicas, 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.

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;

Se aplica a todo los elementos tipo bloque, etiqueta TD y la etiqueta IMG a pesar que es en linea.

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

1.1 Min-Width

Define el valor minimo, pero si contenido asi lo exije se hace mas ancho.

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;

1.2 Max-Width

Limita el ancho del elemento bloque.

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;

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.

height: 100px;
height: 33%;
height: 10px 5px;
height: 0 3px 10px 5px;
height-top: 10px;
height-right: 3px;
height-bottom: 10px;
height-left: 5px;

2.1 Min-Height

Define el valor minimo, pero si contenido asi lo exije se hace mas alto.

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;

2.2 Max-Height

Limita el alto del elemento bloque.

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;

3. 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 mensillas del relog. 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:

4. 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 mensillas del relog. 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;

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 mensillas del relog. Valores posibles: absoluto (px) | none.

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 mensillas del relog. Valores posibles: absoluto (px) | none.

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 mensillas del relog. Valores posibles: none | solid | double | dotted | groove | ridge | insert | outset | inherit.

Estilos de borde
noneNo se muestra ningún borde. Valor por omision.
hiddenNo muestra ningun 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 mensillas del relog. Valores posibles: absoluto (px) | relativo (%) | auto.

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;

5.4 Border-Radius

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

Border-Radius: 3px;
Border-Radius: 15px 50px;
Border-Radius: 3px 5px 2px 10px;

5.6 Border-Image

border-image URL("image.jpg");

6 Outline

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

<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.

outline-width: 3px:
ouline-style: dotted;
outline-color: navy;

7 Float

El elemento se mueve hacia a un lado y el texto se ajustará a su lado. La propiedad "display" es ignorada. Posibles valores: none | left | right | inherit.

float: left;
float: right;

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 visializacion 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 solucion consiste en usar la propiedad overflow en el elemento contenedor.

#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 »