Perguntas de entrevista de CSS Resumo do ensaio estereotipado

Diretório de artigos

1. seletor de css

Fonte: Estilos embutidos > Estilos internos > Estilos externos > Personalização do navegador > Estilos personalizados
Digite: seletor de id (1000) > seletor de classe > seletor de pseudo classe (:hover, etc., seletor de atributo > seletor de rótulo, pseudo elemento (1) > seletor curinga, seletor filho, seletor adjacente Suplemento
:
! importante tem a maior prioridade
A prioridade é a mesma, a última entrará em vigor
A herança tem baixa prioridade

2. O modelo de caixa do CSS

Modelo de caixa padrão (W3C)
tamanho da caixa: caixa de conteúdo (valor padrão)
modelo de caixa padrão largura/altura total: margem+borda+preenchimento+largura/altura da área de conteúdo (ou seja, largura/altura não inclui valores de preenchimento e borda ))
Modelo de caixa estranha (modelo de caixa do IE)
box-sizing:border-box
Largura/altura total da caixa do IE == (largura/altura da área de conteúdo + preenchimento + borda) + margem. (ou seja, largura/altura contém valores de preenchimento e borda))

3. Propriedades de herdabilidade do CSS

Família da fonte: família da fonte, espessura da fonte, tamanho da fonte, estilo da fonte
Série de texto: alinhamento de texto, altura da linha, cor
Elemento visível: visibilidade
Atributo de layout de lista: estilo de lista

4. Método de layout

Layout estático:
Layout adaptável:
Layout fluido:
Layout responsivo:
Layout elástico:

5. Qual é o atributo position do atributo css?

O fluxo do documento refere-se ao processo de composição e layout dos elementos, os elementos serão organizados automaticamente da esquerda para a direita e de cima para baixo e, finalmente, o formulário será dividido em linhas de cima para baixo e em cada linha de acordo com a ordem da esquerda para a direita Organiza os elementos na ordem correta. [Sair do fluxo do documento significa que os elementos atrapalham o arranjo], ou tiram da composição tipográfica.

Existem três mecanismos de posicionamento para css: fluxo de documento, flutuação e posição.

A: position: absolute gera um elemento absolutamente posicionado, que é posicionado em relação ao primeiro elemento pai diferente do posicionamento estático; devido ao posicionamento absoluto, ele se separa do fluxo do documento.

B: position: fixed gera elementos absolutamente posicionados, posicionados em relação à janela do navegador, e não tem nada a ver com a ordem normal.

C: posição: relativa Gera um elemento posicionado relativamente, posicionado em relação à sua posição normal. Não há como sair do fluxo de documentos.

D: float: left Flutua e não consegue manter a posição original.
posicionamento de posição

estático: valor padrão, sem posicionamento, o elemento aparece no fluxo normal (ignorando as declarações superior, inferior, esquerda, direita ou z-index)
absoluto: O elemento que gera o posicionamento absoluto é posicionado em relação ao primeiro elemento pai diferente do posicionamento estático, e o elemento é especificado pelos atributos "esquerda", "topo", "direita" e "fundo"
flxed: gera elementos posicionados fixos, posicionados em relação à janela do navegador
Relativo: gera posicionamento relativo, posicionamento relativo a outras posições normais
sticky: posicionamento fixo, o posicionamento é baseado na posição da rolagem do usuário

6. A diferença entre exibição: nenhuma e visibilidade: oculta

Visibilidade de diferentes funções: oculto---- oculta o elemento, mas ainda ocupa a posição que deveria ocupar na página web. display: none----Define a exibição do elemento como nenhum, ou seja, não ocupa nenhuma posição na página web.
Define várias propriedades de visibilidade para especificar se um elemento é visível ou não. display Este atributo é utilizado para definir o tipo de display box gerado pelo elemento quando o layout é estabelecido.

7. Unidades de medida CSS

rem é a unidade relativa ao tamanho da fonte raiz, por exemplo, você pode definir 1rem=50px
em é relativo ao tamanho da fonte, como tamanho da fonte: 16px (padrão do navegador), então 2em=32px
vm é a largura do ponto de vista, a largura da janela, por exemplo, a largura de 1vm é um por cento da largura da janela
vh é a altura do ponto de vista, a altura da janela, por exemplo, a altura de 1vm é um por cento da altura da janela

8. Refluxo e Repintura

O navegador renderiza a página
● Por meio do analisador de HTML, o HTML é analisado em uma árvore DOM.
● Por meio do analisador CSS, analise o arquivo CSS para formar a árvore CSSOM do modelo de folha de estilo em cascata.
● Combinando a árvore DOM e a árvore CSSOM em uma árvore de renderização
● Layout, o navegador desenha cada nó da árvore de renderização na tela, que é chamado de layout (Layout)
● Desenho, desenhando cada nó da árvore de renderização na tela, isso etapa é chamada de desenho (pintura)

Reorganização (refluxo) Reorganização é o comportamento que, após
o navegador renderizar o layout da página pela primeira vez , subsequentemente faz com que a posição de cada nó na página seja recalculada ou redefinida

Como a posição ou o tamanho do elemento mudou, o navegador recalculará a árvore de renderização, fazendo com que parte ou toda a árvore de renderização mude, e os elementos afetados na página precisam ser redesenhados
Os comportamentos que podem desencadear o rearranjo incluem: alteração do tamanho da página, operações que envolvem tamanho ou posição do elemento, etc.
Redesenho
Redesenho significa que após a conclusão do cálculo do layout, a página será redesenhada. mudança, o processo de redesenhar o elemento
● Redesenhar não necessariamente aciona o rearranjo, mas o rearranjo definitivamente acionará o redesenho
● Tais como: alterações em atributos como visibilidade, contorno e cor de fundo
Costumamos dizer HTML É a estrutura da página da web, CSS é a aparência da página da Web e JS é a ação da página da Web. Geralmente, o que envolve a alteração do HTML da página da Web (ou seja, a alteração do elemento DOM) é o rearranjo e o que envolve o CSS, como a alteração do cor, está reordenando. Desenho (sem contar aqueles que afetarão o DOM, como usar display: flex)
para reduzir e evitar
. Para evitar rearranjo e redesenho, é necessário reduzir ou mesclar várias operações DOM em uma operação DOM
. Porque posicionamento absoluto pode fazer elementos Rompendo com o fluxo do documento, ele iniciará apenas um rearranjo parcial sem afetar o mundo externo
Ao alterar
a resposta da entrevista
de maneira centralizada , quando afetar o layout da página, como alterar o tamanho e a posição , ele irá acionar o rearranjo.Ao mudar a cor de fundo, etc.

9. Exibição do centro da caixa CSS

1. Localize o pai e o filho

1.1 margem está definida como automática

.child { top: 0px; esquerda: 0px; inferior: 0px; direita: 0px; margem: automática; }

A transformação 1.2 faz com que a caixa filha se mova "para trás" na metade de sua largura e altura

.child { posição: absoluto; superior: 50%; esquerda: 50%; transformar: traduzir(-50%, -50%);

2. Layout flexível
Defina a caixa pai como um contêiner de caixa flexível
para centralizar os elementos filhos horizontal e verticalmente

.parent { display: flex; justificar-conteúdo: centro; itens de alinhamento: centro; }

3. bloco inline elemento de bloco inline
text-align: center; útil apenas para elementos inline e elementos de bloco inline

.parent { text-align: center; line-height: 500px; } .child { display: inline-block; vertical-align: middle; A propriedade vertical-align define o alinhamento vertical de um elemento. middle coloca esse elemento no meio do elemento pai. }

A caixa CSS é fixa à direita e adaptável à esquerda
1. Caixa fixa flutuante + largura da caixa adaptável: 100%; // Largura é igual a 100%

.left { float: left; width: 200px; height: 400px; background: red; } .right { width: 100%;//width is equal to 100% height: 400px; margin-left: 200px; background: blue; }

2. O contêiner pai do layout flexível é definido para exibir: flex; a parte direita é definida como flex: 1

.box{ display: flex;}

.left{largura:200px;fundo: vermelho;}

.right{width:%;flex:1;fundo: azul;}/ igual à largura da coluna esquerda /

3. Posicionamento absoluto em ambos os lados

.left{largura:200px;fundo: vermelho; posição: absoluta;esquerda:;}

.right{largura:100%;fundo: azul;posição: absoluta;esquerda:200px;}/ igual à largura da coluna esquerda /

10. Elementos ocultos do estilo CSS

Posicionamento para fora da tela, transformação de transparência, display, opacidade,

O efeito do atributo opacity é adicionar transparência à cor de fundo. O intervalo de valores é 0~1, mas também tornará as fontes na cor de fundo transparentes juntas. Funciona bem quando usado sozinho
visibilidade Definir visibilidade para o elemento: hidden também pode ocultar este elemento, mas o elemento oculto ainda precisa ocupar o mesmo espaço que quando não está oculto, ou seja, embora o elemento esteja invisível, ainda afetará o layout da página .
exibição Se display: nenhum for definido para um elemento, o elemento e todos os seus elementos descendentes serão ocultados, que é o método de ocultação usado com mais frequência pelos desenvolvedores de front-end. Os elementos ocultos não podem ser clicados, não podem ser acessados com dispositivos de assistência, como leitores de tela, e o espaço ocupado desaparece

Suplemento:
A diferença entre visibilidade e exibição

A visibilidade é herdada. Defina visibilidade:oculto para o elemento pai; os elementos filhos também herdarão essa propriedade. Mas se você definir a visibilidade: visível para o elemento filho novamente, o elemento filho será exibido novamente. Isso é qualitativamente diferente da exibição: nenhum

visibilidade: oculto não afeta a contagem do contador, como mostrado na figura, embora visibilidade: oculto faça desaparecer um elemento, seu contador ainda está em execução. Isso é completamente diferente de exibição: nenhum

A transição CSS3 suporta o atributo de visibilidade, mas não suporta a exibição. Como a transição pode ser atrasada, ela pode ser usada em conjunto com a visibilidade para obter efeitos de exibição de atraso de foco usando CSS puro. Melhore a experiência do usuário.

11. Exibição de estilo CSS

block" para exibir o elemento como um elemento de nível de bloco
nenhum é diferente do valor oculto do atributo visibilidade, não reserva seu espaço físico para o objeto oculto, ele desaparece na página da web, mas o elemento não é excluído do documento, apenas fica oculto na página da web estrutura e não exibido na página da web. Não ocupa espaço físico e não é exibido na página web, mas a estrutura DOM continua lá
inline" é usado principalmente para converter elementos de nível de bloco em elementos inline

12. Pseudo-classes em CSS

Pseudoclasse do link: link visitado hover active
Pseudoclasse estrutural: primeiro filho último filho nth-child(n) nth-último filho(n)
N: par ímpar n 2n etc.
pseudoclasse alvo: :target { }

13. Animação CSS

Atributos comuns de animação:
quadro de animação animação
animation-name: nome da animação
animation-duration: duração
animation-timing-function: curva de velocidade da animação
animation-delay: hora de início da
animação animation-iteration-count: número especificado de reprodução de animação padrão é 1
animação - direção: Especifica que a animação será reproduzida ao contrário no próximo ciclo, o padrão é nominal