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.

• Width
• Min-Width
• Max-Widtht
• Height
• Min-Height
• Max-Height
• Margin
• Padding
• Border
• Border-width
• Border-style
• Border-color
• Border-collapse
• Border-spacing
• Border-Radius
• Border-Image
• Outline
• Float
• Clear
• Overflow
• Box
• Box-shadow
• Box-decoration-break
• Box-sizing

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: thin;
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.

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];

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];

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

10.1 Box-shadow

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

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.

10.2 Box-decoration-break

span.ex1 {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
}

span.ex2 {
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
}

10.3 Box-sizing

box-sizing: border-box;