BASE
Simplemente tome un registro aproximado de las cosas que no le son familiares y que necesitan atención.
El aprendizaje CSS todavía necesita comprender un diseño muy clásico ~~~
Aunque hay muchos marcos para ayudarlo, necesita ajustarlo o tratar de ser más controlable.
- Flotante porque el div predeterminado sale con un código vertical, float: left comienza horizontalmente desde la izquierda, y float: right hace lo mismo.
- El margen es la distancia entre elementos.
margen: arriba a la derecha abajo a la izquierda
margen: arriba, abajo, izquierda y derecha
margen: arriba, abajo, izquierda y derecha
- He escuchado un dicho sobre el relleno de relleno, pero no sé si tiene sentido. Diga lo que se puede resolver con relleno, no con margen.
Los tres métodos de escritura son iguales al margen anterior. Otro relleno: el margen es el mismo para la parte superior, inferior, izquierda y derecha.
Nota: el margen no cambiará el tamaño del elemento, pero el relleno cambiará el tamaño del elemento original.
- Elementos de bloque y elementos en línea.
Elemento de bloque: Div es el elemento de bloque más básico
1. Admite margen de ancho y alto, relleno
2. El ancho es 100% por defecto, en una línea por sí mismo
Elemento en línea: span El elemento en línea más básico
1. El ancho y la altura cambiarán a medida que cambie el contenido
2. Margen de soporte, relleno
3. No monopolice una línea
Los elementos de bloque se pueden anidar en
línea a voluntad, solo los elementos en línea se pueden anidar
- frontera-frontera
- antecedentes
-Posición de fondo
de fondo de coordenadas
puso dos parámetros por defecto del segundo parámetro es el centro
del parámetro eje x se
El segundo parámetro es el eje Y
para apoyar la derecha / abajo / izquierda / superior / centro de la redacción
Font
- fuente
Familia tipográfica: "Fuente 1", "Fuente 2", "Fuente 3", "Fuente 4", "Fuente 5", "Fuente 6"
Si no hay fuente 1, encontrará la fuente 2, y así sucesivamente. . .
- altura de línea que creo que es muy importante
Establezca su propia posición de altura interna
Cuando el tamaño de la altura de la línea es el tamaño del elemento, estará en el medio del elemento
Esta cosa puede controlar los elementos en la línea ~
Es decir, si hay un elemento de bloque div en el medio, ¡no será válido! ! !
Los porcentajes, los números son compatibles, pero los porcentajes se heredan del padre.
- Cómo usar texto en cursiva tipo fuente
cursiva => es la fuente cursiva utilizada
oblicuo => es poner la fuente en cursiva
- variante de fuente (Ignorarlo es inútil)
- Abreviatura del atributo de fuente (parte del marco rojo)
¡Posicionar a Gray siempre es importante! ! ! ! ! !
Posicionamiento, diseño, la estación b tiene una gran cantidad de videos de diseño clásico, puede consultar el portal
- posición
El posicionamiento relativo (izquierda, derecha, arriba, abajo del índice z (quién puede cubrir los atributos de quién) del eje z es equivalente a la sensación de lo que se coloca en el nivel superior en Excel, etc. La aplicación del proyecto real que he conocido antes: Por ejemplo, cuando aparece una ventana secundaria, agregue una máscara a la ventana primaria, el índice z de la ventana secundaria es mayor que el índice z de la máscara es mayor que la ventana primaria ) (el eje z admite números negativos)
El posicionamiento relativo no afectará la posición original , y los elementos mostrados cambiarán de posición. . . . . .
- Posicionamiento absoluto
Fuera del flujo estándar
El posicionamiento absoluto no abandonará la posición original.
El posicionamiento absoluto se basa en el nodo principal posicionado.
Pero si el nodo primario no está ubicado, es el nodo primario no está ubicado, no el nodo primario, tenga en cuenta que
Entonces siempre encontrará el nodo más externo hasta el nodo del cuerpo.
- Posicionamiento de la ventana
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#div1{
margin-top: 300px;
margin-left: 300px;
background-color: rosybrown;
height: 160px;
width: 160px;
position: relative;
float: left;
}
#div2{
margin-top: 30px;
margin-left: 30px;
background-color:saddlebrown;
height: 60px;
width: 60px;
position:absolute;
}
#div3{
margin-top: 0px;
margin-left: 0px;
background-color:seagreen;
height: 160px;
width: 160px;
position: fixed;
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="height: 2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3"></div> -->
</body>
</html>Cuando la ventana se desplaza, su div se moverá, pero los elementos posicionados por la ventana no se moverán ~~~
Esta cosa, he encontrado esta aplicación práctica en proyectos anteriores, es decir
Esto requiere cómo desplazarse por la ventana, y también reserva un botón que puede abrir una ventana secundaria para modificar las condiciones para recuperar la mercancía.
Siempre se puede ubicar en una determinada posición de la pantalla.
El profesor del curso dijo, por ejemplo, que ese tipo de publicidad siempre estará suspendida en algún lugar de la pantalla. . . . . .
- Posicionamiento de los padres: ¿Cuál es el posicionamiento del padre, cuál es el posicionamiento de sí mismo?
heredar un div hijo anidado en un div, si se utiliza el método de posicionamiento de herencia, entonces cuál es el posicionamiento de su div padre, cuál es su forma de ser.
Por ejemplo: el padre es una ventana. Si no se desplaza, también es una ventana y no se desplazará.
El padre es absoluto y lo seguirá, él también es absoluto, lo seguirá.
Si el padre también es heredado, entonces debe mirar al padre nuevamente.
- El valor predeterminado es sin posicionamiento estático
monitor
¡Float puede convertir elementos en filas en elementos de bloque! ! ! ~~~
Además, display: block también se puede usar para programar elementos similares a bloques.
El elemento de bloque variable es que el ancho y la altura de la línea que establezca tendrán un efecto.
- No sé cómo usarlo en la industria
- Entonces, ¿es posible girar hacia los lados y soportar el ancho y la altura?
- Rojo y verde es el ancho y la altura del div, pero no se puede colocar de lado
- El gris amarillo es el elemento en la línea de tramo, que se puede colocar horizontalmente, pero no admite el ancho y la altura (la siguiente imagen es el efecto después de agregar el bloque en línea, y el ancho y la altura no son compatibles cuando no se agrega)
- Así nació el bloque en línea, que se puede colocar de lado y puede soportar el ancho y la altura.
Unidad de porcentaje elemental
Otra palabra: el valor predeterminado de los elementos de bloque es ancho, que es 100% predeterminado, por lo que solo ocupan una línea, pero el alto es 0, por lo que cuando no lo configura, no puede verlo. Por ejemplo, en este momento, escribe directamente un div debajo del cuerpo, y establece su altura al 50% o algo así, no puede verlo, pero si en este momento, establece la altura de html y cuerpo a 100 %, Puedes ver el 50% div que acabas de hacer. Debes prestar atención a este punto.
Por encima
