En el atributo css, el valor de muchos atributos puede ser un porcentaje, como: ancho, alto, relleno, margen, tamaño de fuente, altura de línea, etc. Entonces, ¿a quién se refiere el cálculo de estos valores de porcentaje?
HTML ：
<div class = " parent " > <div class = " child " > 我 是 内容 <div> <div>
CSS ：
.parent { ancho: 500px; altura: 300 px; acolchado: 50px; fondo: # 999 ; margen - izquierda: 50 px; fuente - tamaño: 15px; línea - altura: 30px; borde: 1px sólido # 808080 ; } .child { ancho: 50 % ; altura: 20 % ; relleno -izquierdo: 10 % ; margen izquierdo: 10 % ; borde: 2px negro sólido;tamaño de fuente : 150 % ; altura de línea : 150 % ; fondo: naranja; }
En este momento, el ancho y el alto del cuadro de contenido del elemento div primario son 500 px y 300 px respectivamente; el ancho y alto del cuadro de relleno son 600 px y 400 px respectivamente (izquierda); las dimensiones de los elementos div secundarios se muestran a la derecha:
Cuando el elemento div secundario establece flotante a la izquierda, el resultado es el mismo que el anterior, es decir, el cálculo del porcentaje de cada atributo debajo de la flotante es el mismo que en el flujo de documentos normal;
Ahora configure el elemento div hijo en posicionamiento absoluto
CSS (solo agregue el tamaño relacionado con el posicionamiento absoluto, el valor restante del tamaño del atributo no ha cambiado):
.parent { position: relative; } .child { position: absolute; arriba: 20 % ; izquierda: 20 % ; }
El cambio de los valores de los atributos, como el ancho, la altura, los márgenes internos y externos de los elementos secundarios es el siguiente:
Del ejemplo anterior, se resume como sigue:
1. tamaño de fuente
El tamaño de fuente actual es igual al 100%;
二 、 altura de línea
El valor calculado de altura de línea es el valor de fuente actual multiplicado por este porcentaje. Tenga en cuenta que el valor de altura de línea es la diferencia entre el valor y el porcentaje, que no se explica en detalle aquí;
Tres, ancho
En el caso del flujo normal de documentos y la configuración flotante, el ancho relativo al cuadro de contenido del elemento padre se calcula como punto de referencia; cuando se posiciona absolutamente, el ancho relativo al cuadro de relleno se calcula como punto de referencia;
Cuatro, altura
La altura también admite porcentajes, pero todavía existe una clara diferencia entre este y el ancho: cuando el atributo de ancho del elemento primario es automático, el ancho del elemento secundario aún se puede establecer en porcentaje. Pero para la altura, siempre que el elemento secundario esté todavía en el flujo de documentos normal, si el atributo de altura del elemento primario es automático, la altura del elemento secundario se establece en un porcentaje que se ignorará. La especificación establece que si la altura del bloque contenedor no se indica explícitamente (es decir, la altura está determinada por el contenido), y el elemento no está en una posición absoluta, el valor calculado es automático. Y auto * 100/100 = NaN. Por lo tanto, si la configuración del porcentaje de altura es válida, se requieren las siguientes configuraciones:
cuerpo, html { altura: 100 % }
Los cálculos de altura anteriores son para flujo normal
、 、 Margen 、 relleno
Ya sea vertical u horizontal, es relativo al ancho del elemento primario. En el caso del flujo de documentos normal y la configuración flotante, es relativo al ancho del cuadro de contenido del elemento primario; cuando está absolutamente posicionado, relativo al ancho del cuadro de relleno;
Sexto, el valor porcentual izquierdo / derecho / inferior / superior del elemento de posicionamiento
El porcentaje de posicionamiento de ajuste superior e inferior se calcula de acuerdo con la altura del cuadro de relleno, y el porcentaje de ajuste de ajuste izquierdo y derecho se calcula de acuerdo con el ancho del cuadro de relleno.