Lembro-me de uma pergunta feita pelo entrevistador durante a entrevista de emprego anterior: quais são os elementos da indústria e qual é a diferença entre eles e elementos no nível do bloco? Esta é uma pergunta de entrevista muito básica, mas muitos iniciantes geralmente se concentram apenas na semântica do rótulo e ignoram as características dos rótulos dentro e do nível do bloco. Portanto, é muito provável que as perguntas acima não possam ser respondidas ou respondidas incompletamente.
Os elementos em linha comuns em HTML são:<pan>, <a>, <mg>, <gut>, <sexttarea>, <select>, <breting>
Ele também inclui alguns elementos de texto como: <br>, <b>, <strong>, <pup>, <su>, <i>, <em>, <l>, <u>, etc.
Se você responder apenas a <mpan> e <MG>, seria irracional.
Os elementos comuns em nível de bloco em HTML são:<div>, <table>, <form>, <p>, <ul>,
<H1> ...... <H6>, <HR>, <pre>, <deede>, <Center>, <arquee>, <lockQuote>, etc.
Se você responder apenas <div>, seria irracional.
Então, qual é a diferença entre eles?Elementos no nível do bloco
1. Sempre comece com uma nova linha, ou seja, cada elemento em nível de bloco ocupa uma linha e é organizada verticalmente para baixo por padrão;
2. Altura, largura, margem e preenchimento são todos controláveis, com configurações eficazes e efeitos de margem;
3. Quando a largura não é definida, o padrão é 100%;
4. Os elementos no nível do bloco podem conter elementos no nível do bloco e elementos em linha.
· Elementos em linha
1. Está na mesma linha que outros elementos, ou seja, os elementos da linha e outros elementos da linha serão dispostos em uma linha horizontal;
2. A altura e a largura são incontroláveis e as configurações são inválidas e determinadas pelo conteúdo.
A margem de definição é eficaz à esquerda e à direita, com efeito de margem;
A margem de configuração suportará o espaço para cima e para baixo não produzirá efeitos de margem (ou seja, a margem/parte inferior tem valores no modelo da caixa, mas não há efeito de margem na página).
Definir o preenchimento para a esquerda e a direita é eficaz. A configuração de preenchimento para cima e para baixo aumentará o espaço, mas não produzirá um efeito de margem (o mesmo que acima).
O efeito de preenchimento é mostrado o seguinte:
<! Doctype html> <html> <head> <meta charset = utf-8> </head> <yoy> span {borda: 1px vermelho sólido; preenchimento: 10px;} div {borda: 1px azul sólido;} </style> <body> <div> elemento </div </span> em span- spany- line; elemento </div> </body> </html>3. De acordo com o conceito de semântica do rótulo, é melhor incluir apenas elementos em linha e não elementos no nível do bloco.
ConverterObviamente, as características entre elementos no nível do bloco e elementos em linha podem ser convertidos um ao outro. O HTML pode dividir elementos em três tipos: elementos na fila, elementos de bloqueio e elementos de bloco na linha.
Use o atributo de exibição para converter os três em conversão arbitrária:
(1) exibição: embutido; converter em elementos embutidos;
(2) exibição: bloco; converter em elementos de bloqueio;
(3) exibição: bloco embutido; converter em elementos de bloco embutido.
Os elementos de bloco em linha combinam as características dos elementos em linha e dos elementos em linha:(1) Se o embrulho de linha não for embrulhado automaticamente, ela será organizada em uma linha horizontal com outros elementos de linha;
(2) altura, largura, margem e preenchimento são todos controláveis, com configurações eficazes e efeitos de margem;
(3) O arranjo padrão é da esquerda para a direita.
Este é o fim deste artigo sobre os detalhes de quais são as diferenças entre os elementos HTML e os elementos no nível do bloco. Para mais elementos HTML e elementos de nível de bloco, procure artigos anteriores do Wulin.com ou continue a navegar nos artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!