Directorio de artículos
1. Tres formas de diseño de página web tradicional
CSS proporciona tres métodos de diseño tradicionales (en resumen, cómo se organizan los cuadros en orden):
- Flujo ordinario (flujo estándar) El
llamado flujo estándar: la etiqueta está dispuesta de una manera predeterminada y prescrita.
- Los elementos a nivel de bloque ocuparán una fila por sí mismos, dispuestos en orden de arriba a abajo.
Elementos comunes: div, hr, p, h1 ~ h6, ul, ol, dl, form, table - Los elementos de la fila se organizarán en orden, de izquierda a derecha, y se ajustarán automáticamente cuando toquen el borde del elemento principal.
Elementos comunes: span, a, i, em, etc. Los
anteriores son todos los diseños de flujo estándar Lo que aprendimos anteriormente es el flujo estándar, que es el método de diseño más básico.
- flotador
- Posicionamiento
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).
2. ¿Por qué necesitamos flotar?
2.1 ¿Cómo organizar varias cajas de nivel de bloque (div) horizontalmente en una fila?
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
float:left;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
Aunque la conversión a elementos de bloque en línea puede lograr una visualización de una línea, habrá un gran espacio entre ellos, que es difícil de controlar
2.2 ¿Cómo realizar la alineación de izquierda a derecha de dos cajas?
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<body>
<div class="left">1</div>
<div class="right">2</div>
</body>
</html>
2.3 Resumen
Resumen: hay muchos efectos de diseño y el flujo estándar no se puede completar. En este momento, puede usar float para completar el diseño. Porque float puede cambiar la disposición predeterminada de las etiquetas de los elementos.
La aplicación más típica de la flotación: se pueden mostrar varios elementos a nivel de bloque en una fila.
La primera regla del diseño de la página web: varios elementos a nivel de bloque se organizan verticalmente para encontrar la secuencia estándar, y varios elementos a nivel de bloque se organizan horizontalmente para encontrar flotantes.
3. ¿Qué es flotar?
El atributo flotante se usa para crear una caja flotante y moverla hacia un lado hasta que el borde izquierdo o derecho toque el borde del bloque contenedor u otra caja flotante.
gramática:
选择器 { float: 属性值; }
4. Características flotantes
4.1 Los elementos flotantes se desviarán del flujo estándar (fuera del estándar)
Salga del control del flujo ordinario estándar (flotante) y muévase a la posición especificada (en movimiento) (comúnmente conocida como fuera de estándar) la
caja flotante ya no conserva su posición original
4.2 Los elementos flotantes se mostrarán en una línea y la parte superior del elemento se alineará
Nota: Los elementos flotantes están unidos entre sí (sin espacios). Si el ancho del padre no se ajusta a estos cuadros flotantes, los cuadros adicionales se alinearán en una nueva línea.
4.3 Los elementos flotantes tendrán las características de los elementos de bloque en línea.
Cualquier elemento puede flotar. Independientemente del modo original del elemento, después de agregar flotadores, tiene características similares al elemento de bloque en línea.
- Si el cuadro de nivel de bloque no establece el ancho, el ancho predeterminado es el mismo que el principal, pero después de agregar un flotador, su tamaño se determina de acuerdo con el contenido.
- No hay espacio entre las cajas flotantes , están una al lado de la otra.
5. Los elementos flotantes se utilizan a menudo junto con el padre de la secuencia estándar
Para restringir la posición de los elementos flotantes, la estrategia que generalmente adopta nuestro diseño de página web es:
primero organizar las posiciones superior e inferior con el elemento principal del flujo estándar, y luego adoptar la disposición flotante de los elementos secundarios internos. en línea con el primer estándar de diseño de páginas web.
6. Ejemplos de diseños comunes
6.1
Piense en ello como una caja grande con dos cajas adentro, y estas dos cajas deben usar flotador
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
width: 230px;
height: 460px;
float:left;
background-color:cornflowerblue;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6.2
Piense en ello como una caja grande con 4 cajas pequeñas, y las 4 cajas pequeñas usan flotadores.
Esto se puede lograr con ul li.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
float:left;
width: 296px;
height: 285px;
background-color: powderblue;
margin-right: 14px;
}
.box .last {
margin-right: 0px;
}
</style>
</head>
<body>
<ul class="box">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</body>
</html>
6.3
Piense en ello como una caja grande con dos subcajas: la de la izquierda es la púrpura, que usa flotadores; la caja de la derecha tiene 8 subcajas más, implementadas con ul li, todas usando flotadores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 615px;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>
6.4
Visto como 4 cajas grandes de arriba a abajo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style:none;
}
.top {
height: 50px;
background-color: skyblue;
}
.banner {
width: 830px;
height: 200px;
background-color: skyblue;
margin: 15px auto;
}
.box {
width: 830px;
height: 300px;
background-color:skyblue;
margin: 0 auto;
}
.box li {
float: left;
width: 200px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 100px;
background-color: skyblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
6.5
Los dos siguientes también son diseños comunes de páginas web, por lo que no quiero escribir sobre ellos.
