1. Modelo de diseño CSS
Conociendo el concepto básico del modelo de caja CSS y el tipo de modelo de caja, podemos profundizar en el modelo básico de diseño de página web. Al igual que el modelo de caja, el modelo de diseño es el concepto más básico y básico de CSS. Pero el modelo de diseño se basa en el modelo de caja, y es diferente del estilo de diseño CSS o la plantilla de diseño CSS que solemos decir. Si el modelo de diseño es este, entonces la plantilla de diseño CSS es el final, es la forma externa de expresión.
CSS contiene 3 modelos de diseño básicos, resumidos en inglés como: Flow, Layer y Float.
En una página web, hay tres modelos de diseño para elementos:
- Modelo de flujo (Flow)
- Modelo flotante (flotante)
- Modelo de capa (capa)
¿Qué son exactamente los tres modelos de diseño? Las siguientes secciones le presentarán en detalle.
2. Modelo de flujo (1)
Permítanme hablar primero sobre el modelo de flujo. El flujo es el modo de diseño de página web predeterminado. En otras palabras, los elementos de la página HTML en el estado predeterminado de la página se distribuyen de acuerdo con el modelo de flujo.
El modelo de diseño de flujo tiene dos características típicas:
El primer punto es que los elementos de bloque se extenderán verticalmente en orden de arriba a abajo dentro del elemento contenedor, porque en el estado predeterminado, el ancho de los elementos de bloque es del 100%. De hecho, los elementos de bloque ocupan posiciones en filas. Por ejemplo, el ancho de las tres etiquetas de elemento de bloque (div, h1, p) en el editor de código de la derecha se muestra como 100%.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>
3. Modelo de flujo (2)
Segundo, bajo 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 pueden no ser tan dominantes y exclusivos como un elemento de bloque)
Las etiquetas de elementos en línea a, span, em y strong en el editor de código de la derecha son todos elementos en línea.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>
</body>
</html>
4. Modelo flotante
Los elementos de bloque son tan dominantes que todos están en su propia línea. ¿Qué pasa si queremos que dos elementos de bloque se muestren uno al lado del otro? No se preocupe, configure el elemento flotante para lograr este deseo.
Cualquier elemento no se puede flotar de forma predeterminada, pero se puede definir como flotante mediante CSS. Elementos como div, p, table, img, etc. se pueden definir como flotantes. El siguiente código puede mostrar dos elementos div en una fila.
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
Imagen del efecto: por
supuesto, también puede configurar dos elementos para que floten al mismo tiempo, y también puede mostrar una línea.
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
Imagen del efecto:
otro amigo preguntó: ¿puedes configurar dos elementos, uno a la izquierda y otro a la derecha, para realizar una visualización de línea? Por supuesto:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
Imagen del efecto:
5. Modelo de 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 con precisión, pero en el campo del diseño web, debido a la actividad del tamaño de la página web, el diseño de la capa no ha sido popular. Sin embargo, es conveniente usar el diseño de capa localmente en la página web. Aprendamos sobre el diseño de la capa en html.
Cómo hacer que los elementos html se coloquen con precisión en una página web, al igual que las capas en el software de imágenes PhotoShop, se pueden colocar con precisión para cada capa. CSS define un conjunto de propiedades de posicionamiento para admitir el modelo de diseño de capa.
El modelo de capa tiene tres formas:
-
Posición: absoluta
-
Posicionamiento relativo (posición: relativa)
-
Posición: fija
6. Posicionamiento absoluto de modelo de capa
Si desea establecer para el modelo de capa del elemento de posicionamiento absoluto, es necesario set position: absolute (posicionamiento absoluto expresado) , el papel de esta declaración será arrastrado fuera de los elementos del flujo de documentos, y luego usar la left、right、top、bottompropiedad con respecto a su más cercano con un atributo de ubicación El padre contiene el bloque para el posicionamiento absoluto. Si no existe dicho bloque contenedor, es relativo al elemento del cuerpo, es decir, relativo a la ventana del navegador.
Por ejemplo, el siguiente código puede mover el elemento div a la derecha en 100px en relación con la ventana del navegador y hacia abajo en 50px.
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
El efecto es el siguiente:
7. Posicionamiento relativo del modelo de capa
Si desea establecer el posicionamiento relativo del modelo de capa para el elemento, debe establecerlo position:relative（表示相对定位）, lo que left、right、top、bottomdetermina la posición de desplazamiento del elemento en el flujo normal de documentos a través del atributo. El proceso de posicionamiento relativo es static(float)generar primero un elemento de una manera (y el elemento flota como una capa), y luego moverse en relación con la posición anterior, la dirección y la amplitud del movimiento están determinadas por los atributos izquierdo, derecho, superior e inferior, antes del desplazamiento Permanece intacto.
El siguiente código implementa moverse 50px hacia abajo en relación con la posición anterior y moverse 100px hacia la derecha;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
Diagrama de efectos:
¿cómo “偏移前的位置保留不动”se llama ?
Puede hacer un experimento, divagregar una spanetiqueta después de las 19 líneas del editor de código a la derecha y spanescribir algo de texto en la etiqueta. El siguiente código:
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
Imagen del efecto:
se puede ver claramente a partir de la imagen del efecto que, aunque el elemento div está desplazado de la posición anterior, la posición anterior del elemento div todavía se conserva, por lo que el siguiente elemento span se muestra en la posición anterior del elemento div Detrás
8. Posicionamiento fijo de modelo de capa
fijo: indica un posicionamiento fijo, similar al absolutetipo de posicionamiento, pero su coordenada de movimiento relativa es la vista (ventana de la página web en la pantalla) en sí. Como 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 el elemento de posicionamiento fijo siempre estará ubicado Una determinada posición de la vista en la ventana del navegador no se verá afectada por el flujo de documentos, que background-attachment:fixed;es lo mismo que la función de atributo. El siguiente código puede mover 100 píxeles hacia la derecha y 50 píxeles hacia abajo en relación con la vista del navegador. Y la posición se fija al arrastrar la barra de desplazamiento.
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本。</p>
....
Imagen del efecto:
9. Relativo combinado con absoluto
Los amigos han aprendido el método de posicionamiento absoluto en 6 secciones: después de usar el posicionamiento del position:absoluteelemento establecido en relación con el navegador (cuerpo) , ¿ha pensado si puede posicionarse en relación con otros elementos? La respuesta es sí, por supuesto. Úselo position:relativepara ayudar, pero se deben seguir las siguientes especificaciones:
1. El elemento de posicionamiento de referencia debe ser el elemento predecesor del elemento de posicionamiento relativo:
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
Se puede ver en el código anterior que box1 es el elemento padre de box2 (el elemento padre es, por supuesto, también el elemento predecesor).
2. Los elementos referenciados deben agregarse a position: relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3. Posición agregada del elemento de posicionamiento: absoluta, puede usar la parte superior, inferior, izquierda, derecha para compensar el posicionamiento.
#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 puede no ser un navegador, pero se puede configurar libremente).
