[Dirección original] (http://blog.csdn.net/qq_18407565/article/details/70234834) modelo de diseño css: aclare los conceptos básicos del modelo de caja CSS, tipo de modelo de caja, podemos analizar en profundidad el diseño de la página web El modelo básico. El modelo de diseño y el modelo de caja son los conceptos más básicos y centrales de CSS. Pero el modelo de diseño se basa en el modelo de caja, que es diferente de los estilos de diseño CSS o las plantillas de diseño CSS que solemos decir. Si el modelo de diseño es la esencia, entonces la plantilla de diseño CSS es el final, una forma externa de expresión. CSS incluye tres modelos de diseño básicos, modelo de flujo, modelo de capa y modelo flotante en inglés como: Flow, Layer y Float. En la página web, hay tres modelos de diseño para elementos: 1. Modelo de flujo (Flujo) 2. Modelo flotante (Flotante) 3. Modelo de capa (Capa) ———- Modelo de flujo (Flujo) Hablemos primero del modelo de flujo , flow (Flow) es el modo de diseño de página web predeterminado. Es decir, los elementos de la página HTML de la página web en el estado predeterminado están todos distribuidos según el modelo de flujo. -Dos características del modelo de diseño fluido 1. Los elementos de bloque se extenderán verticalmente en orden de arriba hacia abajo dentro del elemento contenido, porque en el estado predeterminado, el ancho de los elementos de bloque es 100%. De hecho, los elementos de bloque ocuparán posiciones en forma de filas. Por ejemplo, el ancho de tres etiquetas de elementos de bloque (div, h1, p) en el editor de código de la derecha se muestra como 100%. 2. En el modelo de flujo, los elementos en línea se muestran horizontalmente de izquierda a derecha dentro del elemento contenido. (Los elementos en línea no son tan dominantes como los elementos de bloque dominan su propia línea) ** Modelo flotante (Flotante) ** Si los elementos de bloque son tan dominantes, todos están en su propia línea. ¿Qué pasa si queremos mostrar dos elementos de bloque uno al lado del otro? ¿lado? No se preocupe, puede lograr este deseo configurando el elemento para que flote. Cualquier elemento no puede flotar de forma predeterminada, pero puede definirse como flotante mediante CSS, como div, p, table, img y otros elementos se pueden definir como flotantes. El siguiente código puede mostrar dos elementos div en una línea. ** Modelo de capa (Capa) ** ¿Qué es un modelo de diseño de capa? El modelo de diseño de capas es como la función de edición de capas muy popular en el software de imágenes PhotoShop. Cada capa se puede colocar y operar con precisión. Sin embargo, en el campo del diseño web, debido a la actividad del tamaño de la página, el diseño de la capa no ha sido popular. Sin embargo, es conveniente utilizar el diseño de capas localmente en una página web. Aprendamos sobre el diseño de capas en html. Cómo colocar con precisión elementos html en una página web, al igual que las capas en el software de imagen PhotoShop, puede colocar con precisión cada capa. CSS define un conjunto de propiedades de posicionamiento para admitir el modelo de diseño de capas. ** El modelo de capa tiene tres formas: ** 1. Posicionamiento absoluto (posición: absoluta) 2. Posicionamiento relativo (posición: relativa) 3. Posicionamiento fijo (posición: fijo) Los siguientes son los detalles específicos de las tres formas de modelo de capa - * * Modelo de capa-Posicionamiento absoluto ** Si desea establecer el posicionamiento absoluto en el modelo de capa para un elemento, debe establecer la posición: absoluta (posicionamiento absoluto). El propósito de esta declaración es arrastrar el elemento fuera de el flujo del documento y, a continuación, utilice la izquierda y la derecha. Los atributos, superior e inferior se colocan absolutamente en relación con el bloque contenedor principal más cercano con atributos de posición. Si no existe tal bloque contenedor, es relativo al elemento del cuerpo, es decir, relativo a la ventana del navegador. - ** Posicionamiento relativo del modelo de capa ** Si desea establecer el posicionamiento relativo en el modelo de capa para el elemento, debe establecer la posición: relativo (que representa el posicionamiento relativo), que determina la posición de desplazamiento del elemento en el flujo de documentos normal a través de los atributos izquierdo, derecho, superior e inferior. El proceso de posicionamiento relativo consiste en generar primero un elemento en modo estático (flotante) (y el elemento flota como una capa), y luego moverse en relación con la posición anterior. La dirección y amplitud del movimiento están determinadas por la izquierda, la derecha , atributos superior e inferior., La posición antes del desplazamiento permanece sin cambios. - ** Modelo de capa-Posicionamiento fijo ** fijo: significa posicionamiento fijo, similar al tipo de posicionamiento absoluto, pero sus coordenadas de movimiento relativo son la vista (ventana de página web en la pantalla) en sí. Dado que la vista en sí es fija, no cambiará con la barra de desplazamiento de la ventana del navegador, a menos que mueva la posición de la ventana del navegador en la pantalla o cambie el tamaño de visualización de la ventana del navegador, por lo que los elementos de posicionamiento fijo siempre serán localizado Una determinada posición de la vista en la ventana del navegador no se verá afectada por el flujo del documento, que tiene la misma función que el atributo background-attach: fixed; El siguiente código puede moverse 100px hacia la derecha y 50px hacia abajo en relación con la vista del navegador. Y la posición se fija cuando se arrastra la barra de desplazamiento. 8Relative y Absolute se utilizan en combinación. Los amigos han aprendido el método de posicionamiento absoluto en la sección 12-6: use position: absolute para realizar el posicionamiento del elemento establecido en relación con el navegador (cuerpo). ¿Alguna vez ha pensado en si puede ser relativo a otros ¿Qué tal el posicionamiento de elementos? La respuesta es sí, por supuesto. Posición de uso: relativa a la ayuda, pero debe cumplir con las siguientes especificaciones: 1. El elemento posicionado de referencia debe ser el predecesor del elemento posicionado relativamente:
Posicionamiento relativo a elementos de referencia
A partir del código anterior, podemos ver que box1 es el elemento padre de box2 (el elemento padre, por supuesto, también es el elemento predecesor).
2. El elemento de posicionamiento de referencia debe agregarse posición: relativa;
box1 {
width:200px;
height:200px;
position:relative;
}
3. Agregue posición: absoluta al elemento de posicionamiento, y luego puede usar arriba, abajo, izquierda y derecha para el posicionamiento de desplazamiento.
box2 {
position:absolute;
top:20px;
left:30px;
} De
esta manera, box2 se puede colocar en relación con el elemento padre box1 (tenga en cuenta que el objeto de referencia aquí no es un navegador, pero se puede configurar libremente).