Galeria de mapas mentais Seletores para HTML e CSS
Em HTML e CSS, seletores básicos, seletores compostos, pseudo-seletores, etc. são todos conteúdos importantes. Este mapa divide esses conteúdos em detalhes para facilitar sua compreensão.
Editado em 2021-07-26 11:47:06Il 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.
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.
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.
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.
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.
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.
Seletor CSS
Introduzir folha de estilo
1. Folhas de estilo embutidas
2. Folha de estilo interna
3. Folhas de estilo externas
Seletor
seletor básico
1. Seletor universal *
2. Seletor de elemento h2
3. Seletor de classe .class
4. seletor de id #id
seletor composto
1.Seletor de interseção e#id || e.class
2. Seletores de união e1,e2,e3
3. Seletor descendente e1 e2 e3
4. Seletor descendente e1>e2>e3
5. Seletor de irmão adjacente e1 e2
6. Seletor universal de irmãos e1 ~ e2
Pseudo seletor
Seletor de pseudoelemento
1::primeira linha
2::primeira letra
3 ::antes;
4::seleção
Seletor de pseudoclasse
1. Seletor dinâmico de pseudoclasse
1:link; (link) quando não acessado
2:visitado; (link) depois de ser visitado
3: passe o mouse;
4: ativar quando ativado (quando o mouse é pressionado)
5: foco Ao obter foco
2.Seletor de pseudoclasse UI
1: habilitado;
2: verificado
3: obrigatório;
4: padrão
5: válido;
6: dentro do alcance;
7: somente leitura;
3. Seletor de pseudoclasse estrutural
1: seletor de elemento raiz raiz
2: elemento vazio vazio
3
:primeiro filho; :último filho :filho único;
:primeiro do tipo; :último do tipo :apenas do tipo;
4
:nésimo-filho(); :nésimo-último-filho();
:enésimo-do-tipo(); :nésimo-último-do tipo();
4. Outros seletores de pseudoclasse
1:ponto de ancoragem da página;
2: idioma;
3: não (seletor) Seletor negativo
seletor de atributos
1 [atributo]
2 [atributo = "val"]
3 [atributo^="val"]
4 [atributo$="val"]
5 [atributo*="val"]
6 [atributo~="val"]
7 [atributo|="val"]
CSS
expressão de cor
RGB (RGBA)
HEX
HSL (HSLA)
fundo
fundo
cor de fundo cor de fundo
imagem de fundo
fundo de repetição
sem repetição
repetir-x
repetir
espaço (ajustar o espaçamento da imagem)
redondo (redimensionar imagem)
posição de fundo
(superior, esquerda, direita, inferior, centro) combinação de pares
(x% y%)
(x-y)
origem de fundo
caixa de preenchimento
caixa de fronteira
caixa de conteúdo
clipe de fundo
caixa de preenchimento
caixa de fronteira
caixa de conteúdo
tamanho de fundo
automático (tamanho original)
x,y (largura, altura)
x%,y% (porcentagem do elemento pai)
tampa (ajustada para cobrir todo o recipiente)
contém (ajustado para ser totalmente exibido)
anexo de fundo
local (rola com conteúdo)
scroll (não rola com o conteúdo, mas rola com a página)
fixo (tamanho fixo e não controlado)
modelo de caixa
margens
Porcentagem é uma porcentagem da largura do contêiner pai
preenchimento
margem
limite
fronteira
largura da borda
Cor da borda
estilo de borda
fronteira-raius
imagem de borda imagem de borda
fonte da imagem da borda
fatia de imagem de borda
largura da imagem da borda
início da imagem da borda
repetição de imagem de borda
Sombra da caixa
esboço de esboço
cor do contorno, estilo, largura
contorno-offset (o deslocamento externo do contorno da borda)
tamanho
largura
altura
largura mínima (altura)
largura máxima (altura)
Cenário de aplicação?
dimensionamento de caixa
caixa de margem
caixa de fronteira
caixa de preenchimento
caixa de conteúdo
transbordar
transbordar
auto
escondido
rolagem
visível (padrão)
herdar
estouro-x, estouro-y
mostrar
problema de colapso de margem
Colapso vertical (colapso da borda)
Recolher aninhado
Localização
flutuador
Vários métodos para limpar carros alegóricos:
O princípio da flutuação
1. Após o elemento flutuar, ele se separará do fluxo do documento e aumentará o nível.
2. A posição do elemento após flutuar é afetada pelo elemento flutuante anterior. Se o elemento anterior flutuar e a posição atrás dele for suficiente, ele será exibido na mesma linha se a posição atrás dele for insuficiente; será espremido para a próxima linha para exibição.
3. Após o elemento flutuar, se o elemento anterior não flutuar, o elemento atual flutuará em sua própria linha.
4. Se um elemento for empurrado para a próxima linha após ser flutuado, a posição do elemento atual será afetada pelo elemento anterior com a mesma direção de flutuação.
Perceber
1. Flutuar fará com que a altura do elemento pai diminua
2. Os elementos têm "propriedades de encapsulamento" após serem flutuados (semelhante aos blocos embutidos).
posição
Atributos
estático (padrão, layout normal)
relativo (posicionamento relativo)
absoluto (posicionamento absoluto)
fixo (posicionamento fixo)
pegajoso (posicionamento pegajoso)
Perceber
1. Quanto mais tarde o elemento for posicionado, maior será o nível (índice z)
2. Depois que o elemento é posicionado, ele possui "propriedades de quebra" (semelhantes aos blocos embutidos).
Flutuador claro: claro
BFC (contexto de formatação em nível de bloco)
1. Se as seguintes condições forem atendidas, um novo BFC será criado automaticamente
atributo float não é nenhum
O atributo position não é estático ou relativo
O valor do atributo overflow não está visível
O atributo de exibição é flex, inline-flex, inline-block, table-cell ou table-caption
2.Regulamentos BFC: colapso vertical da margem, colapso aninhado
Solução: coloque o div em um BFC diferente
3. Métodos para acomodar elementos flutuantes
1. Defina também float para o contêiner
2. Use transparente para limpar flutuadores
3. Crie um novo BFC para o elemento externo
4. Use BFC para evitar quebra automática de texto
layout de várias colunas
contagem de colunas: Especifique o número de colunas
largura da coluna: especifique a largura da coluna
colunas
coluna-gap: espaçamento entre colunas
comprimento
normal
preenchimento de coluna: como o conteúdo é distribuído entre colunas
equilíbrio (o conteúdo é distribuído uniformemente)
automático (o conteúdo é preenchido em ordem)
column-span: especifica quantas colunas o elemento abrange horizontalmente
número
todos
column-rule-width: Especifique a largura entre as colunas
coloum-rule-style: Especifique o estilo entre colunas
column-rule-color: Especifique a cor entre as colunas
regra de coluna
Caso: layout de fluxo em cascata
Pergunta da entrevista: Vários métodos para implementar o layout de várias colunas
flutuador
posição
coluna
Layout da página da Trinity
Layout centralizado
elementos embutidos
Centralização horizontal: elemento pai text-align: center;
Centralizado verticalmente: altura da linha: (altura);
elementos de nível de bloco
Centralizar horizontalmente: margem: 0 automático;
Centralizar verticalmente:
PASSO1: posição: absoluta;
PASSO 2: superior, inferior (esquerda, direita): 0;
PASSO3: margem: automático;
layout de coluna única
layout de duas colunas
Layout centralizado com largura fixa de duas colunas
A barra lateral tem largura fixa e o conteúdo principal é adaptativo
Usar implementação flutuante
Use o posicionamento para alcançar
layout de três colunas
método flutuante
método de posicionamento absoluto
Método de margem negativa
layout clássico
Layout de asa dupla voadora
layout do Santo Graal
layout de fluxo em cascata
Uso de margens negativas
Margens negativas para elementos estáticos
Superior e esquerdo: mova o próprio elemento para o canto superior esquerdo
Inferior e direita: deixe os elementos subsequentes invadirem pela parte inferior ou direita para se cobrirem
Margens negativas para elementos flutuantes
Igual à direção flutuante: o elemento se move a distância correspondente na direção correspondente
Oposto à direção flutuante: o elemento em si não se move e os elementos antes ou depois do elemento se moverão uma distância correspondente na direção do elemento.
Aplicação de margens negativas
Layout de três colunas para listas
Layout de caixa flexível
display (definido para caixa flexível)
flex; (caixa flexível em nível de bloco)
inline-flex; (caixa flexível inline)
flex-wrap (especifique o envoltório do elemento)
wrap (especifique o elemento flexível para quebrar automaticamente)
nowrap (valor padrão, sem quebra automática de linha)
wrap-reverse (elementos flexíveis quebram automaticamente ao contrário)
flex-direction (especifica a direção de disposição dos elementos)
linha (valor padrão, os elementos flexíveis são organizados horizontalmente)
coluna (disposição vertical)
linha reversa (arranjo horizontal reverso)
coluna reversa (arranjo vertical reverso)
Pode ser combinado em flex-flow
Alinhamento do layout flexbox
Dois conceitos importantes
Eixo principal: especifica a ordem em que os elementos elásticos são dispostos.
Eixo vertical: determina a direção na qual os elementos da segunda linha são adicionados após ocorrer uma quebra de linha.
Alinhamento
justificar-conteúdo (alinhamento no eixo principal)
flex-start (valor padrão, o elemento elástico começa próximo ao eixo principal)
flex-end (o elemento elástico está próximo à borda final do eixo principal)
centro (o elemento flexível está centralizado no eixo principal)
espaço entre (organize cada elemento uniformemente, com o primeiro elemento próximo à borda inicial do eixo principal e o último elemento próximo à borda final do eixo principal.)
space-around (Todos os elementos flexíveis são organizados uniformemente e o espaçamento entre os elementos não diminui.) (Organize cada elemento uniformemente, aloque o mesmo espaço ao redor de cada elemento)
space-evenly (Todos os elementos flexíveis são organizados uniformemente e o espaçamento entre os elementos é recolhido.) (Cada elemento é organizado uniformemente, com espaçamento igual entre cada elemento)
Alinhamento no eixo vertical
alinhar itens (alinhamento de todos os elementos no eixo vertical)
flex-start (elementos flexíveis começam próximos ao eixo vertical)
flex-end (o elemento elástico está próximo à borda final do eixo vertical)
centro (o elemento flexível está centralizado no eixo vertical)
linha de base (elementos flexíveis são alinhados à linha de base)
esticar (valor padrão, o elemento elástico se estica para ocupar todo o tamanho do eixo vertical)
alinhar-self (alinhamento no eixo vertical de um elemento)
alinhar-content (alinhamento de elementos flexíveis multilinhas)
início flexível
extremidade flexível
Centro
espaço entre
abranger
espaço uniformemente
ordem (ordem de exibição)
elasticidade
flex-grow (Define como o elemento flex é ampliado.)
flex-shrink (define como os elementos flexíveis são compactados)
base flexível (base flexível)
flex-basis define o tamanho inicial (não a largura) ocupado pelo elemento flexível no eixo principal.
Se flex-basis, largura e altura forem definidos ao mesmo tempo, o último será automaticamente substituído.
flexível (0 1 automático)
Características dos elementos flexíveis
1. As margens dos dois elementos elásticos não entrarão em colapso ou entrarão em colapso.
2. É inválido definir elementos flutuantes em elementos flexíveis (mas o posicionamento pode ser definido)
Layout de grade (layout de grade)
terminologia Básica
Linha de grade
Trilha da Grade
Célula de grade
Área de grade
display (definido como contêiner de grade)
grade
grade embutida
Definições de linha e coluna
colunas de modelo de grade
fr (por exemplo: 1fr 1fr 1fr; 100px 50% 1fr)
linhas de modelo de grade
fr: O fr aqui é proporcional à altura do contêiner da grade. (Se não houver altura, será calculado de acordo com a altura do conteúdo.)
Defina modelos com base em regiões
grid-template-area: precisa ser usado com grid-area.
Perceber
1. Cada linha deve ser envolvida com uma string
2. Deve ser retangular.
Habilidade
...significa deixar em branco