Cómo trabajar con el modelo de caja básica en css3
En CSS3, todo lo que se ve en una página es en una caja. Esa caja separa los objetos entre sí y hace posible la creación de diversos efectos especiales. El uso de cajas hace que sea posible colocar el contenido en pantalla, llenar diversas áreas con el color, y crear el tipo de separaciones que los usuarios esperan. Las siguientes secciones discuten el modelo de caja básica con más detalle.
Video: #27 - "Modelo de caja CSS" padding, border y margin - Curso de CSS3 desde cero
Cómo ver las cajas en CSS modelo de caja básica
los modelo básico cuadro en realidad se basa en una serie de cuatro cajas - cada uno de los cuales se coloca dentro de la próxima.
Video: Curso: Bases de HTML y CSS - 6. Modelo de Caja
Cada región o caja tiene un propósito específico. Por ejemplo, el margen sirve para separar toda la región de caja de otras regiones en caja en la página. Por supuesto, se puede establecer el margen de cero, de modo que no hay separación, pero se puede proporcionar tanto la separación como sea necesario para obtener el aspecto deseado.
fronteras servirá para proporcionar separadores visuales entre los elementos de contenido. Se utilizan todo el tiempo en las páginas web. Cada lado de un borde puede ser controlado por separado. Usted puede optar por mostrar sólo el borde derecho y no la parte superior, inferior, izquierda o cuando se trabaja en el panel izquierdo de la página. La frontera podría terminar pareciéndose a una línea en lugar de una caja.
Relleno la frontera que separa a partir del contenido, cuando se visualiza la frontera. De lo contrario, el borde y el contenido aparecerían directamente uno junto al otro y el contenido aparecerían hacinamiento en algunos casos. Esto sería un problema serio cuando se trabaja con el texto. Por otro lado, es posible que en realidad quieren la frontera justo al lado de una imagen para resaltar la imagen y hacerla estallar en una página.
El resultado de todas estas regiones es que usted termina con un área de contenido que es algo menor que el cuadro en su conjunto menos que elimine el margen, borde y relleno. El contenido está enclavado de forma segura en su caja y presenta la información al usuario en una forma que es a la vez útil y estéticamente agradable.
Cómo trabajar con el modelo de caja en CSS 3
El uso de una frontera es una de esas situaciones. Además, establecer el margen a cero elimina el espacio entre los elementos de pantalla. No hay necesidad de hacer uso de los contenidos. Un objeto de la página puede proporcionar una función visual. El procedimiento siguiente muestra algunas otras maneras en que para trabajar con el margen, borde, el relleno y el contenido utilizado para crear el modelo de la caja básica.
Video: Curso HTML 5. CSS II Modelo caja contenedor. Vídeo 7
crear el ExternalCSS.HTML archivos y ExternalCSS.CSS y copiarlos a una nueva carpeta.
ExternalCSS.CSS abierta.
Cambiar los estilos existentes añadiendo el código que se muestra en negrita:
p {font-family: cursiva-font-size: a gran color: # 0000ff-background-color: # ffff00-frontera: principio-frontera-ancho: espesor-border-radius: 6px; margen: 2px; padding: 5px; } h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # ff0000-background-color: # 00ffff-con fondo de border-style: ranura-border-left; estilo: Canto -border derecha; estilo: canto-border-top-style: ranura-border-width: 15px; border-color: gris margen: 2px; padding: 6px;}Estos cambios se suman diversos efectos especiales al texto. Usted no utilizan esto muchos tipos diferentes de estilos en una sola página. Es un poco abrumador.
Observe que puede hacer que las esquinas cuadradas o redondeadas. La cantidad de redondeo se especifica mediante la propiedad frontera de radio. Las propiedades de borde de anchura y de frontera tanto afectan el redondeo también. Ciertos estilos de borde soportan esquinas redondeadas mejores que otros.
Es posible controlar cada frontera, margen, y el lado acolchado de forma individual. Este ejemplo también muestra el efecto de la combinación de estilos de borde para crear un aspecto particular. Con el fin de combinar estilos, debe especificar cada lado por separado.
Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.
body {frontera: double-border-width: 20px; border-color: Rojo Azul Verde Púrpura-margin: 0-padding: 20px;}Muchos desarrolladores se olvidan de que el documento
tag es también una pantalla objeto - y que su aparición es controlable. En este ejemplo se añade un borde alrededor de toda el área de contenido. Observe que la propiedad border-color se utiliza para añadir un color diferente para cada lado: arriba, derecha, abajo, e izquierda (en ese orden).Video: Modelo de cajas CSS (parte 1)
Actualizar la página de prueba.
Se ve el efecto de hacer que el cambio de estilo. Nunca se tendría que utilizar este muchos estilos juntos, excepto en un ejemplo para propósitos de comparación.
