Quando tive contato com CSS pela primeira vez, fiquei perplexo. Muitas vezes não sabia por onde começar ou como começar. Depois de obter uma renderização, muitas questões nos preocuparam: como fazer o layout? Posicionamento absoluto ou posicionamento relativo, qual rótulo escolher? Que estrutura adotar. .etc. É claro que, no processo de escrever código, encontraremos muitos problemas, especialmente nós, novatos, que não estamos muito familiarizados com todos os aspectos e não temos experiência, por isso muitas vezes ficamos perdidos ao encontrar problemas. Acho que quando encontramos problemas, devemos aprender a resumi-los para evitar cometer os mesmos erros na próxima vez.
A seguir estão alguns erros comuns que resumi em meu trabalho:
e dicas de soluções esperam ser úteis para iniciantes em CSS.
1. Verifique se há erros ortográficos nos elementos HTML ou se você esqueceu de fechar as tags.
Mesmo os melhores especialistas cometerão tais erros, porque quando a estrutura da página é muito complexa e aninhada em muitas camadas, é fácil perder a tag de fechamento. Principalmente para pessoas como eu, que estão acostumadas a escrever no Bloco de Notas, são mais propensas a cometer erros. Portanto, tenha cuidado ao escrever.
2. Verifique se o CSS está correto
Em geral, o erro mais comum em CSS é que os nomes dos atributos no estilo e no HTML são inconsistentes. Como resultado, o estilo foi escrito com clareza, mas não tem efeito.
3. Use o plano de fundo para encontrar a camada correspondente
Quando estamos depurando erros, especialmente ao depurar a compatibilidade do navegador, há muitas camadas aninhadas, que são propensas a desalinhamento e sobreposição. Neste momento, adicionamos cores de fundo às camadas principais para mostrar a diferença. Isso ajuda a eliminar erros.
4. Determine a localização do erro pelo método de eliminação
Quando escrevemos codificação CSS, geralmente fazemos um pouco e depois visualizamos. Se ocorrer um erro neste momento, podemos excluir a camada recém-adicionada até que ela seja exibida normalmente para determinar em qual camada está o problema.
5. O elemento float deve especificar o atributo width
Muitos navegadores apresentam bugs ao exibir elementos flutuantes com largura não especificada. Portanto, independentemente do conteúdo do elemento float, o atributo width deve ser especificado para ele.
6. Remova estilos duplicados
Muitas vezes declaramos estilos públicos no início e depois esquecemos quando escrevemos abaixo. Por exemplo, declaramos img{border:none;} no início
Então, quando encontrei a tag img, escrevi novamente. Esta situação deve ser evitada.
7. Preste atenção ao formato de codificação
Em circunstâncias normais, os formatos de codificação que usamos são: gb2312 e UTF8. Não há distinção entre bom e mau. Mas não os misture. Muitos editores usam o formato UTF8 como padrão.
8. Ordem de escrita dos estilos de link
Depois que muitas pessoas escrevem estilos de link, a cor após clicar não é a que desejam. Nesse momento, elas precisam verificar a ordem em que os estilos de link são escritos. A ordem correta de escrita deve ser: LVHA.