Elementos em nível de bloco (nível de bloco)
-
Monopólio
-
Altura, largura, margem externa e margem interna podem ser controladas
-
A largura padrão é 100% do contêiner (largura pai)
-
É um contêiner e uma caixa na qual você pode colocar elementos internos ou no nível de bloco.
-
Elementos no nível do bloco não podem ser colocados em p, especialmente p não pode ser colocado em div
-
h1 ~ h6, dt, são todos tags no nível de bloco do tipo texto e nenhum outro elemento no nível do bloco pode ser colocado neles.
-
Os elementos comuns do bloco são <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li> etc.
O rótulo é o elemento de bloco mais típico.
Em linha
-
Várias linhas podem ser exibidas.
-
A configuração direta de altura e largura é inválida.
-
A largura padrão é a largura do seu próprio conteúdo.
-
Os elementos embutidos podem conter apenas texto ou outros elementos embutidos.
-
Não é possível colocar mais links no link
-
Em casos especiais, os elementos no nível do bloco podem ser colocados em a, mas é mais seguro alternar o modo a-block para a.
-
Os elementos embutidos comuns são <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc., onde as tags são as mais comuns Elementos em linha. Alguns lugares também se tornam elementos inline
Elementos de bloco embutido
-
Está na mesma linha que o elemento de linha adjacente (bloco embutido), mas haverá um espaço entre eles. Uma linha pode exibir várias
-
A largura padrão é a largura do seu próprio conteúdo.
-
Altura, altura da linha, margem externa e margem interna podem ser controladas.
-
Existem várias tags especiais nos elementos inline - <img />, <input />, <td>, você pode definir os atributos de largura e altura e alinhamento neles, alguns materiais podem chamá-los de elementos de bloco inline.
| Modo de elemento | Disposição dos elementos | Definir estilo | Largura padrão | Contém |
|---|---|---|---|---|
| Elemento em nível de bloco | Somente um elemento no nível do bloco pode ser colocado em uma linha | Pode definir a altura da largura | 100% do contêiner | O nível do contêiner pode conter qualquer tag |
| Elemento em linha | Você pode colocar vários elementos em uma linha | Não é possível definir a largura e a altura diretamente | A largura do seu conteúdo | Acomoda texto ou outros elementos embutidos |
| Elemento de bloco embutido | Coloque vários elementos de bloco embutido em uma linha | Pode definir largura e altura | A largura do seu conteúdo |
Exibição de conversão do modo de exibição de rótulo
- Dentro da transição de bloco: display: inline;
- Inline: display: bloco;
- Blocos, elementos embutidos são convertidos em blocos embutidos: display: bloco embutido;
