cuadro de CSS estandar modelo de concepto
en el CSS, CSS se supone que todo el elemento de documento HTML genera una descripción de un elemento de caja rectangular de los elementos en un espacio de diseño del documento HTML ocupado, se puede ver claramente como una caja. CSS tenía un concepto de un "modelo de caja" alrededor de estas cajas momentos, mediante la definición de un conjunto de atributos asociados a la caja, puede enriquecer enormemente y promover la eficacia y el rendimiento de cada caja y todo el diseño del documento HTML. Para un elemento de la caja, sin ajustes especiales, el valor predeterminado siempre se representó en una línea separada, el ancho es el ancho de la ventana del navegador, el elemento antes y después de la caja o no, sólo puede ser dispuesta en la parte superior de la misma o por debajo, es decir, la secuencialmente acumulado dispuesta verticalmente. documentos HTML cada caja puede ser vista como compuesta de cuatro partes desde el interior hacia el exterior: el área de contenido (contenido), el borde interior (relleno), la frontera (la frontera) y márgenes (margen). CSS define un conjunto de propiedades relacionadas en cuatro partes, mediante el establecimiento de estas propiedades pueden ser efecto rico y expresivo de la caja. modelo de la figura como sigue: toda la caja por el área de contenido (contenido), el relleno (relleno), la frontera (frontera) y los márgenes (margen) añadir la composición.
CSS estandar composición cuadro de modelo
Área de contenido (contenido)
área de contenido es el centro del modelo de caja, que presenta el contenido principal de la caja, el contenido puede ser texto, imágenes y otros tipos. Área de contenido tiene tres atributos, anchura, altura y de rebose. Usos atributos de anchura y altura para especificar el ancho y la altura del área de contenido de la caja, cuando demasiado de contenido de información, contenido dentro de un intervalo fuera de la zona puede ser utilizada para especificar un método de procesamiento de desbordamiento desbordamiento propiedad. Cuando la propiedad de atributo se oculta desbordamiento, la porción de desbordamiento no será visible; cuando son visibles, visibles información de contenido desbordamiento, sólo para ser presentado en el exterior de la caja, cuando en el desplazamiento, la barra de desplazamiento se añade automáticamente a la caja, el usuario puede visualizar la información de contenido tirando de la barra de desplazamiento; cuando en auto, el navegador va a decidir cómo manejar la sección de desbordamiento.
El relleno (relleno)
Relleno es el espacio entre el área de contenido y las fronteras. Hay cinco propiedades de relleno, es decir, el relleno de repetición la máquina, el relleno -fondo, relleno -IZQUIERDA , padding-derecha combinación de rápido y llenado indicaciones anteriores cuatro atributos de relleno. Utilice estos cinco atributos puede especificar la distancia entre el contenido de la información de cada área de contenido y la orientación de la frontera. Cuando se ajusta el color de fondo del rectángulo de atributos, el color de fondo puede extenderse en el área de relleno.
Frontera (frontera)
de borde alrededor del área de contenido está vacío y un límite. Frontera de la propiedad hay border-style, border-width y border-color y la combinación de atributo border rápida más de tres propiedades. la propiedad border-style que es la propiedad más importante de la frontera, si no hay estilo de borde, las otras propiedades de borde se ignoran, la frontera no existe. CSS predeterminado línea de puntos (discontinua), la línea continua (sólido), etc. nueve tipos de estilos de borde. Usando especifica atributo border-anchura de la anchura del borde, que puede ser la longitud del valor de medición de valor de atributo puede ser un CSS predeterminado fino, medio y grueso. Usando la propiedad border-color para especificar el color apropiado para la frontera, sus valores de propiedad pueden ser valores RGB pueden definirse 17 nombres de colores CSS, puede ser palabras en inglés las palabras de color. Al ajustar la propiedades frontera anteriormente tres, la frontera se puede realizar cuatro direcciones de ajuste integralmente rápida, sino que también puede ser diseñado para establecer las cuatro direcciones, tales como frontera: 1px #ffffff sólido; o-estilo de borde-top: sólido; , frontera izquierda-color: amarillo ;, frontera-lright-width: 10px; similares.
Márgenes (margen)
márgenes es decir, los márgenes exteriores, situadas en la periferia más exterior de la caja, se añade en el espacio alrededor del exterior de la frontera. Margen entre no hacer una caja compacta conectados entre sí, es un medio común de diseño CSS. Hay cinco lado en blanco de la propiedad, que margin-top, margin-bottom, izquierda marginalmente, margen derecha , así como una combinación de la dirección exterior por encima de cuatro tipos de atajos de distancia del margen de propiedad, lo específico de configurar y utilizar las propiedades de relleno similares. Para dos (horizontal o vertical), y provisto adyacente a la caja en blanco límite, adyacente a su parte externa de ambos lados de los huecos no se suman, pero ambos unión. Si los valores de ambos de los márgenes adyacentes de distintos tamaños, tanto en un valor grande se toma. Mientras tanto, CSS permitiendo valor negativo para especificar atributos márgenes, cuando fuera el valor negativo especifica, la caja entera especificada se moverá en la dirección opuesta una dirección negativa, este efecto puede producir cuadros que se solapan. El uso de los márgenes método especificado elemento puede ser positiva o negativa en la web móvil, que es un método importante de técnicas de diseño CSS.
Utilizar el modelo de cuadro de CSS estándar
El relleno (relleno) Uso
1: relleno es dentro de la caja, entre la caja y el contenido.
2: El efecto de relleno: el control de la relación de posición entre el niño dentro de un interior de elemento padre.
3: Caja de relleno se estirará.
4: Si se quiere mantener el tamaño original de la caja: el aspecto sobre la base de la resta (si se estira un elemento de contenido, no hay ancho establecido y la altura, el relleno directamente distracción no tiene que cortar.)
5: si el Añadir un acolchado dirección, es decir, padding-arriba / abajo / izquierda / derecha y hacia abajo sobre
6: el relleno de características dispuestas:
padding: 30px; derecho inferior izquierda
padding: 10px 30px; arriba y abajo
padding: la superior izquierda 30px 50px 10px
padding: 10px 30px 50px 100px a la derecha inferior izquierda
7: relleno no afectará a la posición de la imagen de fondo.
Los márgenes (margen) Uso
1: margen en la periferia del elemento, el tamaño de los elementos no se estira
2: Acción: para controlar el espaciado entre los elementos y el elemento.
3: la adición a un solo margen de dirección
margen-izquierda / derecha / arriba / abajo
método de margen de ajuste:: 4.
Margen: 30px; derecho inferior izquierda
margen: 10px 30px; vertical y horizontal
margen: 30px 50px izquierda bajo la 10px
margen: 10px 30px 50px 100px en la parte inferior derecha a la izquierda
5: margin: 0 auto; dejar que el elemento actual se centra en el elemento padre dentro.
6: margen de error a menudo aparecen
1): valores de margen de dos elementos adyacentes verticalmente superpuestas de acuerdo con el valor más grande no está establecida.
2): Si el elemento primario y el caso en que no hay flotación de la primera sub-elemento, el primer subelemento añaden a marginTop, colocado incorrectamente en la parte superior del elemento padre.
Borders (frontera) Uso
1: frontera es un elemento de frontera para cambiar el tamaño de los elementos originales de
2: Función: a elementos más una frontera.
3: una sola dirección para añadir frontera
frontera-izquierda / derecha / arriba / abajo
. 4: frontera atributo border-color / estilo / anchura / anchura del borde, color / estilo
5: Método de ajuste de la frontera:
border-top / derecha / abajo / estilo de la izquierda :; la inferior derecha estilo de borde izquierda
border-top / derecha / abajo / izquierda-anchura :; ancho del borde izquierdo en la parte inferior derecha
border-top / derecha / inferior / color izquierda :; derecho inferior izquierda color del borde
border-top / derecho / inferior / izquierda: sólido rojo 1px; superior / derecha / inferior color de borde / izquierda línea roja valor sólido propiedad 1 píxel, independientemente del orden de cuatro direcciones vertical y horizontal tiene
frontera: 1px sólido rojo; los valores de propiedad de píxel rojo Color del borde de línea sólida orden alfabético arriba y abajo cuatro direcciones
