1. Tres formas de diseño de páginas web tradicionales
La esencia del diseño de una página web: use CSS para colocar cuadros y colocarlos en las posiciones correspondientes.
CSS proporciona tres métodos de diseño tradicionales (en pocas palabras, cómo se organizan las cajas).
(1) Flujo ordinario (flujo estándar)
(2) flotante
(3) Posicionamiento
Esto solo se refiere al diseño tradicional. De hecho, existen algunos métodos de diseño especiales y avanzados.
2. Flujo estándar (flujo normal/flujo de documentos)
El llamado flujo estándar: las etiquetas se organizan de una forma predeterminada prescrita.
(1) Los elementos a nivel de bloque ocuparán una línea exclusiva y estarán ordenados de arriba a abajo.
(2) Los elementos en línea se organizarán en orden de izquierda a derecha y se ajustarán automáticamente cuando lleguen al borde del elemento principal.
Los anteriores son todos diseños de flujo estándar. Lo que estudiamos anteriormente es el flujo estándar. El flujo estándar es el método de diseño más básico.
Estos tres métodos de diseño se utilizan para colocar cuadros. Cuando los cuadros se colocan en la posición adecuada, el diseño se completa de forma natural.
Nota: En el desarrollo real, una página contiene básicamente estos tres métodos de diseño (el terminal móvil aprenderá nuevos métodos de diseño más adelante).
3. ¿Por qué es necesario flotar?
Pregunta: ¿Podemos lograr fácilmente los siguientes efectos utilizando transmisiones estándar?
1. ¿Cómo organizar varios cuadros a nivel de bloque (divs) en una fila horizontalmente?
Aunque la conversión a elementos de bloque en línea puede lograr una visualización en fila, habrá un gran espacio en blanco entre ellos, lo cual es difícil de controlar.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< título>Bloque en línea Hay espacios intermedios</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></head><body><div> 1</div><div>2</div><div>3</div></body></html>Resultados de ejecución:
2. ¿Cómo alinear dos cajas a izquierda y derecha?
Hay muchos efectos de diseño que no se pueden completar con el flujo estándar. En este momento, se puede utilizar la flotación para completar el diseño. Porque la flotación puede cambiar la disposición predeterminada de las etiquetas de los elementos.
La aplicación más típica de los flotadores: permitir que se muestren en una fila múltiples elementos a nivel de bloque.
La primera regla del diseño de una página web: varios elementos a nivel de bloque dispuestos verticalmente buscan un flujo estándar, varios elementos a nivel de bloque dispuestos horizontalmente buscan un flujo flotante.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< título>Muchos Los elementos a nivel de bloque están dispuestos horizontalmente y flotan</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head><body>< div >1</div><div>2</div><div>3</div></body></html>Resultados de ejecución:
4. ¿Qué es flotar?
La propiedad flotante se usa para crear un cuadro flotante, moviéndolo a un lado hasta que el borde izquierdo o derecho toque el borde del bloque contenedor u otro cuadro flotante.
gramática:
Selector {flotante: valor del atributo;}Ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=ancho del dispositivo, inicial-scale=1.0><title>Documento</title><style>/*Las etiquetas flotantes están alineadas en la parte superior*//*Flotante: dispuestas en una línea, el ancho y el alto tienen efecto; las etiquetas flotantes tienen las características de en línea bloques*/. uno{ancho:100px;alto:100px;fondo-colo r:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*Debido a que hay flotador, no puede tener efecto - el cuadro no se puede centrar horizontalmente* /margin:0auto; }.tres{ancho:300px;alto:300px;fondo-color:orange;}</style></head><body><div>uno</div><div>dos</div><div>tres </div></body></html>Resultados de ejecución:
