Recuerdo una pregunta formulada por el entrevistador durante la entrevista de trabajo anterior: ¿Cuáles son los elementos de la industria y cuál es la diferencia entre ellos y los elementos a nivel de bloque? Esta es una pregunta de entrevista muy básica, pero muchos principiantes generalmente solo se centran en la semántica de etiquetas e ignoran las características de las etiquetas dentro y el nivel de bloque. Por lo tanto, es muy probable que las preguntas anteriores no sean respondidas o respondidas de manera incompleta.
Los elementos comunes en línea en HTML son:<span>, <a>, <img>, <input>, <xtexarea>, <select>, <label>
También incluye algunos elementos de texto como: <br>, <b>, <strong>, <up>, <sub>, <i>, <em>, <el>, <u>, etc.
Si solo responde <Span> y <IMG>, no sería razonable.
Los elementos comunes de nivel de bloque en HTML son:<div>, <table>, <form>, <p>, <ul>,
<h1> ...... <h6>, <hr>, <pre>, <dirección>, <center>, <marquee>, <ClankQuote>, etc.
Si solo responde <Viv>, no sería razonable.
Entonces, ¿cuál es la diferencia entre ellos?Elementos de nivel de bloque
1. Siempre comience con una nueva línea, es decir, cada elemento a nivel de bloque ocupa una línea y está dispuesto verticalmente hacia abajo de forma predeterminada;
2. Altura, ancho, margen y relleno son todos controlables, con configuraciones efectivas y efectos de margen;
3. Cuando el ancho no está configurado, el valor predeterminado es 100%;
4. Los elementos de nivel de bloque pueden contener elementos de nivel de bloque y elementos en línea.
· Elementos en línea
1. Está en la misma línea que otros elementos, es decir, los elementos en la línea y otros elementos en la línea se organizarán en una línea horizontal;
2. La altura y el ancho son incontrolables, y la configuración no es válida y determinada por el contenido.
El margen de ajuste es efectivo a la izquierda y a la derecha, con efecto de margen;
El margen de ajuste admitirá el espacio hacia arriba y hacia abajo no producirá efectos de margen (es decir, el margen de margen/fondo tiene valores en el modelo de caja, pero no hay efecto de margen en la página).
Poner el acolchado a la izquierda y a la derecha es efectivo. Establecer acolchado hacia arriba y hacia abajo hará que el espacio sea más grande pero no producirá un efecto de margen (igual que el anterior).
El efecto de relleno se muestra de la siguiente manera:
<! Doctype html> <html> <fead> <meta charset = utf-8> </head> <style> span {border: 1px sólido rojo; padding: 10px;} div {border: 1px sólido azul;} </ystye> <body> <div> elemento de nivel de bloque </div> <span> en línea de elemento </span> <span> en línea </syly> <body> de nivel de bloque de bloques </div> <span> elemento </div> </body> </html>3. Según el concepto de semántica de etiquetas, es mejor incluir solo elementos en línea y no elementos de nivel de bloque.
ConvertirPor supuesto, las características entre los elementos de nivel de bloque y los elementos en línea se pueden convertir entre sí. HTML puede dividir los elementos en tres tipos: elementos en la fila, elementos de bloque y elementos de bloque en la fila.
Use el atributo de pantalla para convertir los tres en conversión arbitraria:
(1) Pantalla: en línea; convertir a elementos en línea;
(2) Pantalla: bloque; convertir a elementos de bloque;
(3) Pantalla: bloque en línea; Convertir a elementos de bloque en línea.
Los elementos de bloque en línea combinan las características de los elementos en línea y los elementos en línea:(1) Si la envoltura de línea no se envuelve automáticamente, se organizará en una línea horizontal con otros elementos de línea;
(2) altura, ancho, margen y relleno son todos controlables, con configuraciones efectivas y efectos de margen;
(3) La disposición predeterminada es de izquierda a derecha.
Este es el final de este artículo sobre los detalles de cuáles son las diferencias entre los elementos HTML y los elementos a nivel de bloque. Para obtener más elementos HTML relacionados y elementos de nivel de bloque, busque artículos anteriores de wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!