Sem a ajuda de CSS, os elementos do bloco serão organizados uma linha por vez. Com CSS, podemos alterar o modo de layout padrão deste HTML e colocar os elementos do bloco onde desejar. Em vez de começar estupidamente uma nova linha todas as vezes. Deve-se ressaltar que a tag table também é um tipo de elemento de bloco O layout baseado em tabela e o layout baseado em CSS analisam esses dois layouts da perspectiva de usuários comuns (excluindo pessoas com deficiência visual, cegos, etc.), exceto para pessoas com deficiência visual, cegos, etc. velocidade de carregamento da página Exceto pela diferença, não há outra diferença. No entanto, se um usuário comum clicar inadvertidamente no botão visualizar o código-fonte da página, a diferença entre os dois será muito grande. O código-fonte da página de layout CSS projetado com base em bons conceitos de reconstrução pode, pelo menos, permitir que usuários comuns sem experiência em desenvolvimento web entendam rapidamente o conteúdo. Dessa perspectiva, o código de layout CSS deve ter uma experiência estética melhor.

Você pode pensar no elemento div do contêiner de bloco como caixas ou, se já brincou com o recorte, será mais fácil de entender. Primeiro recortamos os artigos necessários de vários jornais e revistas. Cada pedaço de conteúdo cortado é um bloco. Em seguida, colamos esses pedaços de papel em um novo pedaço de papel em branco de acordo com nossa intenção de layout. Isso formará seu próprio resumo exclusivo. Como extensão da tecnologia, o design do layout web segue o mesmo padrão.

Os elementos inline são geralmente baseados em elementos básicos no nível semântico. Os elementos embutidos só podem conter texto ou outros elementos embutidos, e o elemento embutido comum "a" é.

Elemento de bloco (elemento de bloco) e elemento embutido (elemento embutido) são conceitos na especificação HTML. A diferença básica entre elementos de bloco e elementos inline é que os elementos de bloco geralmente começam em uma nova linha. Quando o controle CSS é adicionado, essa diferença de atributo entre elementos de bloco e elementos embutidos não se torna mais uma diferença. Por exemplo, podemos adicionar um atributo como display:block ao elemento inline cite, para que ele também tenha o atributo de iniciar sempre em uma nova linha.
O conceito básico de um elemento mutável é que ele precisa determinar se o elemento é um elemento de bloco ou um elemento embutido com base no contexto. Os elementos variáveis ​​ainda pertencem às duas categorias de elementos acima. Uma vez que o contexto determina sua categoria, ele deve seguir as regras dos elementos de bloco ou elementos embutidos. Consulte o texto completo para classificação aproximada dos elementos.

ps: Em relação ao nome chinês do elemento embutido, existem muitos tipos de elementos embutidos, elementos embutidos, elementos embutidos e elementos embutidos. Basicamente não existe uma tradução unificada, basta chamá-la do que quiser. Além disso, ao falar sobre elementos inline, pensaremos em um atributo de exibição chamado display:inline; esse atributo pode corrigir o famoso problema da borda flutuante dupla do IE (margem flutuante).
elemento de bloco
* endereço - endereço
* blockquote - citação em bloco
* centro - bloco de alinhamento central
* dir – listagem de diretório
* div - o nível de bloco comumente usado também é a tag principal do layout css
* dl - lista de definições
* fieldset - grupo de controle de formulário
* formulário - formulário interativo
* h1 - Título
* h2 - legenda
*h3 - Título de nível 3
*h4 - Título de nível 4
*h5 - Título de nível 5
*h6 - Título de nível 6
*hr - divisor horizontal
* isindex – prompt de entrada
*menu - lista de menu
* noframes - conteúdo opcional de frames, (exibe este conteúdo de bloco para navegadores que não suportam frames
*noscript -) Conteúdo de script opcional (exibir este conteúdo para navegadores que não suportam script)
*ol - formulário de classificação
*p - parágrafo
* texto pré-formatado
* mesa - mesa
* ul - elemento embutido de lista não classificada (elemento embutido)
* a - ponto de ancoragem
*abbr - abreviatura
*acrônimo – palavra inicial
* b - negrito (não recomendado)
* bdo - substituição de bidi
* grande - fonte grande
* br - quebra de linha
*citar - citar
* código - código de computador (obrigatório ao citar o código-fonte)
* dfn - define campos
*em - ênfase
* fonte - configurações de fonte (não recomendado)
* eu - itálico
* img - imagem
* entrada - caixa de entrada
* kbd - define o texto do teclado
* rótulo - rótulo da tabela
*q - citação curta
* s - traço (não recomendado)
* samp - define código de computador de amostra
* selecionar - seleção de item
* pequeno - texto em fonte pequena
* span - contêiner embutido comumente usado para definir blocos dentro do texto
* ataque - linha central
*forte - ênfase em negrito
* sub - subscrito
* sup - sobrescrito
* textarea - caixa de entrada de texto multilinha
*tt - texto telex
* você - sublinhado
* var - define um elemento variável variável - um elemento variável é um elemento de bloco ou um elemento embutido dependendo do contexto.
* miniaplicativo - miniaplicativo java
* botão - botão
* del - excluir texto
* iframe - quadro embutido
* ins - texto inserido
* mapa - bloco de imagem (mapa)
* objeto - objeto objeto
* script - script do cliente