2. Consiga a centralização horizontal
4. Centralize na horizontal e na vertical
10. CSS3 adiciona pseudo-classes
1. Realize o triângulo
O princípio da realização do triângulo: a largura é 0; a altura é 0; (1) há um lado horizontal e vertical (para cima, baixo, esquerda e direita) definido na direção da borda: comprimento vermelho sólido, esta é a linha de fundo Use a direção da borda para as outras arestas: comprimento sólido transparente. (2) Existem duas configurações dos lados horizontal e vertical (cima, baixo, esquerda e direita) Se a hipotenusa estiver no lado direito do triângulo, defina a linha superior ou inferior e a linha oblíqua direita. Se a hipotenusa estiver no lado esquerdo do triângulo, defina a linha superior ou inferior e a linha oblíqua à esquerda.
2. Consiga a centralização horizontal
(1) Os elementos em linha são centralizados horizontalmente
Use o alinhamento de texto: centro para obter a centralização horizontal dos elementos embutidos dentro dos elementos no nível do bloco. Este método é eficaz para elementos em linha (em linha), bloco em linha (bloco em linha), tabela em linha (tabela em linha) e elementos flexíveis em linha.
(2) Os elementos em nível de bloco em linha são centralizados horizontalmente
Ao definir a margem esquerda e a margem direita dos elementos de nível de bloco de largura fixa como automático, você pode centralizar os elementos de nível de bloco horizontalmente.
(3) Os elementos de bloco multinível estão centralizados horizontalmente
Use inline-bloco: se houver dois ou mais elementos de bloco de uma fileira, ao proporcionar uma exibição de nível de bloqueio do tipo de elemento ( do visor ) , como bloco-inline texto-align = atributo esquerdo e o recipiente mãe para o centro. De modo que uma pluralidade de Os elementos de nível são centralizados horizontalmente.
Use display: flex: use layout flexível (flex ) para obter a centralização horizontal, em que o conteúdo justificado é usado para definir o alinhamento dos elementos da caixa flexível na direção do eixo principal (eixo horizontal); neste exemplo, defina os elementos filhos para serem centralizados horizontalmente.
3. Centralize verticalmente
(1) Os elementos em linha de linha única são centralizados verticalmente
Ao definir a altura (altura ) e a altura da linha (altura da linha) do elemento inline como iguais, o elemento é centralizado verticalmente.
(2) Os elementos de várias linhas estão centralizados verticalmente
Usar layout da tabela: defina o tipo de exibição do elemento pai como tabela. O tipo de exibição do elemento filho (exibição) é venda de tabela. Use o alinhamento vertical: meio do layout da tabela para obter a centralização vertical dos elementos filhos
Usar layout flexível: use o layout flexível para obter a centralização vertical, defina o tipo de exibição (exibição) para flex.Entre eles, a coluna flex-direction: define a direção do eixo principal como retrato. Como o layout flexível é definido no CSS3, há problemas de compatibilidade nos navegadores mais antigos.
Use 'elemento fantasma do elemento sprite ': ou seja, coloque um pseudo-elemento com 100% de altura no contêiner pai, para alinhar verticalmente o texto e o pseudo-elemento, de modo a atingir a finalidade de centralização vertical.
(3) Os elementos no nível do bloco são centralizados verticalmente
Elementos no nível do bloco de altura fixa: a posição do elemento pai é definida como relativa e a posição do elemento filho é definida como absoluta. Distância a partir do topo pelo elemento de posicionamento absoluto (superior) 50%, e definir a meia-margem superior da altura do elemento de deslocamento para cima, verticalmente centrado pode ser alcançado.
Elementos no nível do bloco de altura desconhecida: quando a altura e a largura do elemento centralizado verticalmente são desconhecidas, podemos usar a propriedade transform no CSS3 para compensar o eixo Y em 50% para obter a centralização vertical. No entanto, alguns navegadores têm problemas de compatibilidade.
4. Centralize na horizontal e na vertical
Elementos fixos de largura e altura centralizados horizontal e verticalmente: ao mudar a margem da metade da largura total do elemento (incluindo preenchimento, etc.) , os elementos são centralizados horizontal e verticalmente.
Os elementos desconhecidos de largura e altura são centralizados horizontal e verticalmente : a transformação 2D é usada para alterar metade da largura e altura nas direções horizontal e vertical na direção reversa, para que os elementos sejam centralizados horizontal e verticalmente. transformar: converter (-50%, -50%);
Usar layout flexível (display: flex): onde justify-content é usado para definir ou recuperar o alinhamento do elemento da caixa flexível na direção do eixo principal (eixo horizontal) ( centro ) ; e o atributo align-items define os itens flexíveis atuais no container flex O alinhamento na direção do eixo lateral (eixo vertical) da linha (centro) .
Usar layout da grade (exibição: grade): baixa compatibilidade, não recomendado
Centralize na horizontal e na vertical na tela: é necessário usar as páginas regulares de login e registro. Para garantir uma melhor compatibilidade, você também precisa usar o layout da tabela.
5. Novo no CSS3
(1) transformar deformação
A tradução dos elementos ( Traduzir ) , rotação ( Girar ) , scaling ( Escala ) , a inclinação ( inclinação )
A transformação não afetará o layout de outros elementos
(2) Transição
Especifique como fazer a transição de um estado para outro
(3) Animação complexa de animação
Pode conseguir mudanças de estilo mais complexas
Uso : define o estilo do quadro principal ; aplica animação aos elementos
6. Modelo de caixa
De fora para dentro: margem (margem), borda (borda), preenchimento (margem), conteúdo (conteúdo)
7. Bóia transparente
Adicione altura ao elemento pai de um elemento flutuante : se um elemento quiser flutuar, seu elemento pai deve ter uma altura. A altura da caixa pode ser fechada para flutuar. Pode passar através diretamente para definir a altura do elemento pai, a aplicação prática de todas as caixas que não são susceptíveis de adicionar altura, não só complicado e não conseguem se adaptar às páginas rápida mutação; outra, pela altura dos pais conteúdo do recipiente distração (como imagem), esse método é usado mais na prática.
clear: both Adicione o último elemento redundante ao último elemento filho e defina-o como clear: both, para que você possa limpar o float. Aqui ao estresse que os elementos são adicionados no final do elemento pai deve ser um elemento nível de bloco, ou não pode realizar-se a altura do elemento pai .
Pseudoelementos clear float : combine: after pseudoelementos e hasLayout. Pode ser perfeitamente compatível com os atuais navegadores convencionais
Use overflow: oculto para o elemento pai; esta solução permite que o contêiner pai forme um BFC (contexto de formato no nível do bloco) e o BFC pode conter flutuadores, o que geralmente é usado para resolver o problema de colapso flutuante da altura do elemento pai.
A tag br flutua : existe um atributo da tag br: clear. Este atributo é uma arma que pode limpar o flutuador, definir o atributo clear na tag br e atribuir o valor all. Você pode limpar a bóia.
8. seletor de css
1. Seletor de tags div h1 p
2. seletor de identificação #id
3. Seletor de classe.
4. Seletor de criança ul> li
5. Seletor descendente div p
6. Seletor de curinga *
7. Seletor de Atributos div [height = 100px]
8. Seletor de pseudo classe a: pairar (link, visitado, pairar, ativo)
Estilos herdáveis: tamanho da fonte, família de fontes, cor
Estilos não herdáveis: borda, preenchimento, margem, altura, largura
9. Prioridade de estilo
Seleção prioritária nas proximidades: sob o mesmo peso, prevalecerá a definição de estilo mais próxima
Mesmo peso: estilo embutido (rótulo interno)> folha de estilos incorporada (no arquivo atual)> estilo externo (no arquivo externo)
\ 1. As regras declaradas por! Important são usadas.
\ 2. A declaração incorporada no atributo style do elemento HTML.
\ 3. A regra do seletor de ID é usada.
\ 4. Regras para seletores de classe, seletores de atributos, pseudoelementos e seletores de pseudoclasses são usadas.
\ 5. As regras do seletor de elementos são usadas.
\ 6. Regras contendo apenas um seletor universal.
10. CSS3 adiciona pseudo-classes
p : first-type seleciona o primeiro elemento pertencente ao elemento pai
p: last-of-type seleciona o último elemento pertencente ao seu elemento pai
p: somente o tipo seleciona apenas elementos que pertencem ao seu elemento pai
p: filho único seleciona apenas elementos filhos que pertencem ao elemento pai
p: enésimo filho (2) seleciona o segundo elemento filho pertencente ao elemento pai
: enabled: disabled O estado desativado do controle de formulário.
: marcado A caixa de opção ou caixa de opções está selecionada.
11. Redesenhar e reorganizar
Os métodos para reduzir o redesenho e reorganizar são:
· Não consulte o DOM quando as informações do layout forem alteradas,
· Use csstext, className para alterar atributos de uma só vez
· Use fragmento
· Para elementos que foram reorganizados várias vezes, como animação. Use posicionamento absoluto para deixar o fluxo do documento para que não afete outros elementos
