Con respecto a la contexto de formato conocido a nivel de bloque, el contexto se formatea más complejo y difícil de entender. A diferencia de los elementos en línea como elementos de bloque ir directamente, una línea elemento de bloque, que otros elementos de bloque pueden estar dispuestos secuencialmente hacia abajo en la dirección vertical. Inline diferentes elementos, los elementos se pueden mostrar en varias líneas en una fila, a continuación, en una fila, varias filas dentro del elemento es la forma en la disposición, lo siguiente será tratar de explicar.

La construcción de la línea

En primer lugar vamos a entender lo que constituye una línea de cosas:

<p>
    xem
    <span>
    	行内框
    </span>
    <img style="width: 40px; height: 40px; margin: 10px;" src="" />
</p>

Tiene una parte superior 匿名文本, una 行内框es no sustituido inline elementos <span>, en sustitución de elementos en una fila<img />

Anónimo texto XEM

Medios que ningún elemento se envuelve directamente expuesto al elemento padre en el texto.

Estos textos deben dar cuenta de la mayor parte del lugar? De hecho, cada personaje tendrá un texto cuadro largo (ver Figura: 1-1), y luego em caja con caja de em múltiple en la formación de un área de contenido (véase la Figura 1-1). Así, tratamos de llegar a la cima de este texto anónimo, por supuesto, no la papelera, siguen a continuación.

cuadro largo

caja em se define en la fuente, y los mismos valores de la altura y el tamaño de fuente.

Figura 1-1

Las cajas en línea

Dentro de la línea A tal fila elemento span formado marco interior (se formará texto anónimo), la zona interior contenido línea de trama es una etapa de formación de los contenidos de acuerdo con lo anterior área anónimo más el texto espaciado de línea se forma. Hubo un espaciado de línea.

Espaciado de línea y de dónde vienen? Alto de fila línea de paso (line-height) obtenido restando la altura del área de contenido.

Obtenemos el espaciado de línea, y la línea de espaciamiento dividido por dos, regiones, respectivamente superior e inferior en el contenido de las filas formadas marco interior (véase la figura 1-2).

Figura 1-2

elementos img

elemento img es un elemento de reemplazo, el elemento se forma un área de contenido de reemplazo, y la fila no se puede aplicar al elemento de alta sustitución, el elemento se sustituye a la cosa espaciado de línea no existe. Vuelva a colocar la altura del área de contenido del elemento se calcula vosotros? Calculan y elementos no reemplazados calculan de diferentes maneras, no sólo su relleno anchura y la altura propia Harajuku valor de sustitución comprende además, frontera, y el margen. Todos sabemos alternativa no perpendicular margen elemento de dirección, el relleno y la posición frontera no se explica, pero los elementos son alternativamente posición ocupamos (véase la figura 1-3).

Figura 1-3

caja de línea

Hay una caja de línea por encima de varios elementos (que no se refieran a la etiqueta), luego la forma de calcular la altura de la caja de línea ocupada? Línea de cálculo de caja, la línea de base y la caja de línea de puntos, caja de línea más alto y el punto más bajo a distancia puede ser.

Por esta descripción se puede ver, la línea de altura solamente representa la altura mínima de una línea, la altura de la línea no es una (véase la figura 1-4).