Integración de preguntas de entrevista front-end (artículos básicos)

  • Kernel del navegador

    IE: núcleo trident, Firefox: núcleo gecko, Safari: núcleo webkit, Opera: antes núcleo presto, Opera ahora ha cambiado al núcleo Blink de Google Chrome, Chrome: Blink (basado en webkit, desarrollado conjuntamente por Google y Opera Software)

  • ¿Qué hace el Doctype en HTML?
    Esta etiqueta le dice al navegador qué especificación HTML o XHTML utiliza el documento. (Importante: indique al navegador que analice la página según las especificaciones)

  • ¿Cuáles son las ventajas del diseño div + css en comparación con el diseño de tabla? Es
    más conveniente cambiar la versión, simplemente cambie el archivo css. La página se carga más rápido, la estructura es clara y la visualización de la página es concisa. El rendimiento está separado de la estructura. Fácil de optimizar (seo) El motor de búsqueda es más amigable y la clasificación es más fácil de encabezar

  • ¿Cuáles son las similitudes y diferencias entre el alt y el título de img? ¿Las similitudes y diferencias entre fuerte y em?
    alt (texto alternativo): agente de usuario (UA) que no puede mostrar imágenes, formularios o applets. El atributo alt se utiliza para especificar texto alternativo. El idioma del texto de reemplazo se especifica mediante el atributo lang. (En el navegador IE, alt se mostrará como información sobre herramientas cuando no hay título)
    título (información sobre herramientas): este atributo proporciona información sugerente para el elemento que establece este atributo.
    fuerte: negrita enfatiza la etiqueta y enfatiza la importancia del contenido.
    em: La cursiva enfatiza la etiqueta y la enfatiza con más fuerza, indicando el énfasis del contenido.

  • La diferencia entre la mejora progresiva y la degradación elegante
    Mejora progresiva: cree páginas para navegadores de versiones bajas para garantizar las funciones más básicas, y luego mejore los efectos e interacciones y agregue funciones para navegadores avanzados para lograr una mejor experiencia de usuario . Degradación elegante: cree una función completa al principio y luego sea compatible con los navegadores de versiones anteriores. Diferencia: la degradación elegante comienza desde el complejo status quo e intenta reducir la oferta de experiencia del usuario, mientras que la mejora incremental comienza desde una versión muy básica y funcional y continúa expandiéndose para satisfacer las necesidades del entorno futuro. La degradación (degradación funcional) significa mirar hacia atrás; la mejora progresiva significa mirar hacia adelante mientras se asegura que su base está en un lugar seguro.

  • ¿Por qué es más eficaz utilizar varios nombres de dominio para almacenar recursos del sitio web?
    El almacenamiento en caché de CDN es más conveniente.
    Supere los límites de simultaneidad del navegador.
    Ahorre el ancho de banda de las cookies.
    Guarde el número de conexiones al nombre de dominio principal. Optimice la velocidad de respuesta de la página.
    Evite problemas de seguridad innecesarios.

  • La diferencia entre cookies, sessionStorage y localStorage
    sessionStorage se utiliza para almacenar datos en una sesión localmente, estos datos solo pueden ser accedidos por páginas en la misma sesión y los datos serán destruidos cuando finalice la sesión. Por lo tanto, sessionStorage no es un almacenamiento local persistente, sino un almacenamiento a nivel de sesión. LocalStorage se utiliza para almacenamiento local persistente. A menos que los datos se eliminen activamente, los datos nunca caducarán. La función de las cookies es interactuar con el servidor y existir como parte de la especificación HTTP, mientras que Web Storage solo nace para "almacenar" datos localmente. El tamaño de la cookie es limitado, y cada vez que solicite una nueva página, se enviará la cookie, lo que desperdicia ancho de banda de manera invisible.Además, la cookie necesita especificar el alcance y no se puede llamar a través de dominios.

  • La diferencia entre src y href En
    términos simples, src se usa para reemplazar el elemento actual y href se usa para establecer una conexión entre el documento actual y el recurso referenciado.

    src : src es la abreviatura de fuente. Apunta a la ubicación de recursos externos. El contenido apuntado se incrustará en la ubicación de la etiqueta actual en el documento; cuando se solicite el recurso src, el recurso señalado se descargará y aplicará al documento, como un script js. Elementos como imágenes y marcos de imágenes.
    Cuando el navegador analiza el elemento, suspenderá la descarga y el procesamiento de otros recursos hasta que el recurso se cargue, compile y ejecute. Lo mismo se aplica a elementos como imágenes y marcos, similar a incrustar el recurso señalado en la etiqueta actual. Es por eso que el script js se coloca en la parte inferior en lugar de en la cabecera.
    harf : href es la abreviatura de Hypertext Reference. Apunta a la ubicación de los recursos de la red y establece un vínculo con el elemento actual (ancla) o el documento actual (vínculo). Si agregamos <link href = ”common.css” rel al documento = ”Hoja de estilo” /> Entonces el navegador reconocerá el documento como un archivo css, descargará recursos en paralelo y no dejará de procesar el documento actual. Es por eso que se recomienda usar el método de enlace para cargar css en lugar del método @import.

  • Qué son los microformatos, hablar sobre la comprensión de los
    microformatos es una colección de vocabulario semántico XHTML que es legible por máquina y un estándar abierto para datos estructurados. Es un formato especial desarrollado para aplicaciones especiales. Ventajas: agregar datos inteligentes a la página web, lo que permite que el contenido del sitio web muestre indicaciones adicionales en la interfaz de resultados del motor de búsqueda.

  • Después de que el código css / js se pone en línea, los desarrolladores a menudo optimizan el rendimiento. A partir de que el usuario actualiza la página web, ¿cuáles son los lugares donde generalmente se almacena en caché una solicitud js?
    caché dns, caché cdn, caché del navegador, caché del servidor

  • Optimice el esquema de carga de imágenes para sitios web grandes.
    Carga diferida de imágenes. Se puede agregar un evento de barra de desplazamiento al área no visible de la página para determinar la distancia entre la posición de la imagen y la parte superior del navegador y la distancia desde la página. Si el primero es más pequeño que el segundo, cargue primero. Si se trata de una presentación de diapositivas, un álbum, etc., puede utilizar la tecnología de precarga de imágenes para descargar primero las imágenes anterior y siguiente de la imagen que se muestra actualmente. Si la imagen es una imagen css, puede utilizar CSSsprite, SVGsprite, Iconfont, Base64 y otras tecnologías. Si la imagen es demasiado grande, puede utilizar una imagen codificada especialmente. Al cargar, se cargará primero una miniatura muy comprimida para mejorar la experiencia del usuario. Si el área de visualización de la imagen es más pequeña que el tamaño real de la imagen, la imagen se comprime según las necesidades comerciales en el lado del servidor y la imagen comprimida tiene el mismo tamaño que la pantalla.

  • La semántica de la estructura HTML
    html en sí no tiene rendimiento. Por ejemplo, vemos que <h1> está en negrita, el tamaño de fuente es 2em y en negrita; <strong> está en negrita, no creo que este sea el rendimiento de html, en realidad son html predeterminados El estilo CSS está funcionando, por lo que no es la ventaja de la estructura semántica HTML hacer que la página presente una estructura clara cuando el estilo se elimina o falta, pero el navegador tiene un estilo predeterminado y el propósito del estilo predeterminado es expresar mejor el html Se puede decir que el estilo predeterminado del navegador y la estructura HTML semántica son inseparables.

  • ¿Hay alguna forma de configurar el estilo CSS de un DOM?
    Hoja de estilo externa, importar un archivo CSS externo
    Hoja de estilo interna, poner el código CSS dentro de la etiqueta <head>
    Estilo en línea, definir el estilo CSS directamente dentro del elemento HTML

  • ¿Cuáles son los selectores CSS
    derivados de selectores (declarados por etiquetas HTML)
    selectores de id (declarados por ID DOM)
    selectores de clase (declarados por un nombre de clase de estilo)

    selectores de atributos (a [rel = "external"])
    excepto Los primeros tres selectores básicos y algunos selectores extendidos,
    incluidos los selectores descendientes (usando espacios, como div .a {})
    selectores adyacentes (usando signos más, h1 + p)
    selectores de grupo (usando Intervalo de coma, como p, div, # a {})
    selector de comodín (*)
    selector de pseudoclase (a: hover, li: nth-child)

  • Qué atributos se pueden definir en CSS para que un elemento DOM no se muestre en el rango visible del navegador.
    Establezca la propiedad de visualización en ninguno, o establezca la propiedad de visibilidad en oculta,
    establezca el ancho y alto en 0, establezca la transparencia en 0 y establezca la posición del índice z en -1000em

  • ¿Cuál es el problema de que el estilo de desplazamiento no aparece después de visitar el hipervínculo? ¿Cómo resolver?
    Los estilos de hipervínculo en los que se ha hecho clic y se han visitado ya no tienen el mouse y la función activa. La solución es cambiar el orden de las propiedades de CSS: LVHA (enlace, visitado, flotante, activo)

  • ¿Qué es Css Hack? ¿Cuáles son los trucos de ie6,7,8?
    El proceso de escribir diferentes códigos CSS para diferentes navegadores es un truco CSS.
    Los ejemplos son los siguientes:  

       #test{   
            width:300px;   
            height:300px;   
            background-color:blue;      /*firefox*/
            background-color:red\9;      /*all ie*/
            background-color:yellow;    /*ie8*/
            +background-color:pink;        /*ie7*/
            _background-color:orange;       /*ie6*/    }  
            :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px)
         { #test {background-color:black;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0)
    { #test {background-color:gray;} }       /*chrome and safari*/
    

     

  • ¿Cuál es la diferencia específica entre elementos en línea y elementos a nivel de bloque?
    Características de los elementos a nivel de bloque (bloque): siempre ocupan una línea, se comportan como un inicio de nueva línea y los siguientes elementos también deben mostrarse en una nueva línea; ancho (ancho), alto (alto), margen interno (relleno) y margen externo Se puede controlar el margen; características del
    elemento en línea (en línea): y elemento en línea adyacente en la misma línea;

  • ¿Qué es la superposición de márgenes? El efecto
    de los márgenes superpuestos es el colapso de los márgenes. En CSS, los márgenes de dos casillas adyacentes (que pueden ser hermanos o ancestros) se pueden combinar en un solo margen. Esta forma de combinar los márgenes se denomina plegado y los márgenes combinados se denominan márgenes plegados.
    El resultado del plegado sigue las siguientes reglas de cálculo : cuando dos márgenes adyacentes son positivos, el resultado del plegado es el valor mayor entre ellos. Cuando dos márgenes adyacentes son números negativos, el resultado de plegado es el mayor de los valores absolutos de los dos. Cuando dos márgenes exteriores son uno positivo y otro negativo, el resultado de plegado es la suma de los dos.

  • ¿Cuál es la diferencia entre rgba () y el efecto de transparencia de opacidad?
    Tanto rgba () como opacity pueden lograr transparencia, pero la mayor diferencia es que la opacidad actúa sobre el elemento y la transparencia de todo el contenido dentro del elemento, mientras que rgba () solo actúa sobre el color del elemento o su color de fondo. (¡Los elementos secundarios de los elementos que establecen rgba transparente no heredarán el efecto de transparencia!)

  • Centrar un elemento flotante horizontal y verticalmente

    Método 1: posición más margen

    Método 2:  diaplay: table-cell

    Método tres: posición más  transformación

    Método 4: flex; alinear-elementos: centro; justificar-contenido: centro

    Método cinco: pantalla: flex; margen: automático

    Método seis: posición pura

    Método 7: Compatible con navegadores de versiones inferiores, no ancho y alto fijos

  • Háblame de tu comprensión del modelo de caja.
    Hay atributos de relleno, margen, borde y contenido.
    Box-sizing: content-box es un modelo de caja W3C. Los atributos de ancho y alto del elemento solo contienen la parte del contenido, no el relleno y los bordes de los bordes. sección.
    box-sizing: border-box es un modelo de caja de IE. Las propiedades de ancho y alto del elemento también contienen contenido, relleno y partes de borde

  • Posicionamiento de posición
    Relitivo: Relativo a sí mismo, guiará al elemento hijo a la posición relativa a sí mismo
    Absoluto: Posicionamiento de acuerdo al relativo del elemento padre
    Fijo: Ahora posicionamiento para la ventana de la ventana

  • El principio de rem es diferente de em / vw / vh.
    Rem se basa en el cambio del tamaño de fuente del elemento raíz, mientras que em se basa en el cambio del tamaño de fuente del cuerpo
    1. Porque html5 y css3 introducen el concepto de ventana gráfica para reemplazar el tamaño físico de la pantalla. A través de la configuración de la metaetiqueta, la longitud y el ancho de la ventana gráfica pueden ser iguales o diferentes a la resolución física del dispositivo (de modo que se pueden usar dos dedos en el teléfono para acercar y alejar la página), que se puede controlar de manera flexible según sea necesario. En la PC, la longitud y el ancho de la ventana gráfica son los mismos que la resolución física de la ventana del navegador.
    2. 1vw es igual a una centésima parte del ancho de la ventana, lo que significa que 100vw es el ancho de la ventana. De la misma forma, 1vh equivale a cambiar la vista 30px a 5vw, lo que significa un 5% del ancho de la ventana, y lo mismo es 10vw.
    3. Sin embargo, dado que vw y vh son unidades de longitud que solo admite css3, no son válidas una centésima parte de la altura de la ventana gráfica en los navegadores que no admiten css3.

  • La regla de animación
    @keyframes de Css3 se utiliza para crear animaciones. Especificar un cierto estilo CSS en @keyframes puede crear un efecto de animación que cambia gradualmente del estilo actual al nuevo estilo.

  • Qué son Sass y LESS, y sus ventajas
    son los preprocesadores CSS. Es una capa de abstracción en CSS. Son una sintaxis / lenguaje especial compilado en CSS.
    Por ejemplo, Less es un lenguaje de estilo dinámico. CSS ofrece características de lenguaje dinámico, como variables, herencia, cálculos y funciones. Less puede ejecutarse en el cliente (compatible con IE 6+, Webkit, Firefox) o todos El servidor se ejecuta (con la ayuda de Node.js).
    Ventajas:
    estructura clara, fácil de expandir.
    Puede proteger fácilmente las diferencias de sintaxis privada del navegador.
    Encapsula el procesamiento repetido de las diferencias de sintaxis del navegador, lo que reduce el trabajo mecánico sin sentido.
    La herencia múltiple se puede lograr fácilmente.
    Es totalmente compatible con el código CSS y se puede aplicar fácilmente a proyectos antiguos.
    LESS es solo una extensión de la sintaxis CSS, por lo que el código CSS antiguo también se puede compilar con código LESS.

  • ¿Cuál es la diferencia entre pantalla: ninguna y visibilidad: oculta?
    display: oculta el elemento correspondiente pero no ocupa el espacio original del elemento.
    visibilidad: oculta el elemento correspondiente y exprime el espacio original del elemento.
    Es decir, después de usar el atributo display: none de CSS, el ancho y el alto del elemento HTML (objeto) se "perderán"; después de usar el atributo visibilidad: oculto, el elemento HTML (objeto) solo se verá visualmente Falta (completamente transparente), pero el espacio que ocupa aún existe.

  • La diferencia entre el enlace y @import en CSS El
    enlace pertenece a las etiquetas html, y @import se proporciona
    en CSS. Cuando se carga la página, el enlace se cargará al mismo tiempo y el CSS al que hace referencia @import no se cargará hasta que se cargue la página. CSS
    @import solo se puede reconocer por encima de ie5, y el enlace es una etiqueta html, y no hay problemas de compatibilidad con el navegador. El enlace introduce estilos más que las referencias de @import (@import es para importar los estilos a los que se hace referencia en la página actual)

  • ¿Qué es BFC ?
    BFC (Contexto de formato de nivel de bloque), un cuadro que crea un nuevo BFC se presenta de forma independiente, y el diseño de los elementos en el cuadro no afecta a los elementos fuera del cuadro. Dos cuadros adyacentes en el mismo BFC tienen márgenes superpuestos en la dirección vertical. BFC se refiere a la creación de un área de renderización independiente en el navegador. El diseño de todos los elementos en esta área no afectará el diseño de los elementos fuera del área. , Esta área de renderizado solo funciona en elementos a nivel de bloque

  • Problemas comunes de compatibilidad con html
    1. Distancia de doble cara BUG flotante causado por el uso de la pantalla
    Problema de 2.3 píxeles usando flotante causado por el uso de dislpay: inline -3px  
    3. El hipervínculo no es válido después de hacer clic, use el orden de escritura correcto
    . El problema del índice agrega posición: relativa al padre
    5. Png usa de forma transparente el código js para cambiar
    6. Min-height ¡altura mínima! Importante resolver '
    7. Seleccione para cubrir debajo de ie6 y use el anidamiento de iframe
    8. ¿Por qué no hay forma de definir un contenedor de ancho de aproximadamente 1px (causado por la altura de línea predeterminada de IE6, use over: hidden, zoom: 0.08 line-height: 1px)
    9. IE5-8 no admite opacidad, la solución: .opacity {opacity: 0.4 filter: alpha (opacity = 60); / * para IE5-7 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 60 ) "; / * para IE 8 * /}
    10. IE6 no es compatible con el fondo transparente PNG, la solución: use imágenes gif en IE6

  • ¿Cuáles son los elementos en línea ?, ¿Cuáles son los elementos a nivel de bloque ?, ¿Cuáles son los elementos vacíos?
    Elementos a nivel de bloque : dirección-dirección blockquote-block quote centrar-alinear bloque dir-directorio lista div-common block level easy, y también la etiqueta principal del diseño css dl-definition list fieldset-form control group form-interactive form h1-large Encabezado h2-Subtítulo h3-Encabezado de nivel 3 h4-Encabezado de nivel 4 h5-Encabezado de nivel 5 h6-Encabezado de nivel 6 hr-El divisor horizontal es un indicador de entrada de índice menú-menú lista noframes-frames contenido opcional, (para aquellos que no admiten frame El navegador muestra el contenido de este bloque) noscript: contenido de secuencia de comandos opcional (muestra este contenido para navegadores que no admiten la secuencia de comandos) ol - formulario de clasificación p - tabla de texto con formato previo de párrafo - tabla ul -
    elementos de línea de lista no ordenados : a - Abreviatura del punto de anclaje - Acrónimo de la abreviatura - Primera letra b - Negrita (no recomendada) grande - Fuente grande br - Salto de línea em - Fuente de énfasis - Configuración de fuente (no recomendada) i - Cursiva img - Entrada de imagen - Etiqueta de cuadro de entrada - Etiquetas de tabla s-subrayado (no recomendado) selección de elementos de selección de texto de fuente pequeña-pequeña extensión-contenedor en línea de uso común, definir el bloque dentro del texto tachado-subrayado fuerte-negrita enfatizar sub-subíndice sup-superíndice textarea-cuadro de entrada de texto de varias líneas tt-teletexto u-subrayado variable de definición de var
    elemento vacío conocido: <br> <hr><img><input><link> <meta> 鲜为人知 的 是 : <area><base><col> <command> <embed><keygen><param> <source> < pista> <wbr>

  • ¿Cuáles son las tres capas de la página de inicio que constituyen la
    capa estructural? Capa de presentación HTML.

  • ¿Qué propiedades de CSS se pueden heredar?
    Heredable: tamaño de fuente color de la familia de fuentes, UL LI DL DD DT;
    no heredable: borde relleno margen ancho alto;

  • La prioridad del algoritmo de prioridad CSS (peso)
    es el principio de proximidad, la definición de estilo es la más cercana. ¡El
    estilo de carga está sujeto a la última posición cargada
    ! Importante> Inline> id> class> tag

  • La altura es adaptable, el ancho es la mitad de la altura, cómo
    usar la propiedad padding-top / bottom / left / right para establecer de acuerdo con el ancho del elemento principal cuando se establece como un porcentaje, puede establecer padding-top / bottom: 100%; padding -izquierda / derecha: 50%; extienda el elemento, preste atención para establecer el ancho del elemento principal, especialmente cuando se hereda el ancho del elemento principal, también puede establecer solo el ancho del elemento principal sin establecer la altura. Para ocultar el elemento padre;

  • Múltiples métodos de código similares al diseño del Santo Grial El diseño del
    Santo Grial es un diseño CSS muy común.
    Requisitos:
    1. Las partes superior e inferior ocupan todo el ancho de la pantalla.
    2. La parte entre las partes superior e inferior es un diseño de tres columnas.
    3. El ancho en ambos lados del diseño de tres columnas permanece sin cambios, y la parte central llena automáticamente toda el área.
    4. La altura de la parte media es la altura del área más alta en las tres columnas.

    浮动实现
    外层框架
    <div class="header">这里是头部</div>
    <div class="container"></div>
    <div class="footer">这里是底部</div>
    .header,.footer{
        height:200px;
        width:100%;
        background:red;
    }
    .container{
        padding-left:200px;
        padding-right:300px;
    }
    填充三栏
    这一步骤,首先给底部区域清除浮动,防止跟随上边的区域一起浮动。
    另外:把中,左,右三个区域设置成度浮动。给左右两块区域固定的宽度,中间部分的宽度设置成100%。
    这样实现下来,因为浮动的关系,[middle]会占据[container]的所有部分,而左右两块区域都会被挤到下面,但是,由于第一步设置了内边距的关系,[container]的左右各剩余了一块区域,且宽度与左右区域相同。
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="middle">中间部分</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
    
    .header,.footer{
        height:40px;
        width:100%;
        background:red;
    }
    .footer{
        clear:both;
    }
    .container{
        padding-left:200px;
        padding-right:300px;
    }.container div{
        float:left;
    }
    .middle{
        width:100%;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
    }
    .right{
        width:300px;
        background:aqua;
    }
    移动左侧区域
    接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。
    先移动左边,新加一个样式 margin-left:-100%。这样一来,因为浮动关系,就把左边块上移到了[middle]左侧,与其交织在一起,而右侧栏就自动往左移动。然后再给左侧栏一个偏移量,偏移量恰好是其宽度,这一步要给[container]的position设成relative
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="middle">中间部分</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
    .header,.footer{
        height:40px;
        width:100%;
        background:red;
    }
    .footer{
        clear:both;
    }
    .container{
        padding-left:200px;
        padding-right:300px;
    }
    .container div{
        postion:relative;
        float:left;
    }
    .middle{
        width:100%;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
        margin-left:-100%;
        right:200px;
    }
    .right{
        width:300px;
        background:aqua;
    }
    移动右边
    同上一步的原理一样,把右侧区域也给弄上去,设置负外边距和本身宽度相同就行了。
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="middle">中间部分</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
    
    .header,.footer{
        height:40px;
        width:100%;
        background:red;
    }
    .footer{
        clear:both;
    }
    .container{
        padding-left:200px;
        padding-right:300px;
    }
    .container div{
        postion:relative;
        float:left;
    }
    .middle{
        width:100%;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
        margin-left:-100%;
        right:200px;
    }
    .right{
        width:300px;
        background:aqua;
        margin-right:-300px;
    }
    
     
    
    
    flexbox弹性盒子实现
    弹性盒子用来实现圣杯布局特别简单。只需要把中间的部分用flex布局即可。
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间部分</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
    
    .header,.footer{
        height:40px;
        width:100%;
        background:red;
    }
    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        background:yellow;
    }
    .left{
    width:200px;
        background:pink;
    }
    .right{
        background: aqua;
        width:300px;
    }
    很简单,在写html的时候,因为不再涉及到浮动,只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死,把中间的区域的flex属性设置成1就可以了。
    css grid网格
    grid是一种新的布局方式,截止2018年初,绝大多数浏览器都已经支持css grid。
    其原理就是把页面的区域划分成一个一个的网格,就和围棋的棋盘一样。
    用网格来解决圣杯问题,可以摆脱弹性盒子时需要格外加一个[container]的问题,也就是左中右三款区域不需要在他们外边包装一个额外的div。
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>     
    <div id="footer">footer</footer></div>
      
    body{
        display: grid;
    }
    #header{
        background: red;
        grid-row:1;
        grid-column:1/5;
    }
    #left{
        grid-row:2;
        grid-column:1/2;
        background: orange;
    }
    #right{
        grid-row:2;
        grid-column:4/5;
        background: cadetblue;
    }
    #middle{
        grid-row:2;
        grid-column:2/4;
        background: rebeccapurple
    }
    #footer{
        background: gold;
        grid-row:3;
        grid-column:1/5;
    }
    简单说一下代码的实现。回头会专门看一下css grid的细节。
    首先给最外层的body设成display:grid。当然,是外层父级元素即可,不一定是body。
    grid-row就是说由上到下,#header占据第1格,#left,#middle,#right占据第2格,#footer占据第3格。
    而grid-column表示,在横向从左向右,分成了五格。其中#header和#footer占据全部。#left占据第1格,#middle占据第2到第4格,#right占据第5格。
    不管是实现起来还是理解起来都很方便。
    

     

Supongo que te gusta

Origin blog.csdn.net/time_____/article/details/109381529
Recomendado
Clasificación