perguntas da entrevista do dia 01

1. Conte-me sobre sua compreensão do modelo de caixa

O modelo de caixa significa que em uma página web, cada elemento é considerado uma caixa retangular, que contém conteúdo, preenchimento, borda e margem. O modelo de caixa define o espaço ocupado e a relação entre os elementos do layout da página.

Especificamente, o modelo de caixa pode ser dividido em dois padrões diferentes: modelo de caixa padrão W3C e modelo de caixa padrão IE. A diferença entre eles é como a largura e a altura totais do elemento são calculadas.

1. Modelo de caixa padrão W3C:
   No modelo de caixa padrão W3C, a largura e a altura de um elemento incluem apenas a parte do conteúdo, excluindo preenchimento, bordas e margens. Ou seja, o tamanho real do elemento é determinado exclusivamente pelo seu conteúdo. A fórmula é expressa como:
   largura = largura do conteúdo (largura do conteúdo)
   altura = altura do conteúdo (altura do conteúdo)

2. Modelo de caixa padrão do IE:
   No modelo de caixa padrão do IE, a largura e a altura de um elemento incluem conteúdo, preenchimento e bordas, mas não incluem margens. Ou seja, o tamanho real do elemento é determinado por uma combinação de conteúdo, preenchimento e bordas. A fórmula é expressa como:
   largura = largura do conteúdo (largura do conteúdo) + preenchimento esquerdo e direito (preenchimento esquerdo + preenchimento direito) + largura da borda esquerda e direita (largura esquerda da borda + largura da borda direita) altura = conteúdo altura (altura do conteúdo
   )) + preenchimento superior e inferior (preenchimento superior + preenchimento inferior) + largura da borda superior e inferior (largura superior da borda + largura inferior da borda)

Em CSS, você pode ajustar a apresentação do modelo de caixa definindo as propriedades de preenchimento, borda e margem do elemento. Por exemplo, use o atributo padding para definir o preenchimento, o atributo border para definir o estilo e a largura da borda e o atributo margin para definir a margem externa.

O modelo de caixa é um modelo usado para descrever o layout e o tamanho dos elementos em uma página da web. Ele trata cada elemento da página web como uma caixa retangular, incluindo quatro partes: área de conteúdo, preenchimento, borda e margem.

Especificamente, o modelo de caixa inclui os seguintes elementos:

1. Área de conteúdo (Conteúdo): O conteúdo real é exibido dentro da caixa, como texto, imagens, etc. Seu tamanho é determinado pelo conteúdo do elemento e pode ser definido usando propriedades CSS como widthe .height

2. Preenchimento: Localizado entre a área de conteúdo e a borda, serve para controlar o espaçamento entre o conteúdo e a borda. Pode ser definido usando propriedades CSS como padding-top, padding-righte padding-bottom.padding-left

3. Borda: envolve fora do preenchimento e é usada para definir os limites da caixa. Pode ser definido usando propriedades CSS como border-width, border-stylee .border-color

4. Margem: Localizada fora da borda, utilizada para controlar o espaçamento entre a caixa e os demais elementos. Pode ser definido usando propriedades CSS como margin-top, margin-righte margin-bottom.margin-left

Juntas, essas partes determinam a posição do elemento na página e o espaço que ele ocupa. Quando definimos o tamanho ou layout de um elemento, estamos na verdade ajustando os valores das propriedades desses modelos de caixa.

Por padrão, o tamanho do elemento é determinado pelo tamanho da área de conteúdo. No entanto, podemos box-sizingalterar a forma como o modelo de caixa do elemento é calculado definindo propriedades. Os valores comuns são:

• content-box(Padrão): Largura e altura incluem apenas a área de conteúdo.
• padding-box: a largura e a altura incluem a área de conteúdo e o preenchimento.
• border-box: a largura e a altura incluem área de conteúdo, preenchimento e bordas.

Ao compreender o modelo de caixa, podemos controlar e ajustar melhor o layout e a aparência dos elementos nas páginas da web para criar uma variedade de efeitos de página diferentes.

2.Quais são os seletores CSS? prioridade? Quais propriedades podem ser herdadas?

Os seletores CSS são usados ​​para selecionar elementos em um documento HTML e aplicar estilos a esses elementos. Aqui estão alguns seletores CSS comuns:

1. Seletor de elementos: selecione elementos por meio dos nomes de tags de elementos HTML, como p, divetc.

2. Seletor de classe: seleciona elementos pelo valor do atributo de classe, começando com ., por exemplo .my-class.

3. Seletor de ID: seleciona um elemento exclusivo pelo valor do atributo id, começando com #, por exemplo #my-id.

4. Seletor de atributos: seleciona elementos por seus valores de atributos, incluindo:

   • [attribute]: selecione elementos com atributos especificados.
   • [attribute=value]: selecione elementos com atributos e valores de atributos especificados.
   • [attribute~=value]: selecione elementos que possuem o atributo especificado e o valor do atributo contém o valor especificado.

5. Seletor Descendente: Seleciona elementos descendentes do elemento especificado, separados por espaços, por exemplo div p.

6. Seletor de elemento filho direto (Seletor Filho): Seleciona os elementos filhos diretos do elemento especificado, >separados por símbolos, por exemplo div > p.

7. Seletor de pseudoclasse: seleciona elementos em um estado ou posição específica, começando com dois pontos :, como :hover, :first-childetc.

8. Seletor de pseudoelemento: seleciona subelementos virtuais de um elemento, começando com dois ::pontos duplos, como ::before, ::afteretc.

As regras de prioridade para seletores CSS são as seguintes (de maior para menor):

1. !importante: os estilos com este sinalizador têm a prioridade mais alta.
2. Estilos Inline: styleEstilos escritos diretamente em elementos HTML por meio de atributos.
3. Seletor de ID: Estilo com seletor de ID.
4. Seletor de Classe, Seletor de Atributo, Seletor de Pseudoclasse: Estilos com seletores de classe, seletores de atributos ou seletores de pseudoclasse.
5. Seletor de elementos e seletor de pseudoelementos: Estilos com seletores de elementos ou seletores de pseudoelementos.
6. Estilos herdados: estilos herdados de elementos pais.

Em geral, a maioria das propriedades CSS são herdáveis, ou seja, os elementos filhos herdarão os estilos do elemento pai. Propriedades herdáveis ​​comuns incluem, mas não estão limitadas a:

• font-family
• font-size
• color
• line-height
• text-align
• visibility
• cursor

No entanto, nem todas as propriedades podem ser herdadas, como:

• width
• height
• margin
• padding
• border

Deve-se observar que a herança depende da definição específica de cada propriedade e da implementação do navegador. Em alguns casos, mesmo que uma propriedade possa ser herdada, é possível substituir o estilo herdado estilizando explicitamente o elemento filho.

3. Quais são os métodos para centralizar elementos horizontal e verticalmente? E se o elemento tiver largura e altura variáveis?

Existem muitas maneiras de centralizar elementos horizontal e verticalmente. Aqui estão alguns métodos comumente usados:

1. Use o layout CSS Flexbox:
   defina o contêiner pai como layout Flex e use justify-content: center; align-items: center;para centralizar os elementos filhos horizontal e verticalmente.

.parent-container {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Use CSS Grid Layout:
   Defina o contêiner pai como Grid Layout e use place-items: center;para centralizar os elementos filhos na grade.

.parent-container {
    
    
  display: grid;
  place-items: center;
}

3. Use posicionamento absoluto e margens negativas:
   defina o elemento filho para posicionamento absoluto, top: 50%; left: 50%;posicione-o no centro do contêiner pai e, em seguida, corrija a largura e a altura do próprio elemento, fornecendo-lhe margens negativas.

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Use o atributo transform e a função translate: defina
   os transformatributos do elemento filho como translate(-50%, -50%)e centralize-o horizontal e verticalmente em conjunto com o posicionamento absoluto.

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Se a largura e a altura do elemento forem incertas, você poderá usar o posicionamento relativo e um deslocamento negativo para centralizá-lo. left: 50%; top: 50%; transform: translate(-50%, -50%);Este método desloca o elemento para o centro do contêiner pai usando

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Dessa forma, não importa qual seja a largura e a altura do elemento filho, ele pode ser centralizado horizontal e verticalmente no contêiner pai.

4. Como entender o refluxo e o redesenho? Em que circunstâncias será acionado?

Refluxo e repintura são dois conceitos-chave quando o navegador renderiza a página.

Refluxo significa que quando a estrutura do DOM muda ou o estilo de um elemento muda, o navegador recalcula as propriedades geométricas do elemento (como posição, tamanho, etc.) e reorganiza a página. A operação de refluxo envolve o processo de cálculo de todo o layout da página, portanto a sobrecarga de desempenho é grande.

Redesenhar significa que, após a conclusão do refluxo, o navegador redesenha a parte afetada ou toda a área visível da página com base nas novas informações de layout. O redesenho não envolve cálculos de layout, apenas atualização de cores de pixel, portanto a sobrecarga de desempenho é relativamente pequena.

O navegador aciona o refluxo e a repintura nas seguintes condições:

Situações que desencadeiam o refluxo:

• Adicione, exclua e modifique nós DOM.
• Modifique as propriedades de layout dos nós DOM (como posição, tamanho, estado oculto, etc.).
• A página é renderizada pela primeira vez.
• O tamanho da janela do navegador muda.
• Obtenha algumas propriedades ou chame alguns métodos (como offsetWidth, offsetHeight, getComputedStyle, etc.).

Situações que desencadeiam o redesenho:

• Altere as propriedades de estilo do elemento, como cor, cor de fundo, fonte, etc., mas não altere suas propriedades de layout.
• Alterne os nomes das classes ou adicione ou remova folhas de estilo.

Como o refluxo é mais caro do que o redesenho, o refluxo e o redesenho frequentes causarão degradação do desempenho da página. Portanto, para minimizar o acionamento de refluxo e redesenho ao escrever código, você pode tomar as seguintes medidas:

• Use a propriedade transform do CSS para realizar transformações como deslocamento e dimensionamento em vez de modificar propriedades de layout como topo, esquerda, largura e altura.
• Ao modificar estilos DOM em lotes, use o método de adicionar/excluir nomes de classes para evitar modificar diretamente o atributo de estilo.
• Use DocumentFragment para executar em lote várias operações DOM.
• Para propriedades de layout que exigem acesso frequente, evite leituras múltiplas armazenando os resultados em cache.

Por meio de otimização razoável, o número de refluxos e redesenhos do navegador pode ser reduzido e o desempenho da página e a experiência do usuário podem ser melhorados.

5. O que é design responsivo? Quais são os princípios básicos do design responsivo? Como fazer?

Responsive Design é um método de design para criar páginas web e aplicativos que se adaptam a diferentes tamanhos de tela e dispositivos. O princípio básico é permitir que a página ajuste dinamicamente o layout, tamanho da fonte, tamanho da imagem, etc. de acordo com o dispositivo utilizado pelo usuário para fornecer a melhor experiência de usuário.

Os princípios básicos do design responsivo incluem o seguinte:

1. Layout de grade flexível: use unidades relativas (como porcentagens) para definir a largura dos elementos, permitindo ajustar automaticamente o layout de acordo com o tamanho da tela.

2. Consultas de mídia: por meio de consultas de mídia em CSS, regras de estilo específicas são fornecidas para diferentes dispositivos com base em diferentes larguras de tela, alturas, tipos de dispositivos e outras informações.

3. Imagens e mídia flexíveis: use propriedades CSS (como largura máxima) e tags HTML (como <picture>ou <video>) para garantir que as imagens e o conteúdo de mídia se adaptem bem em diferentes dispositivos.

4. Texto e fontes responsivos: use unidades relativas (por exemplo em) e consultas de mídia para ajustar tamanhos de fonte com base no tamanho da tela para facilitar a leitura e a usabilidade.

5. Aprimoramento progressivo: comece com funcionalidade e layout básicos e adicione gradualmente recursos e otimizações mais avançados para garantir que o conteúdo principal esteja acessível em diferentes dispositivos.

Para implementar um design responsivo, siga estas etapas:

1. Defina metas: determine o público-alvo, a gama de dispositivos e a funcionalidade necessária do seu design responsivo.

2. Planeje o layout: Use um sistema de grade flexível para definir o layout da página e o sistema de grade para que ele possa se adaptar a diferentes tamanhos de tela.

3. Utilize consultas de mídia: de acordo com diferentes tamanhos de tela e características do dispositivo, escreva regras de estilo CSS para diferentes situações e aplique-as à página por meio de consultas de mídia.

4. Trabalhe com imagens e mídia: selecione e trabalhe com imagens, usando consultas de mídia e propriedades CSS apropriadas para garantir que sejam exibidas corretamente em diferentes dispositivos.

5. Manipulação de texto e fontes: escolha fontes e tamanhos de fonte apropriados e use unidades relativas e consultas de mídia para ajustar o texto para legibilidade em diferentes dispositivos.

6. Teste e otimização: teste em diferentes dispositivos e navegadores e otimize e melhore o design responsivo com base no feedback do usuário e na análise de dados.

O design responsivo pode proporcionar uma boa experiência ao usuário e se adaptar facilmente a vários dispositivos e tamanhos de tela, melhorando assim a satisfação do usuário e a acessibilidade do site ou aplicativo.

6. Se você deseja otimizar, quais são as formas de melhorar o desempenho do CSS?

Para melhorar o desempenho do CSS, você pode fazer o seguinte:

1. Minimize e compacte o código CSS: remova espaços desnecessários, comentários e código redundante e use ferramentas de compactação para reduzir o tamanho do arquivo e o tempo de transferência pela rede.

2. Mesclar arquivos CSS: mescle vários arquivos CSS em um arquivo para reduzir o número de solicitações HTTP e acelerar o carregamento da página.

3. Use pré-processadores CSS: como Sass ou Less, e use suas variáveis, aninhamento, mixagem e outras funções para melhorar a eficiência da escrita CSS e a capacidade de manutenção do código.

4. Evite utilizar demasiados seletores:Demasiados seletores aninhados e hierárquicos aumentarão a complexidade da correspondência do seletor.Recomenda-se simplificar ao máximo a estrutura do seletor para evitar excesso de limitação.

5. Otimize o desempenho do seletor: usar seletores de ID e seletores de classe é melhor do que seletores de tags e seletores curinga porque eles correspondem mais rapidamente.

6. Use tecnologia de cache: ao definir políticas de cache apropriadas, o navegador pode armazenar arquivos CSS em cache, reduzir carregamentos repetidos e melhorar a velocidade de resposta da página.

7. Evite usar propriedades CSS caras: algumas propriedades como box-shadow, border-radiusetc. podem afetar o desempenho da renderização, portanto use-as o mínimo possível ou evite modificações frequentes.

8. Utilize animações e transições CSS: usar animações e transições CSS em vez de efeitos de animação implementados em JavaScript pode aproveitar melhor a aceleração de hardware e melhorar o desempenho e a suavidade.

9. Use CSS Sprites: combine vários ícones pequenos ou imagens de fundo em uma imagem grande e use background-positionatributos precisos para exibir as partes necessárias, reduzindo o número de solicitações HTTP.

10. Evite usar @import: <link>É melhor usar tags para introduzir folhas de estilo externas do que usar regras @import, porque estas últimas farão com que a página carregue.

Ao tomar essas medidas, você pode otimizar efetivamente o desempenho do CSS e melhorar a velocidade de carregamento da página da web e a experiência do usuário.