Modo de visualización de elementos
Definición del modo de visualización de elementos
Modo de visualización de elementos: de qué manera se muestra la etiqueta del elemento.
Bloques y elementos en línea
Elemento de bloque
<h><p><ul><ol><div>
Una sola línea
Se pueden controlar la altura, el ancho, el margen exterior y el margen interior.
El ancho predeterminado es el contenedor (100% del nivel principal)
Es un contenedor o caja, y se pueden colocar elementos a nivel de bloque
Los elementos a nivel de bloque no se pueden colocar en clases de texto, como p / h
elementos en línea (elementos en línea)
En líneas adyacentes Una línea puede ocupar varios elementos
La configuración de alto y ancho no es válida
El ancho predeterminado es su propio ancho
Acomodar texto y otros elementos en línea de manera inteligente
Los enlaces ya no se pueden vincular
En especial casos a se puede colocar en elementos de nivel de
bloque elementos de bloque en línea
<img/>,<input/><td>
Puede haber varias líneas, pero hay espacios.
El ancho predeterminado es él mismo
Se pueden configurar el ancho, la altura de la línea y el margen.
Conversión de modo de visualización de elementos
Conversión del modo de visualización del elemento:
Uso: aumenta el rango de disparo de un
Pantalla: bloque
Pantalla: en línea
Pantalla: bloque en línea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式的转换</title>
<style>
/* div是块元素，span是行内元素，a是行内元素 */
.div1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.div2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: inline;
}
.a1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.a2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
display: block;
}
.span1 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 100px;
/* 盒子宽 */
}
.span2 {
background-color: gold;
/* 显示观察盒子的大小 */
width: 300px;
/* 盒子宽 */
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<div class="div2">div2</div>
<br/>
<a href="#" class="a1">a1</a>
<a href="#" class="a1">a1</a>
<br/>
<a href="#" class="a2">a2</a>
<a href="#" class="a2">a2</a>
<br/>
<span class="spa1">spa1</span>
<span class="spa1">spa1</span>
<br/>
<span class="spa2">spa2</span>
<span class="spa2">spa2</span>
<br/>
</body>
</html>
