Wondershare EdrawMind
EdrawMindPrograma de treinamento do curso básico de HTML front-end CSS
Galeria de mapas mentais Programa de treinamento do curso básico de HTML front-end CSS
- 1
Programa de treinamento do curso básico de HTML front-end CSS
Programa de treinamento do curso básico de HTML front-end CSS, uma página da web tem três partes, a estrutura é a estrutura geral da página, onde está o título, onde está o parágrafo, onde está a imagem, a estrutura é escrita em HTML, e o desempenho é o estilo externo da página, como fonte, tamanho da fonte, cor da fonte, plano de fundo.
Editado em 2022-11-08 10:53:34- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
Programa de treinamento do curso básico de HTML front-end CSS
- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
- Recomendado para você
- Descrição
Programa de treinamento do curso básico de HTML front-end CSS
CSS
CSS é chamado de Cascading Style Sheets e é usado para estilizar elementos na página. Cor de fundo, cor da fonte, tamanho da fonte. . .
CSS é responsável pelo desempenho em estrutura, apresentação e comportamento.
localização escrita
1. Estilos embutidos
Escreva o estilo no atributo style da tag
Este estilo só funcionará na tag atual e não pode ser reutilizado. É inconveniente para manutenção posterior e não é recomendado.
2. Folha de estilo interna
Escreva a folha de estilo na tag de estilo no cabeçalho
Use folhas de estilo internas para separar ainda mais o desempenho e a estrutura. Você pode definir estilos para vários elementos ao mesmo tempo para facilitar a manutenção posterior.
3. Folhas de estilo externas
Escreva a folha de estilo em um arquivo CSS externo e, em seguida, introduza o arquivo externo por meio da tag do link
Escreva os estilos em uma folha de estilos externa Você pode usar a mesma folha de estilos em páginas diferentes, separando completamente o desempenho e a estrutura, o que facilita a manutenção posterior.
gramática básica
Seletor
Use seletores para selecionar um grupo de elementos na página e depois definir estilos para eles
seletor de elemento
Selecione o elemento especificado na página com base no nome da tag
Sintaxe: nome da tag { }
exemplo:
div{}
p{}
h1{}
seletor de identificação
Selecione um elemento exclusivo com base no valor do atributo id
Sintaxe: #id{}
exemplo:
#caixa1{}
#olá{}
seletor de classe
Selecione um grupo de elementos com base no valor do atributo de classe do elemento
Sintaxe: .class{}
exemplo:
.olá{}
.caixa{}
seletor curinga
Selecione todos os elementos da página
gramática:*{}
O desempenho dos seletores curinga é relativamente ruim, portanto evite usá-los.
Seletor de união
Elementos que correspondem a vários seletores podem ser selecionados ao mesmo tempo
Sintaxe: seletor 1, seletor 2, seletor N{}
exemplo:
div,p,#box,.hello{}
Seletor de interseção
Elementos que atendem a múltiplas condições podem ser selecionados
Sintaxe: Seletor 1 Seletor 2 Seletor N{}
Exemplo: p.hello{}
Seletor de elemento descendente
Seleciona os elementos descendentes especificados do elemento especificado
Sintaxe: Elemento ancestral Elemento descendente {}
exemplo:
div intervalo {}
divp{}
Seletor de elemento filho
Selecione o elemento filho especificado do elemento especificado
Sintaxe: elemento pai > elemento filho {}
exemplo:
div > intervalo {}
div >p{}
bloco de declaração
O bloco de declaração é na verdade uma declaração CSS
declaração
Cada declaração CSS é um estilo, que na verdade é uma estrutura de pares nome-valor.
Uso: ligação entre nome e valor
:O lado esquerdo é o nome do estilo
:O lado direito é o valor do estilo
Cada declaração termina com;
exemplo
cor vermelha;
tamanho da fonte: 20px;
relação entre elementos
elemento pai
Um elemento que contém diretamente elementos filhos é chamado de elemento pai.
elemento filho
Os elementos contidos diretamente por um elemento pai são chamados de elementos filhos.
Elementos ancestrais
Os elementos que contêm direta ou indiretamente elementos descendentes são chamados de elementos ancestrais, e o elemento pai também é um elemento ancestral.
Elementos descendentes
Os elementos que estão direta ou indiretamente contidos nos elementos ancestrais são chamados de elementos descendentes, e os elementos filhos também são elementos descendentes.
elemento irmão
Elementos que possuem o mesmo elemento pai são chamados de irmãos.
Elementos de bloco e elementos embutidos
elemento de bloco
Um elemento de bloco ocupa sua própria linha na página, independentemente do seu conteúdo.
Geralmente use elementos de bloco para fazer o layout da página
Elementos de bloco comuns
divisão
p
h1~h6
elementos embutidos
Os elementos embutidos ocupam apenas seu próprio tamanho e não ocupam uma única linha.
Elementos embutidos também são chamados de elementos embutidos (inline)
Geralmente, os elementos embutidos são usados para definir efeitos para o texto.
Em linha comum
período
a
imagem
Regras do pacote
Geralmente, os elementos de bloco são usados para agrupar elementos embutidos, mas os elementos embutidos não são usados para agrupar elementos de bloco.
O elemento a pode conter qualquer elemento, exceto o próprio
O elemento p não pode conter nenhum elemento de bloco
Pseudoclasses e pseudoelementos
Pseudoclasses e pseudoelementos são usados para representar um estado especial ou uma posição especial do elemento.
:link
Representa um link normal (link não visitado)
:visitado
Representa links visitados
:flutuar
Os links para os quais o mouse se move também podem ser configurados para passar o mouse sobre outros elementos.
:ativo
O link clicado também pode ser ativado para outros elementos.
:foco
Indica o estado do elemento que recebe o foco, geralmente utilizado em caixas de texto.
::seleção
Indica que o conteúdo está selecionado
No Firefox, use ::-moz-selection
:primeira carta
Representa o primeiro caractere
:primeira linha
Representa a primeira linha do texto
:antes
Selecione a frente do elemento
Geralmente, essa pseudoclasse é usada em conjunto com o conteúdo, por meio do qual o conteúdo pode ser adicionado ao local especificado.
:depois
Selecione a última aresta do elemento
Geralmente, essa pseudoclasse é usada em conjunto com o conteúdo, por meio do qual o conteúdo pode ser adicionado ao local especificado.
seletor de atributos
Selecione o elemento especificado com base em seus atributos
[Nome do Atributo]
Selecione elementos com atributos especificados
[nome do atributo = "valor do atributo"]
Selecione elementos cujo valor do atributo seja igual ao valor especificado
[Nome do atributo^="Valor do atributo"]
Selecione elementos cujo valor de atributo comece com o conteúdo especificado
[Nome do atributo$="Valor do atributo"]
Selecione elementos cujo valor do atributo termina com o conteúdo especificado
[Nome do atributo*="Valor do atributo"]
Selecione elementos cujo valor de atributo contém o conteúdo especificado
Seletor de elemento irmão
Selecione o próximo elemento irmão
Anterior Próximo
Selecione todos os seguintes elementos irmãos
Anterior ~ Todos os seguintes
Pseudo classe para elementos filhos
:primeiro filho
Encontre o primeiro elemento filho do elemento pai e classifique entre todos os elementos filhos
:último filho
Encontre o último elemento filho do elemento pai e classifique entre todos os elementos filhos
:nº-filho
Encontre o elemento filho na posição especificada no elemento pai e classifique entre todos os elementos filhos
exemplo
p:nésimo-filho(3)
Você pode usar par para encontrar elementos filhos pares
Você pode usar estranho para encontrar elementos filhos ímpares
: primeiro do tipo
Encontra o primeiro elemento filho do tipo especificado
:último do tipo
Encontra o último elemento filho do tipo especificado
: enésimo-do-tipo
Encontra o elemento filho especificado do tipo especificado
negar pseudo-classe
Elimine elementos que atendam aos requisitos de um conjunto de elementos
gramática:
:não (seletor)
exemplo:
.abc:não(div)
Herança de estilo
A definição de estilos para um elemento ancestral também será aplicada aos seus elementos descendentes. Esse recurso é chamado de herança de estilo.
Através da herança de estilo, alguns estilos podem ser definidos uniformemente para elementos ancestrais, de modo que todos os descendentes terão o mesmo estilo aplicado a eles.
Mas nem todos os estilos serão herdados, como: relacionado ao fundo, relacionado à borda, relacionado ao posicionamento. Documentos de referência específicos
prioridade do seletor
Ao usar seletores para estilizar elementos, se os estilos entrarem em conflito, a prioridade do seletor determinará qual estilo será usado.
prioridade
estilos embutidos
1000
seletor de identificação
100
Seletores de classe e pseudoclasse
10
seletor de elemento
1
seletor curinga
0
Estilos herdados
sem prioridade
Quando os estilos entram em conflito, as prioridades do seletor relacionadas precisam ser somadas e calculadas. O estilo com maior prioridade será exibido primeiro.
Ao calcular as prioridades, o tamanho total não pode exceder a sua ordem máxima de grandeza.
Você pode adicionar um !important após o estilo. Se este conteúdo for adicionado ao estilo, o estilo terá a prioridade mais alta e será exibido antes de todos os estilos, incluindo estilos embutidos.
Desempenho do seletor
Quando o navegador analisa um grupo de seletores, ele os analisa um por um, de trás para frente.
Se o seletor for muito longo, o desempenho de análise do navegador será ruim, portanto, ao escrever o seletor, quanto mais curto, melhor.
*Os seletores curinga têm desempenho ruim. Evite usar seletores curinga.
unidade
unidade de comprimento
pixels
Pixel, pixel é a menor unidade que compõe uma imagem. Nossa tela é composta de pixels um por um.
Um pixel refere-se a um pixel
Em telas diferentes, o tamanho de um pixel é diferente. Quanto mais nítida for a tela, menores serão os pixels.
%
Você pode definir o valor do estilo de um elemento como um valor percentual, para que o navegador calcule o valor correspondente com base no valor do elemento pai.
Quando o valor do elemento pai muda, o valor do elemento filho muda junto de acordo com uma certa proporção, que é frequentemente usada em páginas adaptáveis.
eles
em será calculado em relação ao tamanho da fonte do elemento atual
1em = 1 tamanho da fonte
em é frequentemente usado para definir alguns estilos relacionados ao texto, porque quando o tamanho do texto muda, em mudará de acordo.
unidade de cor
palavras coloridas
Use palavras em inglês diretamente para representar cores
vermelho verde azul laranja
Valor RGB
O chamado valor RGB consiste em combinar várias cores por meio de diferentes combinações das três cores primárias: vermelho, verde e azul.
gramática:
RGB (vermelho, verde, azul)
Esses três valores requerem um valor entre 0-255
0 significa nenhum
255 representa o máximo
rgb(50.200,30)
Você também pode usar porcentagens para definir valores RGB, que exigem um valor entre 0% e 100%.
A porcentagem é eventualmente convertida para 0-255
0% é equivalente a 0
100% equivale a 255
rgb(100%,0%,0%)
Valor RGB hexadecimal
É também uma forma de expressar valores RGB. A diferença é que utiliza números hexadecimais em vez de decimais.
gramática:
#vermelhoverdeazul
A cor aqui precisa de um valor entre 00-ff
exemplo:
#ff0000
Se a cor se repetir duas a duas, ela poderá ser abreviada.
Por exemplo, #aabbcc pode ser escrito como #abc
Por exemplo #bbffaa pode ser escrito como #bfa
estilo de texto
Fonte
cor
cor da fonte
tamanho da fonte
tamanho da fonte
O tamanho da fonte padrão no navegador é geralmente 16px e, quando desenvolvemos, geralmente é unificado para 12px.
família de fontes
Definir fonte do texto
estilo de fonte
Definir itálico
espessura da fonte
Definir negrito do texto
variante de fonte
versaletes
Fonte
propriedade de abreviação do texto
Todos os estilos relacionados à fonte podem ser definidos ao mesmo tempo
gramática:
fonte: [negrito itálico letras minúsculas] tamanho [/altura da linha] fonte
Negrito, itálico, letras minúsculas e grandes, a ordem não importa, você pode escrever ou não, caso contrário, use o valor padrão
O tamanho do texto e a fonte devem ser escritos, e o tamanho deve ser o penúltimo e a fonte deve ser a última
Após o tamanho, você pode definir a altura da linha, que pode ser escrita ou não, será usado o valor padrão.
estilo de texto
altura da linha
altura da linha
Por padrão, o texto é centralizado verticalmente no centro superior da linha.
A altura da linha pode ser modificada através da altura da linha
Espaçamento entre linhas = altura da linha - tamanho da fonte
transformação de texto
Definir caixa de texto
decoração de texto
Definir decoração de texto
alinhamento de texto
Definir alinhamento de texto
recuo de texto
Definir recuo da primeira linha
Requer uma unidade de comprimento. Se for um valor positivo, a primeira linha se moverá para a direita.
espaçamento entre letras
espaçamento entre caracteres
espaçamento entre palavras
espaçamento entre palavras
fundo
cor de fundo
cor de fundo
imagem de fundo
Imagem de fundo
Um endereço de URL é obrigatório como parâmetro
Exemplo: background-image:url (caminho para a imagem)
fundo de repetição
Definir modo de repetição de imagem de fundo
Valores opcionais:
repita
Por padrão, a imagem de fundo será exibida lado a lado
Repita em ambas as direções ao longo do eixo x e do eixo y
sem repetição
A imagem de fundo não se repete
repetir-x
A imagem de fundo se repete horizontalmente
repetir
A imagem de fundo se repete verticalmente
posição de fundo
Defina a posição da imagem de fundo
Método de configuração um
Você pode definir diretamente a posição da imagem por meio de várias palavras-chave de posição
principal
esquerda
certo
fundo
Centro
Você pode definir a imagem de fundo para qualquer posição do elemento combinando as palavras-chave acima em pares.
Se apenas um valor for especificado, o segundo valor será padronizado como centralizado
Método de configuração dois
Você pode especificar diretamente dois valores para definir o deslocamento da imagem de fundo.
exemplo:
posição de fundo: deslocamento do eixo x deslocamento do eixo y;
deslocamento do eixo x, usado para especificar a posição horizontal da imagem
Se você especificar um valor positivo, a imagem se moverá para a direita
Se você especificar um valor negativo, a imagem se moverá para a esquerda
Deslocamento do eixo Y, usado para especificar a posição vertical da imagem
Se você especificar um valor positivo, a imagem se moverá para baixo
Se você especificar um valor negativo, a imagem se moverá para cima
anexo de fundo
Usado para definir se o plano de fundo rola com a página
Valor opcional
rolagem
Por padrão, a imagem de fundo irá rolar com a página
fixo
A imagem de fundo não rola com a página e será fixada na posição especificada na página.
Se você definir o plano de fundo desta propriedade, o plano de fundo sempre será posicionado em relação à janela do navegador.
Geralmente este fundo será definido para o corpo
fundo
Atributo abreviado para plano de fundo
Você pode usá-lo para definir todos os estilos relacionados ao plano de fundo
Não há exigência de pedido ou quantidade para este atributo abreviado. O valor padrão é usado para atributos que não são gravados.
opacidade
Usado para definir a opacidade do fundo
Valor opcional
0-1
0 significa completamente transparente
1 significa completamente opaco
0,5 translúcido
Os navegadores IE8 e anteriores não suportam este estilo.
filtro:alfa(opacidade=valor)
O valor aqui requer um valor entre 0-100
0 é equivalente a transparência total
100 completamente opaco
HTML
A estrutura da página web
Uma página da web consiste em três partes
estrutura
Estrutura é a estrutura geral da página, onde está o título, onde está o parágrafo, onde está a imagem
A estrutura é escrita em HTML
Desempenho
Desempenho é o estilo externo da página, como fonte, tamanho da fonte, cor da fonte e plano de fundo. . .
Use CSS para estilizar elementos em sua página
Comportamento
Interação entre página e usuário
Use JavaScript para definir o comportamento da página
Uma página da web bem projetada requer a separação entre estrutura, apresentação e comportamento.
No desenvolvimento sempre enfrentamos um problema, que é o acoplamento entre programas. A separação dos três é entender o acoplamento.
HTML, linguagem de marcação de hipertexto
Responsável pela estrutura da página e definição dos vários componentes da página
HTML é escrito na forma de texto simples e usa tags HTML para identificar diferentes partes da página.
Rótulo
aparecem em pares
etiqueta de fechamento automático
Atributos
Você pode definir o efeito do rótulo por meio de atributos
Os atributos precisam ser definidos na tag de abertura ou na tag de fechamento
As propriedades são na verdade um conjunto de pares nome-valor.
exemplo:
Estrutura básica da página HTML
Declaração de documentação
A versão HTML usada para identificar a página atual
Esta instrução é usada para informar ao navegador que a página atual foi escrita usando o padrão HTML5.
Tags comuns
A tag raiz da página da web
Existe apenas uma tag raiz em uma página
Todo o conteúdo da página da web precisa ser escrito dentro da tag html
Cabeçalho da página da web
O conteúdo desta tag não será exibido diretamente na página da web
Esta tag é usada para ajudar o navegador a analisar a página
subtag
Usado para definir o título da página da web
Por padrão, ele será exibido na barra de título do navegador
Quando um mecanismo de busca recupera uma página da web, ele recupera principalmente o conteúdo do título, o que afetará a classificação da página no mecanismo de busca.
Usado para definir metadados de páginas da web, como o conjunto de caracteres usado pelas páginas da web
Defina palavras-chave para páginas da web
Defina a descrição da página da web
Redirecionamento solicitado
O corpo da página da web
Todas as partes visíveis da página da web precisam ser escritas no corpo
~
etiqueta de título
Existem seis níveis de títulos em HTML
Entre os títulos de seis níveis, h1 é o mais importante e h6 é o menos importante. Apenas h1~h3 são usados em páginas gerais.
A importância de h1 perde apenas para o título. O navegador também pesquisará principalmente o conteúdo em h1 para determinar o conteúdo principal da página.
Geralmente, apenas um h1 pode ser escrito em uma página.
tags de parágrafo
etiqueta de nova linha
rótulo de linha horizontal
iframe
Pode introduzir outras páginas externas em uma página
Atributos
fonte
O endereço da página externa, você pode usar caminhos relativos
largura e altura
Você pode definir a largura e a altura do quadro
nome
Um quadro embutido pode receber um nome
Este valor de atributo pode ser definido como o valor do atributo de destino do hiperlink
Desta forma, quando o hiperlink for clicado, a página será aberta no quadro embutido correspondente
O conteúdo em frames embutidos não será recuperado pelos mecanismos de busca, portanto, tente não usar frames embutidos durante o desenvolvimento.
Hiperlink
Pode fazer a página atual pular para outras páginas
<a>Texto do link</a>
Atributos
href
Aponta para o endereço de destino do salto do link, que pode ser um caminho relativo
Também pode ser o valor do atributo #id, de modo que quando o hiperlink for clicado, ele saltará para o local especificado na página atual.
Você pode usar mailto: para criar um hiperlink que envia um email
alvo
Especifique a janela na qual o link deve ser aberto
Valor opcional
_auto
Valor padrão, o link será aberto na janela atual por padrão
_em branco
Abrir link em nova janela
O valor do atributo name de um quadro embutido
Abre o link no iframe especificado
Comente
gramática
O conteúdo dos comentários não será exibido na página, mas será exibido no código-fonte. Podemos usar comentários para explicar o código da página web.
Você também pode ocultar algum conteúdo que não deseja exibir na página por meio de comentários.
entidade
Alguns símbolos especiais não podem ser usados diretamente em páginas HTML e entidades precisam ser usadas para substituir esses símbolos especiais.
As entidades também podem ser chamadas de caracteres de escape
sintaxe da entidade
&nome da entidade;
Entidades comumente usadas
espaço
<
>
>
Símbolo de direitos autorais
©
Tags de imagem
<img/>
Use a tag de imagem para introduzir uma imagem externa na página
Atributos
fonte
Caminho apontando para uma imagem externa, você pode usar caminhos relativos
alternativo
Especifique uma descrição para a imagem se ela não puder ser carregada
Os motores de busca utilizam este atributo principalmente para identificar o conteúdo da imagem.
Se este atributo não for escrito, o mecanismo de busca incluirá a imagem.
largura
Defina a largura da imagem
altura
Defina a altura da imagem
Formato de imagem
JPEG
Imagens coloridas, por ex.
GIFs
Cor única, imagens transparentes simples, gráficos dinâmicos
png
Imagens coloridas, complexas e transparentes
Princípios de seleção de imagens
O efeito é consistente, use pequenos
O efeito é inconsistente, use-o com melhor efeito
caminho relativo
Um caminho relativo ao diretório onde o recurso atual está localizado
Você pode usar ../ para retornar ao diretório de primeiro nível, e para retornar a vários níveis, usar vários ../
Especificação de sintaxe xHtml
1.HTML não diferencia maiúsculas de minúsculas, mas tente usar letras minúsculas
2. Comentários HTML não podem ser aninhados
3. O rótulo deve ter uma estrutura completa
Apareça em pares
ou tag de fechamento automático
4. As tags podem ser aninhadas, mas não podem ser aninhadas cruzadamente.
5. O atributo deve ter um valor e o valor deve ser colocado entre aspas simples e duplas.
rótulo de texto
expressar ênfase no tom
Indica a importância do conteúdo
significa itálico simples
significa simplesmente ousado
Indica conteúdo como detalhes
Para indicar conteúdo de referência, cite pode ser usado para qualquer coisa com título de livro.
citação curta, citação inline
referência longa, referência em nível de bloco
sobrescrito
subscrito
Conteúdo excluído
Conteúdo inserido
Tags pré-formatadas podem preservar a formatação de espaços e quebras de linha no código
representa o código do programa
lista
lista não ordenada
Use ul para criar uma lista não ordenada e use li para representar um item da lista.
Lista não ordenada usando símbolos como marcadores
lista ordenada
Use ol para criar uma lista não ordenada e use li para representar um item da lista.
Use números sequenciais como marcadores
lista de definições
Os elementos relacionados à lista são todos elementos de bloco e podem ser aninhados uns nos outros.
Remover marcadores
estilo de lista: nenhum
layout
flutuador
Use float para definir elementos para flutuar
Valor opcional
nenhum
Valor padrão, sem flutuação, elemento no fluxo de documentos
esquerda
Elemento flutua para a esquerda
certo
Elemento flutua para a direita
Características
1. Após o elemento flutuar, ele se separará completamente do fluxo do documento.
2. Após flutuar, o elemento sempre se moverá para o topo do elemento pai.
3. Ele irá parar de se mover até encontrar a borda do elemento pai ou outros elementos flutuantes.
4. Se o elemento flutuante estiver acima de um elemento de bloco, o elemento flutuante não cobrirá o elemento de bloco.
5. O elemento flutuante não excederá o elemento irmão flutuante acima dele e pode ser alinhado no máximo em um lado.
6. Os elementos flutuantes não cobrirão o texto. O texto será automaticamente contornado em torno dos elementos flutuantes. Você pode obter o efeito de quebra de texto flutuando.
Características dos elementos após flutuação
Quando um elemento flutua, ele é completamente removido do fluxo de documentos.
elemento de bloco
Depois que o elemento de bloco sai do fluxo do documento
1. Não ocupará fila
2. Tanto a largura quanto a altura são ampliadas pelo conteúdo
elementos embutidos
Os elementos embutidos tornam-se elementos de bloco após saírem do fluxo de documentos.
altamente desmoronado
A altura do elemento pai no fluxo de documentos é expandida pelos elementos filhos por padrão. Quando o elemento filho se separa do fluxo de documentos, ele não será capaz de suportar a altura do elemento pai, o que causará a altura de. o elemento pai será recolhido.
Assim que a altura do elemento pai diminuir, as posições de todos os elementos se moverão para cima, fazendo com que o layout de toda a página fique caótico.
método um
Ative o BFC ou hasLayout do elemento pai
BFC
Contexto de formatação de bloco
ambiente de formatação em nível de bloco
BFC é um atributo implícito do elemento e está desativado por padrão.
O BFC pode ser ativado através de alguns estilos especiais
Após ativar o BFC, os elementos terão as seguintes características:
1. As margens verticais do elemento pai não se sobreporão aos elementos filhos.
2. Elementos com BFC ativado não serão cobertos por elementos flutuantes.
3. Elementos com BFC habilitado podem conter elementos filhos flutuantes.
Como habilitar o BFC
1. Defina o elemento como flutuante
2. Defina o posicionamento absoluto dos elementos
3. Defina o tipo de elemento como bloco embutido
4. Defina o overflow para um valor não padrão
Geralmente, overflow:hidden é usado para habilitar o BFC.
temLayout
Não há BFC no IE6, mas existe um hasLayout semelhante ao BFC
No IE6, você pode resolver o problema de queda de altura ativando o hasLayout.
A maneira mais fácil de abrir com efeitos colaterais mínimos
ampliar:1
Ao definir uma largura não padrão para um elemento, hasLayout será ativado automaticamente.
Método dois
Adicione um div em branco no final do elemento pai recolhido e, em seguida, limpe o div
Usar esta abordagem adiciona estrutura desnecessária à página
Método três
Use a pseudoclasse after para adicionar um elemento de bloco após o elemento pai e limpar seu float
O princípio deste método é o mesmo do método 2, mas não há necessidade de adicionar a estrutura correspondente à página.
posição
Através do posicionamento, os elementos da página podem ser colocados em qualquer lugar da página.
Use a posição para definir o posicionamento dos elementos
Valor opcional
estático
Valor padrão, o posicionamento do elemento não está habilitado
relativo
Ative o posicionamento relativo dos elementos
absoluto
Ative o posicionamento absoluto dos elementos
fixo
Ative o posicionamento fixo de elementos
posicionamento relativo
1. Depois que o posicionamento relativo do elemento for ativado, o elemento não mudará de forma alguma se o deslocamento não for definido.
2. Elementos posicionados relativamente são posicionados em relação à sua própria posição no fluxo de documentos.
3. Elementos posicionados relativamente não se separarão do fluxo do documento
4. O posicionamento relativo não altera a natureza do elemento, seja ele um elemento de bloco ou um elemento de bloco, ou um elemento embutido ou um elemento embutido.
5. Elementos relativamente posicionados serão elevados a um nível superior
posicionamento absoluto
1. Após o elemento ser definido para posicionamento absoluto, se o deslocamento não for definido, a posição do elemento não será alterada.
2. Um elemento posicionado de forma absoluta é posicionado em relação ao seu elemento ancestral mais próximo que tem o posicionamento habilitado. Se todos os elementos ancestrais não tiverem o posicionamento habilitado, ele será posicionado em relação à janela do navegador.
3. Elementos absolutamente posicionados se separarão completamente do fluxo do documento.
4. O posicionamento absoluto mudará a natureza do elemento. Bloco variável inline, a altura e a largura do bloco são ampliadas pelo conteúdo e não ocupam uma linha exclusiva
5. O posicionamento absoluto elevará o elemento a um nível superior
Posicionamento fixo
O posicionamento fixo é um tipo especial de posicionamento absoluto. A maioria de suas características são iguais ao posicionamento absoluto.
A diferença é que os elementos posicionados fixamente são sempre posicionados em relação à janela do navegador. E não irá rolar com a barra de rolagem
IE6 não suporta posicionamento fixo
Hierarquia
Elementos posicionados > Elementos flutuantes > Elementos no fluxo de documentos
Quando o posicionamento está ativado para um elemento, o nível do elemento pode ser definido por meio do índice z.
Quanto maior o valor do índice z, mais elementos prioritários serão exibidos.
Se os valores do índice z forem iguais ou não houver índice z, o elemento inferior será exibido primeiro.
Os elementos pais nunca cobrem os elementos filhos
Desvio
Quando o posicionamento está ativado para um elemento, a posição do elemento pode ser definida por deslocamento.
esquerda
A distância à esquerda do elemento a partir da posição de posicionamento
principal
A distância do topo do elemento até a posição de posicionamento
certo
A distância à direita do elemento a partir da posição de posicionamento
fundo
A distância inferior do elemento da posição de posicionamento
Normalmente, apenas dois valores são usados para definir a posição de um elemento.
Introdução ao curso
arquitetura de software
C/S, cliente/servidor
1. Geralmente, o software que usamos é arquitetura C/S
2. Por exemplo, software no sistema QQ, 360, office, XMind
3.C representa o cliente. Os usuários usam o software por meio do cliente.
4.S representa o servidor, responsável por processar a lógica de negócio do software.
Características
1. O software deve ser instalado antes do uso
2. Quando o software é atualizado, o servidor e o cliente devem ser atualizados ao mesmo tempo.
3. O software de arquitetura C/S não pode ser usado em várias plataformas
4. O cliente e o servidor do software de arquitetura C/S se comunicam usando seus próprios protocolos, o que é relativamente seguro.
B/S, navegador/servidor
1.B/S é essencialmente C/S, mas o software de arquitetura B/S usa o navegador como cliente do software.
2. O software de arquitetura B/S usa o software usando um navegador para acessar a página da web.
3. Por exemplo: JD.com Taobao 12306 Zhihu Sina Weibo
Características
1. O software não precisa ser instalado, basta usar o navegador para acessar a URL especificada.
2. Quando o software é atualizado, o cliente não precisa ser atualizado.
3. O software pode ser multiplataforma e pode ser usado desde que haja um navegador no sistema.
4. O software de arquitetura B/S usa o protocolo HTTP comum para comunicação entre o cliente e o servidor, o que é relativamente inseguro.
base
O sistema decimal consiste em adicionar um ao número completo.
binário
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
Digite 1 se você tiver mais de 16 anos
0 1 2 3 4 5 6. . . 9 a b c d e f
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
Como hexadecimal é composto por 16, vários caracteres especiais devem ser definidos para representar 10 11 12 13 14 15
Use a b c d e f para representar 10 11 12 13 14 15 respectivamente
octal
Digite 1 se 8 ou mais
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Problema de código ilegível
Razões para caracteres ilegíveis
O computador é uma máquina muito estúpida. Ele só sabe duas coisas 0 1.
Qualquer conteúdo salvo no computador precisará eventualmente ser convertido em uma codificação binária de 0 1 para ser salvo, incluindo conteúdo em páginas da web.
Por exemplo: China, na parte inferior do computador, pode precisar ser convertido para 1010001001010101011010
Ao ler o conteúdo, você precisa codificar o binário e convertê-lo no conteúdo correto.
codificação
O processo de conversão de caracteres em codificação binária de acordo com certas regras
decodificação
O processo de conversão de codificação binária em caracteres de acordo com certas regras
conjunto de caracteres
As regras usadas para codificação e decodificação são chamadas de conjuntos de caracteres
Conjuntos de caracteres comuns
ASCII
ISO-8859-1
GBK
GB2312
Codificação padrão para sistemas chineses
UTF-8
Código Universal, suporta todos os textos da terra
ANSI
Salve arquivos automaticamente na codificação padrão do sistema
A causa raiz dos caracteres ilegíveis é que a codificação e a decodificação usam conjuntos de caracteres diferentes.
Nos navegadores de sistema chineses, GB2312 é usado para decodificação por padrão.
modelo de caixa
CSS define cada elemento como uma caixa retangular
Defina todos os elementos como caixas para facilitar o layout da página
Quando todos esses elementos são caixas, nosso layout passa a colocar caixas na página.
modelo de caixa
Cada caixa é composta pelas seguintes partes
área de conteudo
A área de conteúdo equivale ao espaço onde a caixa armazena as coisas
A área de conteúdo está na parte mais interna da caixa
Todos os elementos filhos de um elemento são colocados na área de conteúdo do elemento pai
Configurações da área de conteúdo
largura
Largura da área de conteúdo
altura
altura da área de conteúdo
preenchimento
O preenchimento refere-se à distância entre a área de conteúdo e a borda. O preenchimento afeta o tamanho da caixa.
Existem quatro direções de preenchimento na caixa.
topo acolchoado
preenchimento à direita
fundo de preenchimento
preenchimento à esquerda
preenchimento
O preenchimento em quatro direções pode ser definido ao mesmo tempo e as regras são consistentes com a largura da borda.
preenchimento: canto superior direito inferior esquerdo
preenchimento: cima, esquerda, direita, baixo
preenchimento: para cima, para baixo, para a esquerda e para a direita
preenchimento: cima, baixo, esquerda, direita
O tamanho da caixa visível é determinado pela área de conteúdo, preenchimento e bordas.
quadro
O lado externo da caixa visível é a borda da caixa e a borda é a borda da caixa
Definir fronteiras
Definir a borda requer definir três estilos ao mesmo tempo, e um deles é indispensável.
largura da borda
largura da borda
Você pode especificar a largura das quatro bordas ao mesmo tempo ou separadamente.
regra
quatro valores
largura da borda: 10px 20px 30px 40px;
largura da borda: canto superior direito inferior esquerdo;
três valores
largura da borda: 10px 20px 30px;
largura da borda: superior, esquerda e inferior;
dois valores
largura da borda: 10px 20px;
largura da borda: para cima, para baixo, para a esquerda e para a direita;
um valor
largura da borda: 10px;
largura da borda: para cima, para baixo, para a esquerda e para a direita;
Cor da borda
Cor da borda
estilo de borda
Estilo de borda
Além desses três estilos, CSS também fornece
largura da borda xxx
borda-xxx-cor
estilo border-xxx
xxx pode ser
principal
certo
fundo
esquerda
Esses estilos permitem especificar a cor, a largura e o estilo dos quatro lados individualmente.
Propriedade abreviada para fronteira
fronteira
fronteira esquerda
borda superior
fronteira direita
borda inferior
Esses atributos podem definir estilos relacionados às bordas ao mesmo tempo.
a borda pode definir a cor, largura e estilo de quatro lados ao mesmo tempo
border-xxx pode definir uma certa borda separadamente
regra
Usando esses estilos, você pode definir a largura da borda, o estilo da borda e a cor da borda ao mesmo tempo. Diferentes atributos são separados por espaços e não há exigência de ordem.
margens
A distância entre a caixa de margem e outras caixas A margem não afetará o tamanho da caixa visível, mas afetará a posição da caixa.
Também tem margens em quatro direções
margem superior
margem direita
margem inferior
margem esquerda
Atributo abreviado
margem
As regras são as mesmas do preenchimento
valor da margem
Pode ser definido como automático
Se você definir as margens esquerda e direita individualmente como automáticas, as margens esquerda ou direita serão definidas para seu valor máximo
Se as margens esquerda e direita estiverem definidas como automáticas, as margens esquerda e direita serão definidas com um valor igual, centralizando assim um elemento filho horizontalmente dentro de seu elemento pai.
margem:0 automático
Pode ser definido para valores negativos
Se a margem for definida com um valor negativo, o elemento se move na direção oposta
sobreposição de margem
Sobreposição de margens verticais adjacentes
As margens dos elementos adjacentes terão o valor máximo
As margens do elemento filho serão passadas para o elemento pai
As margens horizontais não se sobrepõem, mas são somadas
Modelo de caixa para elementos embutidos
largura
altura
não suporta
preenchimento
Suporte para preenchimento horizontal
O preenchimento vertical também é suportado, mas não afetará o layout.
fronteira
Suporta bordas em quatro direções, mas bordas verticais não afetarão o layout
margem
Suporta margens horizontais
Não suporta orientação vertical
Estilos relacionados ao modelo de caixa
mostrar
Defina o tipo de exibição de um elemento
Valor opcional
nenhum
O elemento não será exibido na página e não ocupará a posição da página
bloquear
O elemento aparecerá como um elemento de bloco
em linha
O elemento aparecerá como um elemento embutido
bloco embutido
O elemento aparecerá como um elemento de bloco embutido
Apresenta elementos inline e de bloco
Não ocupe uma linha
Pode definir largura e altura
visibilidade
Defina se o elemento será exibido na página
Valor opcional
visível
Valor padrão, o elemento é exibido normalmente na página
escondido
O elemento não é exibido na página, mas ainda ocupa uma posição na página
transbordar
Definir como um elemento lida com conteúdo excedente
Valor opcional
visível
Valor padrão, o conteúdo excedente não será processado e exibido fora do elemento pai.
escondido
O conteúdo transbordante ficará oculto e não será exibido.
rolagem
Adicione barras de rolagem horizontais e verticais ao elemento pai
Barras de rolagem serão adicionadas independentemente de o conteúdo transbordar.
auto
Gere automaticamente barras de rolagem conforme necessário
fluxo de documentos
O fluxo de documentos refere-se a um local em uma página da web
O fluxo de documentos é a base de uma página da web e a camada mais baixa de uma página da web. Todos os elementos são organizados no fluxo de documentos por padrão.
Os elementos são organizados da esquerda para a direita e de cima para baixo no fluxo do documento por padrão (consistente com nossos hábitos de escrita)
elemento de bloco
1. Os elementos do bloco são organizados de cima para baixo no fluxo do documento.
2. A largura padrão de um elemento de bloco no fluxo de documentos é 100% do elemento pai.
3. A altura do elemento de bloco no fluxo de documentos é ampliada pelo conteúdo por padrão.
elementos embutidos
1. Os elementos embutidos são organizados da esquerda para a direita no fluxo do documento. Se uma linha não for suficiente para acomodar todos os elementos embutidos, mude para a próxima linha e continue a ser organizado da esquerda para a direita.
2. No fluxo de documentos, a largura e a altura dos elementos embutidos são ampliadas pelo conteúdo por padrão.