CSS simplemente implementa el diseño del Santo Grial y el diseño de doble ala voladora

1. ¿Qué puedes aprender?

①Cómo usar las variables css ②Realice la idea simple del diseño del santo grial y las alas voladoras dobles ③Comprenda las características de flotación y margen

Configuración de variables CSS (partes compartidas por ambos diseños)

:root{
    
    
    /* 左边栏宽度 */
    --lw:300px;
    /*负左边栏宽度*/
    --lwf:-300px;
    /* 右边栏宽度 */
    --rw:400px;
    /*负左边栏宽度*/
    --rwf:-400px;
    /* 高度 */
    --height:300px;
}

Dos, el código html y css del diseño del santo grial

parte html

  <div class="holyGrail">
    <div class="hg_main">main</div>
    <div class="hg_left">left</div>
    <div class="hg_right">right</div>
  </div>

css implementa las cuatro clases correspondientes

.holyGrail {
    
    
    height: var(--height);
    /* 留出左右两栏的布局 为了字体不被覆盖*/
    padding-left: var(--lw);
    padding-right: var(--rw);
}
.hg_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.hg_left{
    
    
    position: relative;
    left: var(--lwf);
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.hg_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    height: var(--height);
    background-color: brown;
}

En tercer lugar, el código html y css del diseño de doble ala voladora

parte html

<div class="doubleWing">
    <div class="dw_main">
      <div class="dw_con">main</div>
    </div>
    <div class="dw_left">left</div>
    <div class="dw_right">right</div>
  </div>

css implementa las cinco clases correspondientes

.doubleWing{
    
    
    padding-right: var(--rw);
}
.dw_left{
    
    
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.dw_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.dw_con {
    
    
margin-left: var(--lw);
}
.dw_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    background-color: brown;
    height: var(--height); 
}

Cuatro, aprende los puntos de atención de los dos diseños.

Diseño del Santo Grial

Deje el ancho de las columnas izquierda y derecha en los lados izquierdo y derecho de la clase más externa (holyGrail) (use padding-left, padding-right)
El div.hg_main del medio se coloca en la parte superior, renderizándose primero, el div del medio es adaptable y el ancho es del 100%
Los divs en las columnas izquierda, media y derecha están todos configurados para flotar, y la columna izquierda se mueve al mismo punto de inicio que el div del medio a través del margen-izquierda: -100%, y luego a través de la posición: relativa;
izquierda: - (el ancho de la columna izquierda); se moverá hacia el exterior El área del margen interior izquierdo de la capa div (el lado izquierdo de la div media)
La columna de la derecha se puede mover al área del margen interno derecho del div más externo a través de margin-right :-( el ancho de la columna de la derecha) (el lado derecho del div del medio)

Diseño de doble ala voladora

Agregue otro div al div en la columna del medio y establezca margin-left: el ancho de la columna de la izquierda, para que pueda omitir el div en la columna de la izquierda y moverlo con los atributos de la posición y left
El div más externo no necesita reservar la posición de la columna de la izquierda

Cinco, las ventajas y desventajas de la comparación de los dos diseños.

composición	ventaja	Desventaja
Santo Grial	Sin dom extra	Cuando el ancho medio es más pequeño que los anchos izquierdo y derecho, la estructura es caótica
Ala doble	Puede soportar varios anchos, gran versatilidad	Necesito agregar una capa extra de dom

Dirección de descarga de código

Recuerda hacerlo tu mismo

agradecer

Si sientes que es útil para tu trabajo de estudio, compártelo con quienes lo necesiten, o dale me gusta y anímalo, gracias por
tu apoyo. Puedes agregar un favorito y continuaré actualizándolo. . .