Directorio de artículos
BFC
qué es
- Todo el proceso: contexto de formato de bloque, es decir, "contexto de formato a nivel de bloque"
- Un espacio completamente independiente (entorno de diseño), de modo que los elementos secundarios en el espacio no afecten el diseño exterior
regla
- BFC es un elemento a nivel de bloque que se organizará uno tras otro en dirección vertical.
- Es un contenedor independiente aislado en la página y las etiquetas del contenedor no afectarán las etiquetas externas.
- Si dos elementos a nivel de bloque pertenecen al mismo BFC, sus márgenes superior e inferior se superpondrán ( colapso de margen ), el que sea mayor. Sin embargo, si dos elementos a nivel de bloque están en diferentes BFC, sus márgenes superior e inferior no se superpondrán, sino que la suma de los dos
- Al calcular la altura de BFC, también participan elementos flotantes en el cálculo . BFC puede contener elementos flotantes (BFC se puede utilizar para borrar elementos flotantes)
- El área BFC no se superpondrá con el área del elemento flotante , es decir, no se cruzará con el cuadro flotante, sino que se adherirá al borde flotante.
Nota: El mismo elemento no puede existir en dos BFC al mismo tiempo.
cómo activar
común:
efecto
- Resuelva el problema de que los elementos flotantes hacen que la altura de los elementos principales colapse
Método: habilitar BFC para el elemento principal
Principio: al calcular la altura de BFC, los elementos secundarios flotantes también participan en el cálculo
- Los elementos no flotantes están cubiertos por elementos flotantes.
Método: habilitar BFC para elementos no flotantes
Principio: el área de BFC no se superpondrá con el cuadro flotante
- Diseño adaptable de dos columnas
Método: establezca un ancho fijo para la columna fija y habilite BFC para la columna no fija.
Principio: el área de BFC no se superpondrá con el cuadro flotante y
la columna izquierda flotante. Establecer desbordamiento: oculto en la columna de la derecha ; activar BFC, es decir, flotante + desbordamiento: oculto
- El problema de la coincidencia vertical de los márgenes exteriores.
Método: ajuste un cuadro nuevo para el cuadro superior o el cuadro inferior y habilite BFC
Principio: Los márgenes de dos Cajas adyacentes pertenecientes al mismo BFC se superpondrán.
Demostración de las funciones anteriores: BFC que entiende CSS una vez - Zhihu (zhihu.com)
otro
IFC (contexto de formato a nivel de fila) - en línea GFC en línea
(contexto de formato de diseño de cuadrícula) - visualización: grid
FFC (contexto de formato adaptable) - visualización: flex o visualización: inline-flex
Referencia:
Entrevistador: ¿Por favor dígame qué es BFC? Habla claramente en lengua vernácula - Nuggets (juejin.cn)
entiende el BFC de CSS una vez - Zhihu (zhihu.com) ¿
Qué es el BFC en CSS? ¿cómo utilizar? - Pepitas (juejin.cn)
posición
tiene las siguientes propiedades:
relative: Se produce un desplazamiento con respecto a su posición anterior y la posición original sigue ocupada, sin interrumpir el flujo de documentos. Cuando se compensen, podrán cubrirse otros elementos. El cuerpo es relativo por defecto y el hijo debe ser relativo al padre.absolute: Separarse del flujo del documento y desplazarse con respecto al bloque contenedorposition(bloque contenedor: el elemento cuyo elemento exterior no esstaticel nivel más cercano).fixed: Fuera del flujo del documento y posicionado en relación con la ventana gráfica .static: Valor predeterminado, cancelar herencia. Sin posicionamiento.sticky: css3 nuevo valor de atributo, posicionamiento fijo, que equivale a una mezcla de relativo y fijo. Inicialmente, se considerará relativo y desplazado con respecto a la posición original; una vez que supere un cierto umbral, se considerará fijo y posicionado con respecto a la ventana gráfica.inherit: hereda el valor de posición del elemento padre.
Ampliar el atributo de posición en CSS - Zhihu (zhihu.com)
diseño de dos columnas
El ancho de la izquierda es fijo y el ancho de la derecha es adaptable.
- Usar
flexdiseño: establezca el elemento izquierdo en un ancho fijo de 200 px y configure el elemento derecho en flexible: 1 - Utilice flotador . El elemento izquierdo tiene un ancho de 200 px y flota hacia la izquierda. El margen izquierdo del elemento derecho es 200 px y el ancho está establecido en automático (el valor predeterminado es automático, que llena todo el elemento principal)
- El ancho del elemento izquierdo es fijo y está configurado para flotar hacia la izquierda. Elemento a la derecha
overflow: hidden; BFC se activa a la derecha, y el área de BFC no se superpondrá con el elemento flotante, por lo que los dos lados no se superpondrán.
diseño de tres columnas
Utilice flotador en ambos lados y margen en el medio.
- Ancho fijo en ambos lados, ancho adaptable en el centro
- Utilice el valor del margen del elemento central para controlar el espaciado en ambos lados
- Cuando el ancho es menor que la suma de los anchos de las partes izquierda y derecha, la parte derecha se comprime hacia abajo.
<style>
.wrap {
background: #eee;
overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
padding: 20px;
height: 200px;
}
.left {
width: 200px;
height: 200px;
float: left;
background: coral;
}
.right {
width: 120px;
height: 200px;
float: right;
background: lightblue;
}
.middle {
margin-left: 220px;
height: 200px;
background: lightpink;
margin-right: 140px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="middle">中间</div>
</div>
Utilice absoluto en ambos lados y margen en el medio.
Diseño de tres columnas basado en posicionamiento absoluto : tenga en cuenta que los elementos con posición absoluta se salen del flujo del documento y se colocan en relación con el elemento ancestro posicionado más cercano. Independientemente del orden de las estructuras en el HTML.
- Utilice posicionamiento absoluto a izquierda y derecha, fijo en ambos lados.
- El medio ocupa una línea completa,
margindejando un espacio entre el pase y los lados izquierdo y derecho.
<style>
.container {
position: relative;
}
.left,
.right,
.main {
height: 200px;
line-height: 200px;
text-align: center;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: green;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 100px;
background: green;
}
.main {
margin: 0 110px;
background: black;
color: white;
}
</style>
<div class="container">
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>
<div class="main">中间自适应</div>
</div>
implementación flexible
- El contenedor está configurado en
display:flex; - Los elementos del cuadro están alineados en ambos extremos y el elemento del medio se establece en
width:100%, o se establece enflex:1, para llenar el espacio en blanco. - La altura de los elementos dentro de la caja amplía la altura del contenedor.
<style type="text/css">
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 100px;
}
.left {
width: 200px;
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
Centrar horizontalmente (6 métodos)
Centrar con el mismo espacio en los lados izquierdo y derecho
doblar
display: flex;justify-content: center;
<div class='parent'>
<div class="son">
</div>
</div>
.parent {
display: flex;
justify-content: center;
}
.son {
background: pink;
width: 100px;
height: 100px;
}
Posicionamiento absoluto + margen: automático
- elemento secundario central
- Hijo y padre, elemento infantil.
margin:auto
principio:
arriba + margen-arriba + borde-ancho-arriba + relleno-arriba + altura + relleno-abajo + borde-ancho-abajo + margen-abajo + abajo = alto En la fórmula anterior, arriba y abajo son 0, el margen es igual a auto
En este momento, para satisfacer esta ecuación, el navegador distribuirá uniformemente las distancias superior e inferior al margen, es decir, para lograr el efecto de centrado que queremos. Lo mismo ocurre con la orientación horizontal.
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: red;
}
<div class='father'>
<div class="center">
</div>
</div>
Posicionamiento absoluto + margen: valor negativo
Principio: establezca la posición del elemento actual en absoluta y colóquelo en relación con el elemento principal. Primero establezca izquierda: 50%; arriba: 50%, de modo que la esquina superior izquierda del elemento actual esté en el centro del elemento principal . Luego aplique la propiedad de margen negativo para que el centro esté en el centro del elemento principal. De ahí la necesidad de conocer el tamaño de los elementos secundarios. Mueva la mitad del tamaño del elemento secundario.
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
width: 200px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class='father'>
<div class="center">
</div>
</div>
Si desea estar centrado verticalmente, debe agregar en el centro:
top: 50%;
margin-top: -50px;
Utilice márgenes negativos para centrar elementos
posicionamiento+transformación
- elemento padre: posicionamiento relativo
- Elementos secundarios: el posicionamiento relativo/absoluto está bien
- elemento hijo
left:50%, borde izquierdo hasta el centro del elemento padre - Elemento hijo
transform: translateX(-50%);, mueve la mitad de sí mismo hacia la izquierda, de modo que su centro quede alineado con el centro del elemento padre. - No es necesario saber el ancho del elemento secundario.
.father {
position: relative;
height: 500px;
width: 500px;
background-color: blue;
}
.center {
position: relative;
left: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translateX(-50%);
}
<div class='father'>
<div class="center">
</div>
</div>
alineación de texto: centro;
Especifica el centrado horizontal del texto del elemento. es un elemento en línea .
text-align: center;
.parent {
text-align: center;
}
<div class='parent'>
<span>123</span>
</div>
margen: 0 automático;
margin: 0 auto;- Si el ancho es fijo , si el ancho no es fijo, el ancho es
width:100% - elemento de nivel de bloque
<div class='box'>是块级元素居中，块级元素内的不居中，想让这行文字也居中要用text-align</div>
.box {
background: skyblue;
width: 200px;
height: 200px;
margin: 0 auto;
}
[Frontend] 6 métodos de centrado horizontal de CSS - Blog de karshey - Blog de CSDN
Centrar verticalmente (7 métodos)
altura de la línea
- Se aplica a elementos en línea en una sola línea.
- Establecer la altura de la línea igual a la altura
Posicionamiento absoluto + margen: automático
- padre sin hijos
- arriba, izquierda, derecha, abajo son todos 0
- margen: automático
doblar
display:flexalign-content:center
Posicionamiento absoluto + margen: valor negativo
- padre sin hijos
- Elemento secundario superior: 50%: el borde superior está centrado verticalmente en el elemento principal
- margen superior: la mitad de la altura del elemento secundario (número negativo): mueve la mitad del elemento secundario al centro del elemento principal
posicionamiento+transformación
- elemento padre: posicionamiento relativo
- Elementos secundarios: el posicionamiento relativo/absoluto está bien
- elemento hijo
top:50%, borde izquierdo hasta el centro del elemento padre - Elemento hijo
transform: translateY(-50%);, mueve la mitad de sí mismo hacia la izquierda, de modo que su centro quede alineado con el centro del elemento padre. - No es necesario saber la altura del elemento secundario.
alineación vertical: medio
La propiedad de alineación vertical establece la alineación vertical de un elemento. Esta propiedad define la alineación vertical de la línea base de un elemento en línea con respecto a la línea base de la línea en la que reside el elemento.
Por lo tanto, si quiero que el cuadro esté centrado verticalmente en el contenedor, puedo agregar una etiqueta div vacía dentro del contenedor div , establecer su altura en 100%, establecer su ancho en 0 , luego configurarlo vertical-align:middley darle un vertical-align:middleestilo al cuadro. , entonces el cuadro se puede centrar verticalmente dentro del div.
.wrapper {
width: 500px;
height: 500px;
background-color: pink;
}
.box {
width: 100px;
height: 100px;
background-color: deepskyblue;
display: inline-block;
vertical-align: middle;
}
.help {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="box"></div>
<div class="help"></div>
</div>
Utilice alineación vertical: de medio a centro vertical - Libro breve (jianshu.com)
pantalla: celda de tabla
- La configuración del elemento principal del elemento que se centrará verticalmente
display:table-cellyvertical-align:middle - De forma predeterminada, las imágenes, botones, texto y celdas pueden usar la propiedad de alineación vertical.
- Realice el centrado vertical de texto de una y varias líneas
body {
background: #ccc;
}
p {
display: table-cell;
vertical-align: middle;
background-color: pink;
width: 500px;
height: 200px;
}
<div>
<p>
hello world <br />
hello world <br />
hello world <br />
hello world
</p>
</div>
También se puede agregar display:table. Para más detalles, consulte: display:table-cell realiza el centrado horizontal y vertical-soldados frontales-blog garden (cnblogs.com)
mapas mentales
