tema
Suponiendo que se conoce la altura, escriba un diseño de tres columnas, en el que el ancho de las columnas izquierda y derecha sea de 300 px cada una, y el medio sea adaptable.
Cinco códigos de solución
Solución flotante
Solución de posicionamiento absoluto
Solución Flexbox Diseño
de mesa
Diseño de cuadrícula
código fuente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style>
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
</head>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</article>
</section>
<!-- 浮动解决方式 -->
<!-- 就浮动模式，HTML的写法是左右中，其他的都可以是左中右 -->
<style>
.layout .left{
float: left;
width: 300px;
background: red;
}
.layout .right{
float: right;
width: 300px;
background: blue;
}
.layout .center{
background: yellow;
}
</style>
<!-- 绝对定位解决方式 -->
<style>
.layout .left-center-right>div{
position: absolute;
}
.layout .left{
left: 0;
width: 300px;
background: red;
}
.layout .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout .right{
right: 0;
width: 300px;
background: blue;
}
</style>
<!-- flexbox解决方式 -->
<style>
.layout .left-center-right{
display: flex;
}
.layout .left{
width: 300px;
background: red;
}
.layout .center{
flex: 1;
background: yellow;
}
.layout .right{
width: 300px;
background: blue;
}
</style>
<!-- 表格布局 -->
<style>
.layout .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout .left-center-right>div{
display: table-cell;
}
.layout .left{
width: 300px;
background: red;
}
.layout .center{
background: yellow;
}
.layout .right{
width: 300px;
background: blue;
}
</style>
<!-- 网格布局 -->
<style>
.layout .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout .left{
background: red;
}
.layout .center{
background: yellow;
}
.layout .right{
background: blue;
}
</style>
</body>
Visualización de resultados
Ampliación del conocimiento
Las cinco soluciones anteriores son relativamente comunes, pero no podemos limitarnos a hacer preguntas por hacer preguntas. Deberíamos sublimar el problema a partir de esta base.
Después de responder estas cinco formas comunes, no significa que nuestro tema de diseño de página haya terminado, el entrevistador también puede ampliar nuestras preguntas, como: ¿Cuáles son las ventajas y desventajas de cada una de estas cinco formas de diseño
?
Si se elimina la condición de altura conocida y se considera la dirección longitudinal, habrá demasiado contenido en el medio, lo que hará que la cuadrícula del medio se expanda. En este momento, es necesario expandir los lados izquierdo y derecho. ¿Todavía se pueden utilizar cinco métodos?
¿Qué tan compatibles son estos 5 métodos? Si te pidieran que eligieras la mejor manera de aplicarlo en tu negocio, ¿qué método elegirías?
Entonces, centrémonos en estas tres preguntas:
1. Sus respectivas ventajas y desventajas
① Para flotadores:
Ventajas:
La compatibilidad es relativamente buena. Si la relación entre los flotadores transparentes y otros elementos flotantes circundantes se maneja adecuadamente, entonces su compatibilidad es bastante buena.
Desventajas:
Después de configurar el flotante, se separa del flujo de documentos, si no se maneja bien causará muchos problemas, esta es su propia limitación.
② Para posicionamiento absoluto:
Ventajas:
Rápido y menos probable que cause problemas
Desventajas:
Si se separa del flujo de documentos, hará que los subelementos se separen del flujo de documentos. Por tanto, la eficacia y usabilidad del posicionamiento absoluto son relativamente pobres. ③ El diseño flexible introducido en
flexbox css3 se desarrolló para resolver las deficiencias de los dos métodos anteriores y es un método relativamente perfecto, especialmente para terminales móviles. ④ Ventajas del diseño de la tabla : Aunque la mayoría de la gente se queja del diseño de la tabla, de hecho, el diseño de la tabla se aplica en muchos escenarios. Por ejemplo, en el diseño de tres columnas escrito anteriormente, ¿es fácil de implementar el diseño de la tabla? Al mismo tiempo, la compatibilidad del diseño de la tabla es muy buena. Cuando el problema no se puede resolver con flex, IE8 en la PC no es compatible con flex. En este momento, puede probar el diseño de la tabla. Desventajas: Además de algunas críticas en la historia, hay otra: por ejemplo, si entendemos tres columnas como tres celdas pequeñas, cuando la altura de una de las celdas excede, los otros dos lados también se ajustarán en consecuencia, por lo que para algunas escenas es inapropiado. Por lo tanto, para diferentes escenarios, podemos realizar operaciones de optimización entre el diseño flexible y de tabla ⑤ Para el diseño de cuadrícula
Esta área se considera un nuevo punto de acceso y ha evolucionado a lo largo del tiempo. A juzgar por el código anterior, a través del diseño de cuadrícula podemos hacer que el código sea más simple y más conveniente para implementar la lógica. Mencionarlo durante la entrevista también puede demostrar que prestas más atención a cosas nuevas y que tienes una buena capacidad de aprendizaje activo.
Por supuesto, las expresiones anteriores incluyen algunas reflexiones personales, así como las ventajas y desventajas comúnmente mencionadas. Puede pensar profundamente en función del diseño de la investigación y aprender más escenarios de uso, ventajas y desventajas. En segundo lugar, puede proponer nuevas soluciones y temas relacionados. puntos de conocimiento Se agregará más adelante.