Análisis completo del diseño CSS.

---

---

I. Introducción

Diseño CSS - Aprenda Desarrollo Web | MDN
El diseño CSS se refiere a controlar la posición y el tamaño de los elementos HTML en la página a través de estilos CSS. Los métodos de diseño CSS comunes incluyen:

1. Diseño del modelo de caja: controle el tamaño y la posición de los elementos estableciendo atributos como ancho, alto, relleno, borde y margen de los elementos.
2. Diseño flotante: al establecer el atributo flotante del elemento, el elemento se separa del flujo del documento y el diseño flotante se realiza de acuerdo con su posición en el documento.
3. Diseño de posicionamiento: controle la posición del elemento en la página configurando el atributo de posición del elemento y atributos como arriba, abajo, izquierda y derecha.
4. Diseño de caja elástica (Flexbox): controle la posición y el tamaño del elemento en el contenedor de la caja elástica configurando la visualización: atributo flexible y dirección flexible, justificación de contenido, alineación de elementos y otros atributos del elemento.
5. Diseño de cuadrícula (Cuadrícula): configurando la visualización del elemento: atributo de cuadrícula y columnas de plantilla de cuadrícula, filas de plantilla de cuadrícula, columna de cuadrícula, fila de cuadrícula y otros atributos para controlar la posición y el tamaño del elemento en el contenedor de cuadrícula .

Los métodos de diseño anteriores tienen sus propias características y escenarios aplicables, y los desarrolladores pueden elegir el método de diseño apropiado según las necesidades reales.

Dirección de origen : diseño CSS

Dos, diseño flexible (de uso común)

Flexbox - Aprenda Desarrollo Web | MDN

Tutorial de gramática de diseño flexible | Tutorial para principiantes

Comprensión profunda del documento de desarrollo de crecimiento flexible, contracción flexible y base flexible

flex-grow, flex-shrink y flex-basis son las tres propiedades utilizadas en CSS para configurar un elemento flexible.

• La propiedad flex-grow especifica la proporción del espacio restante del elemento flexible en el contenedor flexible. El valor predeterminado es 0, lo que significa que el elemento no crecerá cuando haya suficiente espacio.
• La propiedad flex-shrink especifica la proporción del elemento flexible cuando no hay espacio suficiente. El valor predeterminado es 1, lo que significa que el elemento se reducirá cuando no haya suficiente espacio.
• La propiedad flex-basis especifica el tamaño inicial del elemento flexible en la dirección del eje principal. El valor predeterminado es automático, lo que significa que el tamaño inicial del elemento está determinado por su contenido y otros atributos (como ancho, alto, etc.). Prioridad ancho máximo/ancho mínimo > base flexible > ancho > caja

Tres, diseño de cuadrícula (de uso común)

grid - aprende desarrollo web | MDN

Jardín de rejilla

El diseño CSS más potente - Diseño de cuadrícula - Nuggets

Cuatro, flotar flotando

Flotador - Aprenda Desarrollo Web | MDN

Flotar en CSS es un método de diseño que saca elementos del flujo del documento y los hace flotar según su posición en el documento. Los elementos flotantes se colocan lo más cerca posible del lado izquierdo o derecho del contenedor y ocupan tanto espacio en el contenedor como sea posible. Los elementos flotantes se pueden lograr estableciendo la propiedad flotante.

4.1 Ejemplo sencillo

.box {
    
    
  float: left;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  margin-right: 25px;
}

4.2 Efecto flotante visual

El párrafo no se elimina, pero el cuadro flotante empuja el texto hacia la derecha.

4.3 Flotación clara

Deberías ver que el segundo párrafo ha dejado de flotar y ya no seguirá a los elementos flotantes. El atributo clear acepta los siguientes valores:

• izquierda: detiene cualquier flotador izquierdo activo
• derecha: detiene cualquier flotación derecha activa
• ambos: detiene cualquier flotador activo izquierdo y derecho

4.4 Borrar caja flotante

[Introducción a Xiaobai] Float, Clear Float y BFC: se busca programador

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<div class="content">
  content
</div>

4.4.1 Establecer la altura del elemento principal (no recomendado)

.wrapper {
    
    
      width: 100%;
      height: 200px;
      background-color: skyblue;
      border: 1px solid #ccc;
  }

No se recomienda por las siguientes razones:

1. desbordamiento de contenido

Cuando el contenido del elemento secundario excede la altura del elemento principal, hará que el contenido se desborde, lo que afectará el efecto del diseño. Si utiliza una altura fija para establecer la altura del elemento principal, no podrá adaptarse a la altura del elemento secundario, lo que puede causar el problema de desbordamiento de contenido.

1. Disposición Responsive

En un diseño responsivo, el diseño debe ajustarse según los diferentes tamaños de dispositivos. Si utiliza una altura fija para establecer la altura del elemento principal, no podrá adaptarse a diferentes tamaños de dispositivos, lo que puede causar confusión en el diseño.

1. alto costo de mantenimiento

Cuando necesita modificar el diseño, si usa una altura fija para establecer la altura del elemento principal, debe modificar manualmente el valor de altura, lo que aumenta los costos de mantenimiento. Sin embargo, si utiliza otros métodos de diseño, como flexbox o diseño de cuadrícula, puede realizar ajustes de diseño de manera más conveniente.

4.4.2 Agregar subcontenedores (no recomendado)

.clear {
    
    
   /* 清除左右浮动元素 */
  clear: both;
}

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="clear"></div>
</div>

Razón: aumentar la estructura de etiquetas inútiles

4.4.3 Cambiar el elemento afectado a continuación (no recomendado)

.content {
    
    
      width: 500px;
      height: 200px;
      background-color: pink;
      clear: both;
  }

Motivo: este método solo puede borrar el elemento flotante anterior, pero el elemento flotante no expande el elemento principal

4.4.4 Pseudoelementos

.wrapper::after {
    
    
    content: "";
    display: block;
    clear: both;
}

4.4.5 Uso de BFC

.wrapper {
    
    
    width: 100%;
    /* height: 200px; */
    background-color: skyblue;
    border: 1px solid #ccc;
    overflow: hidden;
}

Cinco, posicionamiento de posición (de uso común)

Orientación - Aprenda Desarrollo Web | MDN

5.1 Posicionamiento estático (estático)

El posicionamiento estático (estático) es el método de posicionamiento predeterminado para los elementos, y los elementos se organizan según su orden en HTML. Bajo el posicionamiento estático, la posición de un elemento no se verá afectada por los atributos superior, inferior, izquierda, derecha, índice z y otros, ni se verá afectada por otros elementos. Por lo tanto, los elementos colocados estáticamente se disponen en su orden en el HTML y no se salen del flujo del documento.

.positioned {
    
    
  position: static;
  background: yellow;
}

5.2 Posicionamiento relativo (relativo)

.positioned {
    
    
      position: relative;
      background-color: yellow;
      top: 50px;
      left: 50px;
  }

El posicionamiento relativo (relativo) se coloca en relación con la posición del elemento original en el flujo de documentos, y el objeto de referencia es la posición del elemento en el flujo de documentos.

En el posicionamiento relativo, la posición de un elemento se puede ajustar estableciendo propiedades como arriba, abajo, izquierda y derecha, pero el elemento aún ocupa su posición en el flujo de documentos y no afectará el diseño de otros elementos.

5.3 Posicionamiento absoluto (absoluto)

El posicionamiento absoluto (absoluto) se coloca en relación con el elemento ancestro posicionado más cercano del elemento, o en relación con la esquina superior izquierda del documento si no hay un elemento ancestro posicionado. En el posicionamiento absoluto, la posición del elemento se puede ajustar estableciendo propiedades como arriba, abajo, izquierda y derecha, y el elemento se separará del flujo del documento, lo que puede afectar el diseño de otros elementos.

**En posicionamiento absoluto, el elemento se separará del flujo del documento y ya no ocupará el espacio original, por lo que su ancho ya no estará limitado por el elemento principal. ** En este ejemplo, el elemento .positioned tiene la posición: absoluta establecida, por lo que es un elemento de posición absoluta que ya no ocupa el espacio original y el ancho predeterminado es el ancho del contenido. Dado que el ancho del elemento .positioned ya no está restringido por el elemento principal, su ancho se convierte en el ancho del contenido más el ancho del relleno y el borde. Si necesita establecer el ancho del elemento .positioned, puede configurarlo configurando el atributo de ancho.

5.4 Relación en cascada (índice z)

El índice z es una propiedad utilizada en CSS para controlar el orden de apilamiento de los elementos. En elementos cuyos métodos de posicionamiento son **relativo, absoluto, fijo y fijo**, puede utilizar el atributo de índice z para controlar el orden de apilamiento de los elementos. Cuanto mayor sea el valor del atributo del índice z, más cerca estará el elemento de la parte superior, superponiéndose a otros elementos.
Cabe señalar que la propiedad del índice z solo es válida para elementos posicionados y no es válida para elementos no posicionados.

5.5 Posicionamiento fijo (fijo)

El posicionamiento fijo (fijo) es un método de posicionamiento que permite que un elemento tenga una posición fija en relación con la ventana del navegador. En el posicionamiento fijo, la posición del elemento se puede ajustar estableciendo propiedades como arriba, abajo, izquierda y derecha, y el elemento se separará del flujo del documento sin afectar el diseño de otros elementos.

5.6 Posicionamiento adhesivo (sticky)

Es básicamente un híbrido de posición relativa y posición fija, que permite que un elemento posicionado se comporte como si estuviera en una posición relativa hasta que se desplaza hasta un cierto punto umbral (digamos, 10 píxeles desde la parte superior de la ventana gráfica), después de lo cual se vuelve fijo. Por ejemplo, se puede utilizar para hacer que la barra de navegación se desplace con la página hasta un punto determinado y luego se mantenga en la parte superior de la página.

6. Diseño responsivo

Diseño responsivo - aprende desarrollo web | MDN

7. Consultas de los medios

Una guía para principiantes sobre consultas de medios: aprenda sobre desarrollo web | MDN

CSS Media Queries (Consultas de medios) es una técnica que se utiliza para aplicar diferentes estilos para diferentes dispositivos y tamaños de pantalla. El diseño responsivo se puede lograr mediante el uso de consultas de medios para hacer que la página web muestre el mejor efecto de visualización en diferentes dispositivos.

@media media-type and (media-feature-rule) {
    
    
  /* CSS rules go here */
}

//简写
@media  (media-feature-rule) {
    
    
  /* CSS rules go here */
}

Consta de las siguientes partes:

• Un tipo de medio que le indica al navegador para qué tipo de medio está destinado este código (por ejemplo, impresión o pantalla);
• Una expresión multimedia, que es una regla o prueba necesaria para que el CSS incluido entre en vigor;
• Un conjunto de reglas CSS que se aplicarán cuando la prueba pase y el tipo de medio sea correcto.

tipo-medio es el tipo de medio, que especifica el tipo de dispositivo al que se aplica la consulta de medios. Los tipos de medios comunes incluyen:

• todos: se aplica a todos los dispositivos;
• pantalla: adecuada para pantallas de ordenador, tabletas, teléfonos inteligentes, etc.;
• imprimir: para impresoras y vistas previas de impresión;
• voz: Para dispositivos de síntesis de voz, como lectores de pantalla.

8. BFC

Contexto de formato de bloque: una guía para desarrolladores web | MDN

Dominar el colapso de márgenes - CSS: Hojas de estilo en cascada | MDN

Problemas y soluciones de fusión y colapso de márgenes_Cómo resolver la fusión de márgenes externos_Blog de Chen Xianzhi-Blog CSDN

10. Diseño práctico

10.1 Columna única

Explicación : modelo de caja general a nivel de bloque, mostrado capa por capa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
    
    
            max-width: 1200px;
            margin: 0 auto;
            background-color: gray;
        }

        header,
        .main,
        footer {
    
    
            height: 100px;
            background-color: #fff;

        }

        header {
    
    
            height: 10vh;
            background-color: pink;
            margin-bottom: 5vh;
        }

        .main {
    
    
            height: 70vh;
            background-color: skyblue;
            margin-bottom: 5vh;
        }

        footer {
    
    
            height: 10vh;
            background-color: yellow;
        }
    </style>
    <title>单列布局</title>
</head>

<body>
    <header></header>
    <div class="main"></div>
    <footer></footer>
</body>

</html>

10.2 Columnas dobles

Explicación : El diseño de doble columna tiene un ancho fijo a la izquierda y adaptable a la derecha. Generalmente existen cuatro métodos, a saber, flotante, posicionamiento, diseño flexible y diseño de cuadrícula.

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

10.2.1 Flotante

.left {
    
    
    float: left;
    width: 200px;
    height: 100%;
    background-color: pink;
}

.right {
    
    
    margin-left: 200px;
    width: auto;
    height: 100%;
    background-color: skyblue;
}

10.2.2 Posicionamiento

.container {
    
    
    position: relative;
    width: 100%;
    height: 100vh;
}

.left {
    
    
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: pink;
}

.right {
    
    
    margin-left: 200px;
    height: 100%;
    background-color: skyblue;
}

10.2.3 diseño flexible

.container {
    
    
    display: flex;
    width: 100%;
    height: 100vh;
}

.left {
    
    
    width: 200px;
    height: 100%;
    background-color: pink;
}

.right {
    
    
    flex: 1;
    background-color: skyblue;
    height: 100%;
}

10.2.4 diseño de cuadrícula

.container {
    
    
    display: grid;
    grid-template-columns: 200px 1fr;
    width: 100%;
    height: 100vh;
}

.left {
    
    
    height: 100%;
    background-color: pink;
}

.right {
    
    
    background-color: skyblue;
    height: 100%;
}

10.3 Tres columnas

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

Explicación : Ancho fijo en los lados izquierdo y derecho, autoadaptable en el medio

10.3.1 Flotante

.container {
    
    
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.left {
    
    
  float: left;
  width: 100px;
  height: 100%;
  background-color: pink;
  display: block;
}

.center {
    
    
  background-color: darksalmon;
  margin: 0 100px;
  height: 100%;
}

.right {
    
    
  float: right;
  width: 100px;
  background-color: skyblue;
  height: 100%;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

Nota: El elemento central debe escribirse al final al diseñar, porque el cuadro del medio se abre de forma predeterminada. Si se coloca en primer lugar, hará que los elementos flotantes de los lados izquierdo y derecho caigan.

10.3.2 Posicionamiento

.container {
    
    
  position: relative;
  width: 100%;
  height: 100vh;

}

.left {
    
    
  position: absolute;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: pink;
}

.center {
    
    
  margin: 0 100px;
  height: 100%;
  background-color: darksalmon;
}

.right {
    
    
  position: absolute;
  right: 0;
  width: 100px;
  background-color: skyblue;
  height: 100%;
}

10.3.3 diseño flexible

.container {
    
    
    display: flex;
    width: 100%;
    height: 100vh;

}

.left {
    
    
    width: 200px;
    height: 100%;
    background-color: pink;
}

.center {
    
    
    flex: 1;
    height: 100%;
    background-color: darksalmon;
}

.right {
    
    
    width: 200px;
    background-color: skyblue;
    height: 100%;
}

10.3.4 diseño de cuadrícula

.container {
    
    
    display: grid;
    grid-template-columns: 100px auto 100px;
    width: 100%;
    height: 100vh;

}

.left {
    
    

    height: 100%;
    background-color: pink;
}

.center {
    
    
    height: 100%;
    background-color: darksalmon;
}

.right {
    
    
    background-color: skyblue;
    height: 100%;
}

10.4 El Santo Grial y las Alas Gemelas

Diseño CSS clásico de tres columnas: diseño del Santo Grial y diseño de ala voladora doble: pepitas

El Santo Grial y el Doble Ala Voladora cargan primero el módulo central y luego los lados izquierdo y derecho. Intente no usar flotantes en el diseño, puede usar un diseño flexible o de cuadrícula y luego usar orden para ajustar el orden.

10.5 Pantalla central

Entrevistador: ¿Cuántos diseños centrados horizontal y verticalmente puedes lograr (ancho y alto fijos y ancho y alto variables)? - Nuggets