Generalmente llamamos hojas de estilo en cascada css, que se utiliza para modificar el contenido html y agregar varios estilos y efectos al contenido.
Luego, en el proceso de redacción de proyectos reales, a menudo nos encontramos con un problema común: ajustar la posición de los elementos.
Aunque solo sea para principiantes que están aprendiendo a programar y solo pueden usar conocimientos de CSS para hacerlo, también podemos resumir algunos métodos prácticos;
1. Utilice el modelo de caja
El modelo de caja habla de cuatro atributos:
área de contenido
ancho máximo ancho máximo ancho mínimo ancho mínimo altura máxima altura máxima altura mínima altura mínima
Relleno (la distancia entre el contenido y la pared interior de la caja)
margen-superior margen-izquierdo margen-derecho margen-inferior
Borde (grosor de la caja)
borde-arriba borde-izquierda borde-derecho borde-abajo
Márgenes (la distancia entre el cuadro actual y otros cuadros)
margen-superior margen-izquierdo margen-derecho margen-inferior
Cajas comunes como:
Etiqueta div: puede entenderse como un cuadro grande que ocupa una línea por sí solo.
etiqueta span: puede entenderse como un cuadro pequeño, puede haber varias etiquetas span en una línea.
2. El posicionamiento se puede utilizar:
posición posicionamiento estático estático, valor predeterminado, sin efecto de posicionamiento. Posicionamiento relativo relativo, el posicionamiento basado en su posición original no se separará del flujo de documentos, la posición original dejará un espacio en blanco después de mover el posicionamiento fijo fijo, el posicionamiento basado en la posición de la ventana del navegador, se separará del flujo de documentos, generalmente se usa para hacer que las barras de navegación sean absolutas. El posicionamiento absoluto se basa en el elemento principal más cercano con un método de posicionamiento y está fuera del flujo del documento. Generalmente , el posicionamiento fijo se usa junto con el posicionamiento relativo . El posicionamiento se realiza en función de la posición de desplazamiento de la página. Es una combinación de posicionamiento relativo y posicionamiento fijo. Puede utilizar los valores en las cuatro direcciones superior, izquierda, derecha e inferior para ajustar la posición del elemento.
Pero es necesario enfatizar que cuando se usa posicionamiento, especialmente posición y fijo, se separará del flujo de documentos, por lo que generalmente se usa junto con z-index: cuando se usa, se debe establecer un nivel para el elemento. de lo contrario, cubrirá la barra de navegación al deslizarse hacia abajo.
3. Utilice transformación
traducir(x,y) traducción
Generalmente lo usamos así: transform:translateY(-70%) significa que el eje Y se traslada un 70% en la dirección opuesta.
4. Usa flotador
flotante: izquierda/derecha se separa del flujo del documento, flotando hacia la izquierda o hacia la derecha hasta que golpea otro elemento flotante o el borde del elemento principal. La flotación puede causar un colapso de la altura.
5. Puedes utilizar contenedores flexibles
Si agregamos display:flex; a un contenedor, por ejemplo, un div, entonces el div se convertirá en un contenedor flexible.
Cuando este div se convierta en un contenedor flexible, los atributos del proyecto correspondientes al contenedor flexible serán útiles y efectivos. Si solo agrega atributos de elementos a un div sin agregar display: flex para convertirlo en un contenedor flexible, no importa cuántos atributos de elementos agregue, no tendrá ningún efecto.
Resuma 5 atributos de proyecto comúnmente utilizados:
.div { display: flex; flex-direction:column-reverse; /* row （默认值）：左→右 row-reverse 主轴为x轴方向，起点在右端。 column 主轴为垂直方向，起点在上沿。 column-reverse 主轴为垂直方向，起点在下沿 */ } .div { display: flex; width: 100%; flex-wrap: wrap-reverse; /* nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 */ } .div { display: flex; width: 100%; flex-flow: row-reverse wrap; /* flex-direction属性值 flex-wrap属性值 */ } .div { display: flex; width: 100%; justify-content:space-around; /* flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。 */ } .div { display: flex; align-items:flex-start; height: 400px; /* flex-start：y轴的起点对齐。 flex-end：y轴的终点对齐。 center：y轴的中点对齐。 */ }
Cinco formas de resolver el problema de la posición del elemento. Es cierto que si dominas el contenedor flexible no es necesario usar float, pero la transformación todavía se usa con mucha frecuencia.