Wondershare EdrawMind
Galería de mapas mentales Programa de formación del curso básico HTML front-end CSS
- 6
Programa de formación del curso básico HTML front-end CSS
Programa de capacitación del curso básico HTML front-end CSS, una página web tiene tres partes, la estructura es la estructura general de la página, dónde está el título, dónde está el párrafo, dónde está la imagen, la estructura está escrita en HTML y el rendimiento es el estilo externo de la página, como la fuente, el tamaño de fuente, el color de fuente y el fondo.
Editado a las 2022-11-08 10:53:34,
Programa de formación del curso básico HTML front-end CSS
- Recomendados
- Resumen
Resumen de notas sobre el marco de conocimiento de la red de algoritmos front-end
- 9
Programa de formación del curso básico HTML front-end CSS
CSS
CSS se llama hojas de estilo en cascada y se utiliza para diseñar elementos de la página. Color de fondo, color de fuente, tamaño de fuente. . .
CSS es responsable del rendimiento en estructura, presentación y comportamiento.
ubicación escrita
1. Estilos en línea
Escriba el estilo en el atributo de estilo de la etiqueta.
Este estilo solo funcionará en la etiqueta actual y no se puede reutilizar. Es inconveniente para el mantenimiento posterior y no se recomienda.
2. Hoja de estilo interna
Escriba la hoja de estilo en la etiqueta de estilo en el encabezado.
Utilice hojas de estilo internas para separar aún más el rendimiento y la estructura. Puede establecer estilos para varios elementos al mismo tiempo para facilitar el mantenimiento posterior.
3. Hojas de estilo externas
Escriba la hoja de estilo en un archivo CSS externo y luego introduzca el archivo externo a través de la etiqueta de enlace
Escriba los estilos en una hoja de estilos externa. Puede utilizar la misma hoja de estilos en diferentes páginas, separando completamente el rendimiento y la estructura, lo que facilita el mantenimiento posterior. Este es el método recomendado.
gramática básica
Selector
Utilice selectores para seleccionar un grupo de elementos en la página y luego establezca estilos para ellos
selector de elementos
Seleccione el elemento especificado en la página según el nombre de la etiqueta
Sintaxis: nombre de etiqueta { }
ejemplo:
div{}
pags{}
h1{}
selector de identificación
Seleccione un elemento único según su valor de atributo de identificación
Sintaxis: #id {}
ejemplo:
#caja1{}
#Hola{}
selector de clase
Seleccione un grupo de elementos según el valor del atributo de clase del elemento
Sintaxis: .clase{}
ejemplo:
.Hola{}
.caja{}
selector comodín
Seleccionar todos los elementos de la página.
gramática:*{}
El rendimiento de los selectores comodín es relativamente pobre, así que trate de evitar su uso.
selector sindical
Los elementos que coinciden con varios selectores se pueden seleccionar al mismo tiempo
Sintaxis: selector 1, selector 2, selector N{}
ejemplo:
div,p,#caja,.hola{}
Selector de intersecciones
Se pueden seleccionar elementos que cumplan múltiples condiciones.
Sintaxis: Selector 1 Selector 2 Selector N{}
Ejemplo: p.hola{}
Selector de elementos descendientes
Selecciona los elementos descendientes especificados del elemento especificado.
Sintaxis: elemento ancestro elemento descendiente {}
ejemplo:
intervalo div {}
divp{}
Selector de elementos secundarios
Seleccione el elemento secundario especificado del elemento especificado
Sintaxis: elemento padre > elemento hijo {}
ejemplo:
div > abarcar {}
div>p{}
bloque de declaración
El bloque de declaración es en realidad una declaración CSS.
declaración
Cada declaración CSS es un estilo, que en realidad es una estructura de pares nombre-valor.
Uso: vínculo entre nombre y valor
:El lado izquierdo es el nombre del estilo.
:El lado derecho es el valor del estilo.
Cada declaración termina con;
ejemplo
color rojo;
tamaño de fuente: 20px;
relación entre elementos
elemento padre
Un elemento que contiene directamente elementos secundarios se denomina elemento principal.
elemento hijo
Los elementos contenidos directamente en un elemento padre se denominan elementos hijos.
Elementos ancestrales
Los elementos que contienen directa o indirectamente elementos descendientes se denominan elementos ancestros y el elemento padre también es un elemento ancestro.
Elementos descendientes
Los elementos que están contenidos directa o indirectamente en elementos ancestros se denominan elementos descendientes, y los elementos secundarios también son elementos descendientes.
elementos hermanos
Los elementos que tienen el mismo elemento padre se llaman hermanos.
Elementos de bloque y elementos en línea
elemento de bloque
Un elemento de bloque ocupa su propia fila en la página, independientemente de su contenido.
Generalmente utilice elementos de bloque para diseñar la página.
Elementos de bloque comunes
div
pag
h1~h6
elementos en línea
Los elementos en línea solo ocupan su propio tamaño y no ocuparán una línea.
Los elementos en línea también se denominan elementos en línea (en línea)
Generalmente, los elementos en línea se utilizan para establecer efectos para el texto.
en línea común
durar
a
imagen
Reglas del paquete
Generalmente, los elementos de bloque se utilizan para envolver elementos en línea, pero los elementos en línea no se utilizan para envolver elementos de bloque.
El elemento a puede contener cualquier elemento excepto a sí mismo.
El elemento p no puede contener ningún elemento de bloque.
Pseudoclases y pseudoelementos.
Las pseudoclases y pseudoelementos se utilizan para representar un estado especial o una posición especial del elemento.
:enlace
Representa un enlace normal (enlace no visitado)
:visitado
Representa enlaces visitados
:flotar
Los enlaces a los que se mueve el mouse también se pueden configurar para que se desplacen sobre otros elementos.
:activo
El enlace en el que se hace clic también se puede activar para otros elementos.
:enfocar
Indica el estado del elemento que recibe el foco, generalmente utilizado en cuadros de texto.
::selección
Indica que el contenido está seleccionado.
En Firefox use ::-moz-selection en su lugar
:primera letra
Representa el primer personaje.
:primera linea
Representa la primera línea de texto.
:antes
Seleccione el frente del elemento
Generalmente, esta pseudoclase se usa junto con el contenido, a través del cual se puede agregar contenido a la ubicación especificada.
:después
Seleccione el último borde del elemento.
Generalmente, esta pseudoclase se usa junto con el contenido, a través del cual se puede agregar contenido a la ubicación especificada.
selector de atributos
Seleccione el elemento especificado según sus atributos
[Nombre del Atributo]
Seleccionar elementos con atributos específicos
[nombre del atributo="valor del atributo"]
Seleccionar elementos cuyo valor de atributo sea igual al valor especificado
[Nombre del atributo^="Valor del atributo"]
Seleccionar elementos cuyo valor de atributo comience con el contenido especificado
[Nombre del atributo$="Valor del atributo"]
Seleccionar elementos cuyo valor de atributo termine con el contenido especificado
[Nombre del atributo*="Valor del atributo"]
Seleccionar elementos cuyo valor de atributo contenga el contenido especificado
Selector de elementos hermanos
Seleccione el siguiente elemento hermano
Anterior Siguiente
Seleccione todos los siguientes elementos hermanos
Anterior ~ Todos los siguientes
Pseudoclase para elementos secundarios.
:primer hijo
Encuentre el primer elemento hijo del elemento padre y ordénelo entre todos los elementos hijos
:último niño
Encuentre el último elemento secundario del elemento principal y ordénelo entre todos los elementos secundarios
: enésimo niño
Encuentre el elemento secundario en la posición especificada en el elemento principal y ordénelo entre todos los elementos secundarios
ejemplo
p:nésimo-niño(3)
Puedes usar incluso para encontrar elementos secundarios pares
Puedes usar odd para encontrar elementos secundarios impares.
:primero de tipo
Encuentra el primer elemento hijo del tipo especificado
:último tipo
Encuentra el último elemento hijo del tipo especificado
: enésimo de tipo
Encuentra el elemento secundario especificado del tipo especificado
negar pseudoclase
Eliminar elementos que cumplan los requisitos de un conjunto de elementos.
gramática:
:no(selector)
ejemplo:
.abc:no(div)
Herencia de estilo
La configuración de estilos para un elemento ancestro también se aplicará a sus elementos descendientes. Esta característica se denomina herencia de estilos.
A través de la herencia de estilos, algunos estilos se pueden establecer de manera uniforme en elementos ancestros, de modo que a todos los descendientes se les aplicará el mismo estilo.
Pero no todos los estilos se heredarán, como: relacionado con el fondo, relacionado con el borde y relacionado con el posicionamiento. Documentos de referencia específicos
prioridad del selector
Cuando se utilizan selectores para diseñar elementos, si los estilos entran en conflicto, la prioridad del selector determina qué estilo se utiliza.
prioridad
estilos en línea
1000
selector de identificación
100
Selectores de clase y pseudoclase
10
selector de elementos
1
selector comodín
0
Estilos heredados
sin prioridad
Cuando los estilos entran en conflicto, las prioridades del selector relacionadas deben sumarse y calcularse. El que tenga mayor prioridad se mostrará primero. Si las prioridades son las mismas, se mostrará el estilo posterior.
Al calcular las prioridades, el tamaño total no puede exceder su orden máximo de magnitud.
Puede agregar un! Importante después del estilo. Si este contenido se agrega al estilo, el estilo obtendrá la máxima prioridad y se mostrará antes de todos los estilos, incluidos los estilos en línea. Sin embargo, este atributo debe usarse con precaución.
Rendimiento del selector
Cuando el navegador analiza un grupo de selectores, los analiza uno por uno de atrás hacia adelante.
Si el selector es demasiado largo, el rendimiento de análisis del navegador será deficiente, por lo que al escribir el selector, cuanto más corto, mejor.
*Los selectores comodín tienen un rendimiento deficiente. Evite el uso de selectores comodín.
unidad
unidad de longitud
píxeles
Píxel, píxel es la unidad más pequeña que compone una imagen. Nuestra pantalla está formada por píxeles uno a uno.
Un píxel se refiere a un píxel.
En diferentes pantallas, el tamaño de un píxel es diferente. Cuanto más clara es la pantalla, más pequeños son los píxeles.
%
Puede establecer el valor de estilo de un elemento en un valor porcentual, de modo que el navegador calcule el valor correspondiente en función del valor del elemento principal.
Cuando el valor del elemento principal cambia, el valor del elemento secundario cambiará juntos de acuerdo con una cierta proporción, que a menudo se usa en páginas adaptables.
ellos
em se calculará en relación con el tamaño de fuente del elemento actual
1em = 1 tamaño de fuente
em se usa a menudo para establecer algunos estilos relacionados con el texto, porque cuando cambia el tamaño del texto, em cambiará en consecuencia.
unidad de color
palabras de color
Utilice palabras en inglés directamente para representar colores.
rojo verde azul naranja
valor RGB
El llamado valor RGB consiste en hacer coincidir varios colores mediante diferentes combinaciones de los tres colores primarios: rojo, verde y azul.
gramática:
rgb (rojo, verde, azul)
Estos tres valores requieren un valor entre 0-255
0 significa ninguno
255 representa el máximo
rgb(50,200,30)
También puede utilizar porcentajes para establecer valores RGB, que requieren un valor entre 0% y 100%.
El porcentaje finalmente se convierte a 0-255.
0% es equivalente a 0
100% equivale a 255
rgb(100%,0%,0%)
Valor RGB hexadecimal
También es una forma de expresar valores RGB. La diferencia es que utiliza números hexadecimales en lugar de decimales.
gramática:
#rojo verde azul
El color aquí necesita un valor entre 00-ff
ejemplo:
#ff0000
Si el color se repite de dos en dos se puede abreviar.
Por ejemplo, #aabbcc se puede escribir como #abc
Por ejemplo #bbffaa se puede escribir como #bfa
estilo de texto
fuente
color
color de fuente
tamaño de fuente
tamaño de fuente
El tamaño de fuente predeterminado en el navegador es generalmente de 16 píxeles, y cuando desarrollamos, generalmente se unifica a 12 píxeles.
Familia tipográfica
Establecer fuente de texto
Estilo de fuente
Establecer cursiva
peso de fuente
Establecer negrita del texto
variante de fuente
letras minúsculas
fuente
atributo de abreviatura de texto
Todos los estilos relacionados con fuentes se pueden configurar al mismo tiempo
gramática:
fuente: [negrita cursiva minúscula] tamaño [/alto de línea] fuente
Negrita, cursiva, letras pequeñas y grandes, el orden no importa, puedes escribirlo o no, si no, usa el valor predeterminado
El tamaño del texto y la fuente deben estar escritos, y el tamaño debe ser el penúltimo y la fuente debe ser la última
Después del tamaño, puede establecer la altura de la fila, que se puede escribir o no. De lo contrario, se utilizará el valor predeterminado.
estilo de texto
altura de la línea
altura de la fila
De forma predeterminada, el texto está centrado verticalmente en el centro superior de la línea.
La altura de la línea se puede modificar a través de la altura de la línea.
Interlineado = alto de línea - tamaño de fuente
transformación de texto
Establecer mayúsculas y minúsculas
decoracion-de-texto
Establecer decoración de texto
texto alineado
Establecer alineación de texto
guion de texto
Establecer sangría de primera línea
Requiere una unidad de longitud. Si es un valor positivo, la primera fila se moverá hacia la derecha. Si es un valor negativo, se moverá hacia la izquierda.
espaciado de letras
espaciado entre caracteres
espaciado de palabras
espaciado de palabras
fondo
color de fondo
color de fondo
imagen de fondo
Imagen de fondo
Se requiere una dirección URL como parámetro
Ejemplo: imagen de fondo:url (ruta a la imagen)
repetición de fondo
Establecer el modo de repetición de la imagen de fondo
Valores opcionales:
repetir
De forma predeterminada, la imagen de fondo se mostrará en mosaico.
Repita en ambas direcciones a lo largo del eje x y del eje y.
no repetir
La imagen de fondo no se repite.
repetir-x
La imagen de fondo se repite horizontalmente
repetir-y
La imagen de fondo se repite verticalmente
posición de fondo
Establecer la posición de la imagen de fondo.
Método de configuración uno
Puede establecer directamente la posición de la imagen a través de varias palabras clave de posición.
arriba
izquierda
bien
abajo
centro
Puede configurar la imagen de fondo en cualquier posición del elemento combinando las palabras clave anteriores en pares.
Si solo se especifica un valor, el segundo valor se centra de forma predeterminada
Método de configuración dos
Puede especificar directamente dos valores para establecer el desplazamiento de la imagen de fondo.
ejemplo:
posición de fondo: desplazamiento del eje x desplazamiento del eje y;
Desplazamiento del eje x, utilizado para especificar la posición horizontal de la imagen.
Si especifica un valor positivo, la imagen se mueve hacia la derecha
Si especifica un valor negativo, la imagen se mueve hacia la izquierda
Desplazamiento del eje Y, utilizado para especificar la posición vertical de la imagen.
Si especifica un valor positivo, la imagen se mueve hacia abajo.
Si especifica un valor negativo, la imagen se mueve hacia arriba.
archivo adjunto de fondo
Se utiliza para establecer si el fondo se desplaza con la página.
Valor opcional
Desplazarse
De forma predeterminada, la imagen de fondo se desplazará con la página.
fijado
La imagen de fondo no se desplaza con la página y se fijará en la posición especificada de la página.
Si configura el fondo de esta propiedad, el fondo siempre estará ubicado en relación con la ventana del navegador.
Generalmente este fondo se establecerá en el cuerpo.
fondo
Atributo taquigráfico para el fondo
Puedes usarlo para configurar todos los estilos relacionados con el fondo.
No hay ningún requisito de pedido o cantidad para este atributo abreviado. El valor predeterminado se utiliza para atributos que no están escritos.
opacidad
Se utiliza para establecer la opacidad del fondo.
Valor opcional
0-1
0 significa completamente transparente
1 significa completamente opaco
0,5 translúcido
Los navegadores IE8 y anteriores no admiten este estilo. En su lugar, puede utilizar filtros.
filtro:alfa(opacidad=valor)
El valor aquí requiere un valor entre 0-100
0 equivale a transparencia total
100 completamente opaco
HTML
La estructura de la página web.
Una página web consta de tres partes.
estructura
La estructura es la estructura general de la página, dónde está el título, dónde está el párrafo, dónde está la imagen.
La estructura está escrita usando HTML.
Actuación
El rendimiento es el estilo externo de la página, como la fuente, el tamaño de la fuente, el color de la fuente y el fondo. . .
Utilice CSS para diseñar elementos en su página
Comportamiento
Interacción entre página y usuario.
Utilice JavaScript para configurar el comportamiento de la página
Una página web bien diseñada requiere la separación de estructura, presentación y comportamiento.
En el desarrollo, siempre nos enfrentamos a un problema, que es el acoplamiento entre programas. La separación de los tres es comprender el acoplamiento.
HTML, lenguaje de marcado de hipertexto
Responsable de la estructura de la página y de definir los distintos componentes de la misma.
HTML está escrito en forma de texto sin formato y utiliza etiquetas HTML para identificar diferentes partes de la página.
Etiqueta
aparecer en parejas
etiqueta de cierre automático
Atributos
Puede establecer el efecto de la etiqueta a través de atributos.
Los atributos deben definirse en la etiqueta de apertura o en la etiqueta de cierre.
Las propiedades son en realidad un conjunto de pares nombre-valor.
ejemplo:
Estructura básica de la página HTML.
Declaración de documentación
La versión HTML utilizada para identificar la página actual.
Esta declaración se utiliza para indicarle al navegador que la página actual está escrita utilizando el estándar HTML5.
Etiquetas comunes
La etiqueta raíz de la página web.
Solo hay una etiqueta raíz en una página.
Todo el contenido de la página web debe escribirse dentro de la etiqueta html.
Encabezado de página web
El contenido de esta etiqueta no se mostrará directamente en la página web.
Esta etiqueta se utiliza para ayudar al navegador a analizar la página.
subetiqueta
Se utiliza para establecer el título de la página web.
De forma predeterminada, se mostrará en la barra de título del navegador.
Cuando un motor de búsqueda recupera una página web, recuperará principalmente el contenido del título, lo que afectará la clasificación de la página en el motor de búsqueda.
Se utiliza para configurar metadatos de páginas web, como el juego de caracteres utilizado por las páginas web.
Establecer palabras clave para páginas web
Establecer la descripción de la página web.
Redirección solicitada
El cuerpo de la página web.
Todas las partes visibles de la página web deben escribirse en el cuerpo.
~
etiqueta de título
Hay seis niveles de títulos en html.
Entre los títulos de seis niveles, h1 es el más importante y h6 es el menos importante. En las páginas generales, solo se utilizan h1 ~ h3.
La importancia de h1 es superada solo por el título. El navegador también buscará principalmente el contenido en h1 para determinar el contenido principal de la página.
Generalmente, solo se puede escribir un h1 en una página.
etiquetas de párrafo
etiqueta de nueva línea
etiqueta de línea horizontal
marco flotante
Puede introducir otras páginas externas en una página.
Atributos
src
La dirección de la página externa, puedes usar rutas relativas.
anchura y altura
Puede establecer el ancho y alto del marco.
nombre
A un marco en línea se le puede dar un nombre
El valor de este atributo se puede establecer en el valor del atributo de destino del hipervínculo.
De esta manera, cuando se haga clic en el hipervínculo, la página se abrirá en el marco en línea correspondiente.
Los motores de búsqueda no recuperarán el contenido de los marcos en línea, así que trate de no utilizar marcos en línea durante el desarrollo.
Hipervínculo
Puede hacer que la página actual salte a otras páginas.
<a>Texto del enlace</a>
Atributos
href
Apunta a la dirección de destino del salto del enlace, que puede ser una ruta relativa
También puede ser el valor del atributo #id, de modo que cuando se haga clic en el hipervínculo, saltará a la ubicación especificada en la página actual.
Puede utilizar mailto: para crear un hipervínculo que envíe un correo electrónico
objetivo
Especifique la ventana en la que se debe abrir el enlace.
Valor opcional
_ser
Valor predeterminado, el enlace se abrirá en la ventana actual de forma predeterminada
_blanco
Abrir enlace en una nueva ventana
El valor del atributo de nombre de un marco en línea.
Abre el enlace en el iframe especificado.
Comentario
gramática
El contenido de los comentarios no se mostrará en la página, pero se mostrará en el código fuente. Podemos utilizar comentarios para explicar el código de la página web.
También puedes ocultar contenido que no deseas mostrar en la página a través de comentarios.
entidad
Algunos símbolos especiales no se pueden usar directamente en páginas HTML y es necesario usar entidades para reemplazar estos símbolos especiales.
Las entidades también pueden denominarse personajes de escape.
sintaxis de entidad
&nombre de la entidad;
Entidades de uso común
espacio
<
>
>
símbolo de copyright
©
Etiquetas de imagen
<img/>
Utilice la etiqueta de imagen para introducir una imagen externa a la página.
Atributos
src
Ruta que apunta a una imagen externa, puedes usar rutas relativas
alternativo
Especifique una descripción para la imagen si no se puede cargar
Los motores de búsqueda utilizan principalmente este atributo para identificar el contenido de la imagen.
Si no escribes este atributo, el buscador incluirá la imagen.
ancho
Establecer el ancho de la imagen.
altura
Establecer la altura de la imagen.
Formato de imagen
JPEG
Imágenes coloridas, p. ej.
GIF
Un solo color, imágenes simples y transparentes, gráficos dinámicos.
PNG
Imágenes coloridas, complejas y transparentes.
Principios de selección de imágenes.
El efecto es consistente, use pequeñas
El efecto es inconsistente, úselo con mejor efecto.
camino relativo
Una ruta relativa al directorio donde se encuentra el recurso actual.
Puedes usar ../ para regresar al directorio de primer nivel, y para regresar a varios niveles, usa varios ../
Especificación de sintaxis xHtml
1.HTML no distingue entre mayúsculas y minúsculas, pero intente utilizar minúsculas
2.Los comentarios HTML no se pueden anidar
3. La etiqueta debe tener una estructura completa
O aparecen en parejas
o etiqueta de cierre automático
4. Las etiquetas se pueden anidar pero no se pueden anidar de forma cruzada.
5. El atributo debe tener un valor y el valor debe estar entre comillas. Se aceptan comillas simples y dobles.
etiqueta de texto
expresar énfasis en el tono
Indica la importancia del contenido.
significa cursiva simple
Indica simplemente negrita
Indica contenido como reglas detalladas.
Para indicar el contenido de referencia, se puede utilizar citar para cualquier cosa que tenga el título de un libro.
cotización breve, cotización en línea
referencia larga, referencia a nivel de bloque
sobrescrito
subíndice
Contenido eliminado
Contenido insertado
Las etiquetas preformateadas pueden conservar el formato de espacios y saltos de línea en el código.
representa el código del programa
lista
lista desordenada
Utilice ul para crear una lista desordenada y utilice li para representar un elemento de la lista.
Lista desordenada usando símbolos como viñetas
lista ordenada
Utilice ol para crear una lista desordenada y utilice li para representar un elemento de la lista.
Utilice números secuenciales como viñetas
lista de definiciones
Los elementos relacionados con la lista son todos elementos de bloque y se pueden anidar entre sí.
quitar balas
estilo de lista: ninguno
disposición
flotar
Utilice flotador para configurar elementos para que floten
Valor opcional
ninguno
Valor predeterminado, sin flotador, elemento en el flujo de documentos
izquierda
El elemento flota hacia la izquierda.
bien
El elemento flota hacia la derecha.
Características
1. Una vez que el elemento flote, se separará completamente del flujo de documentos.
2. Después de flotar, el elemento siempre se moverá a la parte superior del elemento principal.
3. Dejará de moverse hasta que encuentre el borde del elemento principal u otros elementos flotantes.
4. Si el elemento flotante está encima de un elemento de bloque, el elemento flotante no cubrirá el elemento de bloque.
5. El elemento flotante no excederá al elemento hermano flotante que está encima y se puede alinear en un lado como máximo.
6. Los elementos flotantes no cubrirán el texto. El texto se ajustará automáticamente alrededor de los elementos flotantes. Puede lograr un efecto de ajuste de texto flotando.
Características de los elementos después de flotar.
Cuando un elemento flota, se elimina por completo del flujo de documentos.
elemento de bloque
Después de que el elemento de bloque abandona el flujo de documentos
1. No ocupará una línea
2. Tanto el ancho como el alto se ven ampliados por el contenido.
elementos en línea
Los elementos en línea se convierten en elementos de bloque después de abandonar el flujo de documentos.
muy colapsado
La altura del elemento principal en el flujo de documentos se expande mediante los elementos secundarios de forma predeterminada. Cuando el elemento secundario se separa del flujo de documentos, no podrá soportar la altura del elemento principal, lo que provocará la altura de. el elemento padre se contraiga.
Una vez que la altura del elemento principal colapsa, las posiciones de todos los elementos se moverán hacia arriba, lo que hará que el diseño de toda la página sea caótico.
método uno
Active BFC o hasLayout del elemento padre
BFC
Contexto de formato de bloque
entorno de formato a nivel de bloque
BFC es un atributo implícito del elemento y está desactivado de forma predeterminada.
BFC se puede activar mediante algunos estilos especiales
Luego de encender BFC, los elementos tendrán las siguientes características:
1. Los márgenes verticales del elemento principal no se superpondrán con los elementos secundarios.
2. Los elementos con BFC activado no serán cubiertos por elementos flotantes.
3. Los elementos con BFC habilitado pueden contener elementos secundarios flotantes.
Cómo habilitar BFC
1. Configure el elemento para que flote
2. Establecer el posicionamiento absoluto de los elementos.
3. Establezca el tipo de elemento en bloque en línea.
4. Establezca el desbordamiento en un valor no predeterminado
Generalmente, overflow:hidden se usa para habilitar BFC.
tienediseño
No hay BFC en IE6, pero hay un hasLayout similar a BFC
En IE6, puedes resolver el problema del colapso de altura activando hasLayout.
La forma más fácil de abrir con mínimos efectos secundarios.
ampliar: 1
Al configurar un ancho no predeterminado para un elemento, hasLayout se activará automáticamente.
Método dos
Agregue un div en blanco al final del elemento principal contraído y luego borre el div
El uso de este enfoque agrega una estructura innecesaria a la página.
Método tres
Utilice la pseudoclase posterior para agregar un elemento de bloque después del elemento principal y borrar su flotador.
El principio de este método es el mismo que el del método 2, pero no es necesario agregar la estructura correspondiente a la página.
posición
Mediante el posicionamiento, los elementos de la página se pueden colocar en cualquier lugar de la página.
Utilice la posición para establecer el posicionamiento de los elementos.
Valor opcional
estático
Valor predeterminado, el posicionamiento del elemento no está habilitado
relativo
Activar el posicionamiento relativo de elementos.
absoluto
Activar el posicionamiento absoluto de elementos.
fijado
Activar el posicionamiento fijo de elementos.
posicionamiento relativo
1. Después de activar el posicionamiento relativo del elemento, el elemento no cambiará de ninguna manera si no se establece el desplazamiento.
2. Los elementos ubicados relativamente se ubican en relación con su propia posición en el flujo de documentos.
3. Los elementos relativamente ubicados no se separarán del flujo de documentos.
4. El posicionamiento relativo no cambia la naturaleza del elemento, ya sea un elemento de bloque o un elemento de bloque, o un elemento en línea o un elemento en línea.
5. Los elementos relativamente posicionados se elevarán a un nivel superior.
posicionamiento absoluto
1. Una vez que el elemento se establece en posicionamiento absoluto, si no se establece el desplazamiento, la posición del elemento no cambiará.
2. Un elemento con posición absoluta se coloca en relación con su elemento ancestro más cercano que tiene el posicionamiento habilitado. Si todos los elementos ancestros no tienen el posicionamiento habilitado, se coloca en relación con la ventana del navegador.
3. Los elementos absolutamente posicionados se separarán por completo del flujo de documentos.
4. El posicionamiento absoluto cambiará la naturaleza del elemento. Bloque variable en línea, la altura y el ancho del bloque se extienden según el contenido y no ocupan una línea exclusiva
5. El posicionamiento absoluto elevará el elemento a un nivel superior.
Posicionamiento fijo
El posicionamiento fijo es un tipo especial de posicionamiento absoluto. La mayoría de sus características son las mismas que las del posicionamiento absoluto.
La diferencia es que los elementos colocados de forma fija siempre se colocan en relación con la ventana del navegador. Y no se desplazará con la barra de desplazamiento.
IE6 no admite posicionamiento fijo
Jerarquía
Elementos posicionados > Elementos flotantes > Elementos en el flujo de documentos
Cuando el posicionamiento está activado para un elemento, el nivel del elemento se puede establecer a través del índice z.
Cuanto mayor sea el valor del índice z, más elementos de prioridad se mostrarán.
Si los valores del índice z son los mismos o no hay ningún índice z, el elemento inferior se mostrará primero.
Los elementos principales nunca cubren los elementos secundarios
Compensar
Cuando el posicionamiento está activado para un elemento, la posición del elemento se puede establecer mediante desplazamiento.
izquierda
La distancia a la izquierda del elemento desde la posición de posicionamiento.
arriba
La distancia desde la parte superior del elemento hasta la posición de posicionamiento.
bien
La distancia a la derecha del elemento desde la posición de posicionamiento.
abajo
La distancia inferior del elemento desde la posición de posicionamiento.
Normalmente, sólo se utilizan dos valores para definir la posición de un elemento.
curso introductorio
arquitectura de software
C/S, cliente/servidor
1. Generalmente, el software que utilizamos es de arquitectura C/S.
2. Por ejemplo, software en el sistema QQ, 360, office, XMind
3.C representa al cliente. Los usuarios utilizan el software a través del cliente.
4.S representa el servidor, que es responsable de procesar la lógica empresarial del software.
Características
1. El software debe instalarse antes de su uso.
2. Cuando se actualiza el software, el servidor y el cliente deben actualizarse al mismo tiempo.
3.El software de arquitectura C/S no se puede utilizar en todas las plataformas
4. El cliente y el servidor del software de arquitectura C/S se comunican utilizando sus propios protocolos, lo cual es relativamente seguro.
B/S, navegador/servidor
1.B/S es esencialmente C/S, pero el software de arquitectura B/S utiliza el navegador como cliente del software.
2. El software de arquitectura B/S utiliza el software mediante un navegador para acceder a la página web.
3. Por ejemplo: JD.com Taobao 12306 Zhihu Sina Weibo
Características
1. No es necesario instalar el software, simplemente use el navegador para acceder a la URL especificada.
2. Cuando se actualiza el software, no es necesario actualizar el cliente.
3. El software puede ser multiplataforma y puede utilizarse siempre que haya un navegador en el sistema.
4. El software de arquitectura B/S utiliza el protocolo HTTP común para la comunicación entre el cliente y el servidor, que es relativamente inseguro.
base
El sistema decimal consiste en sumar uno al número completo.
binario
0 1
10 11 100 101 110 111
decimal
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14. . .
hexadecimal
Introduce 1 si tienes más de 16 años
0 1 2 3 4 5 6. . . 9 a b c d e f
10 11 12... 19 1a 1b 1c 1d 1e 1f
Dado que el hexadecimal está lleno de 16, se deben configurar varios caracteres especiales para representar 10 11 12 13 14 15
Utilice a b c d e f para representar 10 11 12 13 14 15 respectivamente
octal
Ingrese 1 si es 8 o más
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Problema de código confuso
Razones de los caracteres confusos
La computadora es una máquina muy estúpida. Sólo sabe dos cosas 0 1.
Cualquier contenido guardado en la computadora eventualmente deberá convertirse a una codificación binaria de 0 1 para poder guardarse, incluido el contenido de las páginas web.
Por ejemplo: Es posible que sea necesario convertir China, en la parte inferior de la computadora, a 1010001001010101011010.
Al leer contenido, debe codificar el binario y convertirlo al contenido correcto.
codificación
El proceso de convertir caracteres a codificación binaria de acuerdo con ciertas reglas.
descodificación
El proceso de convertir la codificación binaria en caracteres de acuerdo con ciertas reglas.
conjunto de caracteres
Las reglas utilizadas para codificar y decodificar se denominan conjuntos de caracteres.
Conjuntos de caracteres comunes
ASCII
ISO-8859-1
GBK
GB2312
Codificación predeterminada para sistemas chinos
UTF-8
Código Universal, soporta todos los textos de la tierra.
ANSI
Guarda automáticamente archivos en la codificación predeterminada del sistema.
La causa principal de los caracteres confusos es que la codificación y la decodificación utilizan diferentes conjuntos de caracteres.
En los navegadores del sistema chino, GB2312 se utiliza para decodificar de forma predeterminada.
modelo de caja
CSS establece cada elemento en un cuadro rectangular
Configure todos los elementos como cuadros para facilitar el diseño de la página.
Cuando todos estos elementos son cuadros, nuestro diseño se convierte en colocar cuadros en la página.
modelo de caja
Cada caja se compone de las siguientes partes
área de contenido
El área de contenido equivale al espacio donde la caja guarda cosas.
El área de contenido está en la parte más interna del cuadro.
Todos los elementos secundarios de un elemento se colocan en el área de contenido del elemento principal.
Configuración del área de contenido
ancho
ancho del área de contenido
altura
altura del área de contenido
relleno
El relleno se refiere a la distancia entre el área de contenido y el borde. El relleno afecta el tamaño del cuadro.
Hay cuatro direcciones de relleno en el cuadro.
acolchado superior
relleno-derecha
fondo acolchado
relleno-izquierda
relleno
Se puede configurar el relleno en cuatro direcciones al mismo tiempo y las reglas son consistentes con el ancho del borde.
relleno: arriba derecha abajo izquierda
relleno: arriba, izquierda, derecha, abajo
relleno: arriba, abajo, izquierda y derecha
relleno: arriba, abajo, izquierda, derecha
El tamaño del cuadro visible está determinado por el área de contenido, el relleno y los bordes.
marco
El lado más exterior del cuadro visible es el cuadro de borde y el borde es el borde del cuadro.
Establecer fronteras
Establecer el borde requiere establecer tres estilos al mismo tiempo, y uno de ellos es indispensable.
ancho del borde
ancho del borde
Puede especificar el ancho de los cuatro bordes al mismo tiempo o por separado.
regla
cuatro valores
ancho del borde: 10px 20px 30px 40px;
ancho de borde: arriba a la derecha, abajo a la izquierda;
tres valores
ancho de borde: 10px 20px 30px;
ancho de borde: superior, izquierdo e inferior;
dos valores
ancho de borde: 10px 20px;
ancho de borde: arriba, abajo, izquierda y derecha;
un valor
ancho de borde: 10px;
ancho de borde: arriba, abajo, izquierda y derecha;
color del borde
color del borde
estilo de borde
Estilo de borde
Además de estos tres estilos, CSS también proporciona
borde-xxx-ancho
borde-xxx-color
estilo-borde-xxx
xxx puede ser
arriba
bien
abajo
izquierda
Estos estilos le permiten especificar el color, el ancho y el estilo de los cuatro lados individualmente.
Propiedad taquigráfica para frontera
borde
frontera-izquierda
borde superior
frontera-derecha
borde inferior
Estos atributos pueden establecer estilos relacionados con los bordes al mismo tiempo.
El borde puede establecer el color, el ancho y el estilo de cuatro lados al mismo tiempo.
border-xxx puede establecer un cierto borde por separado
regla
Con estos estilos, puede establecer el ancho del borde, el estilo del borde, el color del borde al mismo tiempo. Los diferentes atributos están separados por espacios y no hay ningún requisito de orden.
márgenes
La distancia entre el cuadro de margen y otros cuadros. El margen no afectará el tamaño del cuadro visible, pero afectará la posición del cuadro.
También tiene márgenes en cuatro direcciones.
margen superior
margen derecho
margen inferior
margen izquierdo
atributo taquigráfico
margen
Las reglas son las mismas que las del relleno.
valor del margen
Se puede configurar en automático
Si configura los márgenes izquierdo y derecho individualmente en automático, establecerá los márgenes izquierdo o derecho en su valor máximo
Si los márgenes izquierdo y derecho están configurados en automático, los márgenes izquierdo y derecho se establecerán en el mismo valor, centrando así un elemento secundario horizontalmente dentro de su elemento principal.
margen: 0 automático
Se puede establecer en valores negativos.
Si el margen se establece en un valor negativo, el elemento se mueve en la dirección opuesta
superposición de márgenes
Los márgenes verticales adyacentes se superponen
Los márgenes de los elementos adyacentes tomarán el valor máximo.
Los márgenes del elemento hijo se pasarán al elemento padre.
Los márgenes horizontales no se superponen, sino que se suman.
Modelo de caja para elementos en línea.
ancho
altura
no apoyo
relleno
Soporte acolchado horizontal
También se admite el relleno vertical, pero no afectará el diseño.
borde
Admite bordes en cuatro direcciones, pero los bordes verticales no afectarán el diseño
margen
Admite márgenes horizontales
No admite orientación vertical
Estilos relacionados con el modelo de caja
mostrar
Establecer el tipo de visualización de un elemento
Valor opcional
ninguno
El elemento no se mostrará en la página y no ocupará la posición de la página.
bloquear
El elemento aparecerá como un elemento de bloque.
en línea
El elemento aparecerá como un elemento en línea.
bloque en línea
El elemento aparecerá como un elemento de bloque en línea.
Incluye elementos en línea y en bloque.
No ocupar una línea
Puede establecer ancho y alto
visibilidad
Establecer si el elemento se muestra en la página
Valor opcional
visible
Valor predeterminado, el elemento se muestra normalmente en la página.
oculto
El elemento no se muestra en la página, pero aún ocupa una posición en la página.
Desbordamiento
Establecer cómo un elemento maneja el contenido desbordado
Valor opcional
visible
Valor predeterminado, el contenido desbordado no se procesará ni se mostrará fuera del elemento principal.
oculto
El contenido desbordado se ocultará y no se mostrará.
Desplazarse
Agregue barras de desplazamiento horizontales y verticales al elemento principal
Se agregarán barras de desplazamiento independientemente de si el contenido se desborda.
auto
Generar automáticamente barras de desplazamiento según sea necesario
flujo de documentos
El flujo de documentos se refiere a una ubicación en una página web.
El flujo de documentos es la base de una página web y la capa más baja de una página web. Todos los elementos están organizados en el flujo de documentos de forma predeterminada.
Los elementos se organizan de izquierda a derecha y de arriba a abajo en el flujo del documento de forma predeterminada (de acuerdo con nuestros hábitos de escritura).
elemento de bloque
1. Los elementos del bloque están dispuestos de arriba a abajo en el flujo de documentos.
2. El ancho de un elemento de bloque en el flujo de documentos es el 100% del elemento principal de forma predeterminada.
3. La altura del elemento de bloque en el flujo de documentos se amplía según el contenido de forma predeterminada.
elementos en línea
1. Los elementos en línea se organizan de izquierda a derecha en el flujo del documento. Si una línea no es suficiente para acomodar todos los elementos en línea, cambie a la siguiente línea y continúe organizándose de izquierda a derecha.
2. En el flujo del documento, el ancho y el alto de los elementos en línea se amplían según el contenido de forma predeterminada.