Este artigo registra principalmente o seguinte conteúdo:
1. Três modos de exibição comuns em
html e sua conversão 2. Três maneiras de escrever CSS
1. Três modos de exibição e sua conversão
1 Três modos de exibição
- Modo de exibição em nível de bloco: defina a largura e a altura para funcionar e ocupe uma única linha. Quando uma largura fixa não é definida, é tão larga quanto seu elemento pai. O elemento correspondente é um elemento de bloco . Elementos de bloco comuns são: tag <div> </div> , tag <h1-h6> </h1-h6>, tag <p> </p>, tag <hr> </hr>, tag <ul> </ul>, tag <ol> </ol>, tag <dl> </dl>, tag <dt> </dt>, tag <dd> </dd>, tag <form> </form>, tag <body> </body>, <html> </ html> tag
- Modo de exibição embutido (embutido): definir a largura e a altura não funciona, pode haver vários em uma linha, alinhados ao longo da linha de base do texto, a largura e a altura são suportadas pelo tamanho do conteúdo e não podem ser centralizadas diretamente pelo alinhamento de texto; se você precisar centralizar , Você precisa colocar a tag <div> </div> fora, definir o centro de <div> </div>, o elemento correspondente é o elemento embutido (embutido) , os elementos embutidos comuns são: <span> </span> Tags, tags <a> </a>, tags <b> </b>, tags <strong> </strong>, tags <i> </i>, tags <em> </em>, <u> tag </u>, tag <ins> </ins>, tag <s> </s>, tag <del> </del>
- Modo de exibição de bloco em linha: defina a largura e a altura para funcionar, pode haver vários em uma linha, alinhados ao longo da linha de base do texto, e não podem ser centralizados diretamente pelo alinhamento de texto; se você precisar centralizar, será necessário colocar uma tag <div> </div> na parte externa Defina o centro de <div> </div>, e o elemento correspondente é o elemento de bloco embutido . Os elementos de bloco embutido comuns são: <img> </img> tags, tags no formulário
Img pode causar confusão na composição, consulte este artigo para obter detalhes.
2 Conversão de três modos de exibição
- Outros modos de exibição são convertidos para o modo de exibição de bloco embutido e definidos da seguinte maneira no estilo css: display: bloco embutido;
- Outros modos de exibição são convertidos em modos de exibição em nível de bloco e configurados da seguinte forma no estilo css: display: block;
Três, três maneiras de escrever CSS
- Estilo inline: escreva diretamente na tag correspondente, é muito conveniente escrever, código html e css são misturados, o acoplamento é muito alto, é muito problemático manter o código e é basicamente desnecessário no trabalho
<div style="width: 100px;height: 100px;background: red;">盒子</div>
- Embedded: escrito na tag <head> </head> do arquivo html, a escrita é relativamente simples, o código html e css é relativamente separado, o acoplamento é baixo, a manutenção do código é mais conveniente e ocasionalmente é usado no trabalho
<style type="text/css">
h1{
color:red;
}
</style>
- Tipo de cadeia externa: escreva diretamente no novo arquivo css, use a tag <link> na tag <head> </head> para chamar, não há necessidade de escrever a tag <style> </style>, a escrita é relativamente problemática, código html e css Separação absoluta, acoplamento extremamente baixo, código de fácil manutenção e frequentemente usado no trabalho.
<link rel="stylesheet" type="text/css" href="one.css"/>
Se houver um erro, sinta-se à vontade para corrigi-lo; se você tiver alguma dúvida, deixe uma mensagem para discussão.