Notas de entrada CSS 4 tabla de contenido
- Div jerárquico, posición de posicionamiento CSS, contexto en cascada
-
- Prefacio
-
- 1. Div capas
- 2. Posición de posicionamiento CSS
- Contexto de tres cascadas
Div jerárquico, posición de posicionamiento CSS, contexto en cascada
Prefacio
Este es el punto de conocimiento que resumí sobre la forma de aprendizaje El gráfico del código fuente presenta la div jerárquica, la posición de posicionamiento CSS y el contexto en cascada en detalle. Espero que sea de ayuda para todos, y continuaré a Gauguin. ¡Vamos a progresar juntos en el nuevo año!
1. Div capas
El siguiente paso es verificar la posición de cada elemento en la capa div. La idea principal es superponer y cubrir
1.1 ¿De dónde va el fondo? ¿Dónde está el color de fondo div
El rango de fondo es el área encerrada desde el borde exterior del borde.
Ideas
¿Cómo verificarlo?
Se puede ver configurando el borde semitransparente
proceso
el código se muestra a continuación
<head>
...
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.demo{
box-sizing: border-box;
margin: 12px;
border: 10px solid rgba(255,0,0,1);
padding: 22px;
width: 100px;
height: 100px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="demo">
内容
</div>
</body>
El código específico se puede ver en http://js.jirengu.com/vemax/1/edit?html, css, output
El efecto que se obtiene ajustando la transparencia del borde 1 a 0 mediante las herramientas de desarrollo es el siguiente
En conclusión
El rojo se vuelve transparente, el azul aparece: "Se puede concluir que el rango de fondo está hasta el final del área encerrada por el borde exterior del borde, lo que demuestra que el color de fondo del fondo está debajo del cuerpo del borde
1.2 ¿Dónde está el contenido del texto?
Ideas
Puede verse desde el frente que el contenido cubre el color de fondo y el contenido está por encima del fondo ¿Está el contenido por encima del borde?
Puede verificarse mediante código.
proceso
Sobre la base del código anterior, agregue un elemento span ( <span class=text>内容</span>) al div, y luego configure el estilo para aumentar el tamaño de fuente ( .text{ font-size: 100px; color: green }).
El código específico se puede ver en http://js.jirengu.com/zifot/1/edit?html, css, salida
Se puede ver que el efecto es el siguiente
En conclusión
Se puede ver en la imagen que el contenido cubre el borde, por lo que el contenido está por encima del borde.
1.3 ¿Dónde están los subelementos de ese bloque?
Ideas
Al agregar elementos secundarios a nivel de bloque, se superpone con el objeto de comparación
proceso
Todavía pasa la verificación del código
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="childDiv"></div>
</div>
</body>
Se agregó un elemento secundario childDiv a nivel de bloque al div, establezca su estilo en blanco y lo movió hacia arriba en -10px
En conclusión
-
Se puede ver que el div blanco del elemento hijo a nivel de bloque está en el fondo del div padre- "El elemento hijo a nivel de bloque está en el fondo.
-
Se puede ver que el contenido de texto del div padre cubre el div blanco - "Se puede concluir que el contenido del texto es el elemento hijo en línea encima del elemento hijo a nivel de bloque
1.4 ¿Dónde está el elemento flotante?
Ideas
Agregue un div flotante izquierdo verde en el div principal y establezca el margen derecho en -20px para superponer el texto.
proceso
el código se muestra a continuación
<head>
...
<style>
.demo{
background: rgb(120,184,211);
width: 200px;
height: 200px;
border: 15px solid rgba(255,0,0,1);
padding: 10px;
}
.childDiv{
background: white;
height: 50px;
}
.float{
float: left;
background: green;
height: 50px;
width: 50px;
color: red;
margin-right: -20px;
}
</style>
</head>
<body>
<div class="demo">
我是文字内容
<div class="float"></div>
<div class="childDiv"></div>
</div>
</body>
El código específico se puede ver en http://js.jirengu.com/zaban/1/edit?html, css, output
El diagrama de efectos es el siguiente
En conclusión
-
Se puede ver que el elemento flotante verde cubre el elemento no flotante blanco: "El elemento flotante está por encima del elemento hijo a nivel de bloque.
-
Se puede ver que el texto cubre el elemento flotante verde: "El elemento secundario en línea está encima del elemento flotante
1.5 En resumen, esta cifra se puede verificar:
No importa si el texto está en la parte más externa o dentro de un elemento div determinado, se trata por igual.
2. Posición de posicionamiento CSS
Después de comprender las capas div, comprendamos la posición de posicionamiento de CSS.
¿Cuál es la diferencia entre el diseño y el posicionamiento escritos en CSS Getting Started Note 3 ?
El diseño es el plano de la pantalla en
El posicionamiento es perpendicular a la pantalla
Comprender el posicionamiento CSS primero comprender el flujo de documentos y el modelo de caja
Tanto el flujo de documentos como el modelo de caja pueden ver las notas de entrada de CSS 2
O verifique el flujo de documentos del documento estándar (normal_flow) MDN / modelo de caja (modelo de caja) MDN
Cinco valores de posición
选择器{
...
position: 五个取值;
}
2.1 estático
static es el predeterminado, lo que significa que el elemento actual está en el flujo de documentos
选择器{
...
position: static;
}
2.2 posicionamiento relativo relativo
El posicionamiento relativo aumenta, pero no se desvía del flujo de documentos
选择器{
...
position: relative;
}
escenas a utilizar:
- Para obtener el
código específico para el desplazamiento (rara vez se usa) , consulte http://js.jirengu.com/newuc/1/edit?html, css, output
Desde la perspectiva del div negro, su div verde todavía está en su posición original, y la posición que ocupa sigue siendo la misma, pero el lugar mostrado está un poco desplazado.
-
Solía ser padre absoluto
-
Con índice z
z-index: auto; valor predeterminado, no crea un nuevo contexto en cascada
índice z: 0/1/2;
índice z: -1 / -2
El índice z predeterminado es automático, el valor calculado por auto es 0, pero 0 no se puede escribir (0 puede crear un contexto en cascada),
2.3 posicionamiento absoluto absoluto
Se colocará en relación con el primer elemento posicionado del elemento ancestro (siempre que no sea estático) , principalmente emparejado con relativo
- escenas que se utilizarán
- Romper con la posición original y crear una nueva capa, como el botón de cierre de un cuadro de diálogo
El código específico se puede ver en http://js.jirengu.com/zizaf/1/edit?html, css, output
- Función de contenido de visualización de desplazamiento del mouse
<head>
...
<style>
.container{
border: 1px solid red;
height: 300px;
position: relative;
padding: 20px;
}
button{
position: relative;
}
button span{
position: absolute;
border: 1px solid red;
white-space: nowrap;
/*控制文字内容不准换行*/
bottom: calc(100% + 10px);
/*距离底部100%再加10px*/
left: 50%;
transform: translateX(-50%)
}
/*默认不浮现，悬浮着浮现*/
button span{
display: none;
}
button:hover span{
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div style="height: 100px;"></div>
<button>点击
<span class=tips>提示内容</span>
</button>
</div>
</body>
Consulte el código específico http://js.jirengu.com/zosof/1/edit?html,css,output
Los efectos similares son los siguientes
- Se puede utilizar con índice z
En algunos navegadores, si no escribe arriba / izquierda, la posición se confundirá
Haz un buen uso de left: 100%; usado para encontrar la ubicación
Haga un buen uso de left: 50%; agregue un margen negativo (o transform: translateX (50%); ...)
2.4 Posicionamiento relativo fijo de la ventana gráfica
La ventana gráfica (viewport) es el área que esta página web puede mostrar al usuario
No coloque fixd dentro de un atributo de transformación, no será ortogonal.
Intente no utilizar este atributo en su teléfono móvil, habrá muchos problemas
- escenas que se utilizarán
- Anuncios molestos
- Botón volver al principio
Para obtener un código específico, consulte http://js.jirengu.com/sibulo/1/edit?html,css,output
- Con índice z
2.5 posicionamiento pegajoso pegajoso
Se puede utilizar como barra de navegación, compatibilidad deficiente (la compatibilidad se puede encontrar buscando sticky en caniuse.com )
Similar a lo siguiente
El código específico se puede ver en http://js.jirengu.com/rajeg/1/edit?html, css, output
Contexto de tres cascadas
También se llama contexto de apilamiento
3.1 Elementos de posicionamiento
El elemento de posicionamiento está en la parte superior por defecto (índice z = 0/1/2 / ...), se basará en esa capa y seguirá subiendo, el índice z de -1 estará debajo del fondo y seguirá abajo. El índice z no puede exceder el contexto en cascada cuando es negativo. No tiene sentido correr detrás de html.
<head>
...
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;}
.container{
border: 1px solid black;
height: 200px;
background: rgba(52, 235, 232, .5);
/*设置半透明可以看到背景下的relativ2的黑色*/
}
.relative{
height: 50px;
background: red;
position: relative;
margin-top: -10px;
}
.relative2{
height: 50px;
background: black;
position: relative;
top: -20px;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
我是文字
<div class="relative"></div>
<div class="relative2"></div>
</div>
</body>
El código específico se puede ver en http://js.jirengu.com/wupop/2/edit?html, css, output
El diagrama de efectos es el siguiente
En conclusión
Se puede ver en la imagen que el cuadro de posicionamiento relativo rojo cubre el texto; el elemento de posicionamiento está en la parte superior
Puede verse en la figura que el fondo azul translúcido del contenedor cubre el fondo de la caja 2 con índice z: -1 ;. . . - "En el fondo
Hay una imagen dibujada por el maestro para ilustrar
3.2 ¿Pueden los elementos de posicionamiento depender del tamaño del índice Z?
No, depende de si están en el mismo ámbito.
índice z: 9; ¿es mayor que índice z: 2 ;?
Usar código para verificar
El código específico se puede ver en http://js.jirengu.com/dayev/2/edit?html, css, output
En conclusión:
- El 2 azul cubre el 9 rojo: " ay b2 están en el mismo mundo pequeño (el contexto apilado que trae el contenedor). El índice Z en este pequeño mundo no tiene nada que ver con el mundo exterior. Solo se pueden comparar índices z en el mismo mundo pequeño
3.3 ¿Qué atributos pueden crear un contexto en cascada?
El código anterior es para crear un contexto de apilamiento en un posicionamiento relativo absoluto donde el valor del índice z no es automático. El relativo anterior con el índice z también habla de z-index: auto; el valor predeterminado no crea un nuevo contexto de apilamiento
Hay muchas situaciones en las que puede crear un contexto en cascada y también se pueden crear algunas propiedades no ortogonales. Las que deben recordarse son:
-
índice z (el elemento cuyo valor de posición es absoluto (posicionamiento absoluto) o relativo (posicionamiento relativo) y el valor del índice z no es automático)
-
flex (elemento secundario del contenedor flex (flexbox), y el valor del índice z no es automático;)
-
opacidad (elementos con un valor de atributo de opacidad menor que 1)
-
transformar (el valor del atributo no es ninguno)
Puede buscar "MDN de contexto en cascada" para obtener más información sobre el contexto en cascada y cómo crearlo.
-Seguir
Estoy en camino de aprender el frente desde la entrada al suelo. Cada vez que miras, es tu mayor estímulo para mi viaje de aprendizaje, ¡trabajemos juntos duro!
Bienvenidos a dejar sus valiosos comentarios.
