(2) Interpretación estándar de ancho, alto
(uno)
Primero, tenemos que entender:
(1) Para el atributo wdith, incluso si el ancho del elemento principal es automático (el valor predeterminado de ancho es automático), también se admite su porcentaje. Sin embargo, para el atributo de altura, si la altura del elemento principal es automático (el valor predeterminado de altura es automático), siempre que el elemento secundario en el flujo de documentos, el porcentaje se ignore por completo.
A continuación, hagamos una prueba primero.
Por ejemplo, queremos insertar una imagen de fondo para un div, como se muestra en el siguiente código
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
background-image: url('./images2/1.jpg') ; /* 插入一个背景图片 */
}
</style>
</head>
<body>
<div></div>
</body>
</html> Revisé a través de la barra de herramientas del navegador y descubrí que la imagen no aparecía. Pero el ancho tiene efecto (es decir, se admite el ancho: 100%), pero la altura no tiene efecto (es decir, la altura: 100% no es compatible), por lo que la altura de la imagen de fondo no tiene efecto, y la imagen de fondo no se puede mostrar. El cálculo del valor de altura aquí se explicará con más detalle en el punto 2 de este artículo (2)
(El ancho aquí puede cambiar según el zoom de la ventana del navegador, lo cual se explicará en el punto 2 de este artículo (2))
De hecho, tenemos que agregar un valor de altura válido a su cuerpo principal, como se muestra en el siguiente código
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
height: 300px;
}
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
/* 插入一个背景图片 */
background-image: url('./images2/1.jpg') ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Resultado: la imagen de fondo aparecerá en mosaico en el navegador.
Como se muestra en la imagen a continuación, puede encontrar que la altura de la imagen de fondo es consistente con la altura del cuerpo que configuramos. En este momento, la altura de la imagen de fondo se calcula como
100% * 300px (principal) = 300px
(El ancho aquí puede cambiar según el zoom de la ventana del navegador, lo cual se explicará en el punto 2 de este artículo (2))
Sin embargo, hay otra forma de colocar la imagen de fondo en mosaico, es decir, el siguiente código
(Tenga en cuenta que este ejemplo es un caso especial)
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
html,
body {
height: 100%;
}
div {
width: 100%; /* 这是 多余的，div本就独占一行，为了方便观察而写 */
height: 100%; /* 这是无效的 */
/* 插入一个背景图片 */
background-image: url('./images2/1.jpg') ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Debe ser tanto html como cuerpo. Agregar altura: 100% tendrá efecto. Si solo lo agrega al cuerpo, no tendrá efecto porque el cuerpo no tiene un valor de altura específico en este momento.
Resultado: Cubre toda la ventana
A continuación, continuamos explorando por qué el ancho admite el ancho: 100%, pero el alto no admite la altura: 100%.
(dos)
1. Después de un poco de práctica, encontraremos que para que el elemento en el flujo de documentos funcione, para que el valor de altura porcentual funcione, su padre debe tener un valor de altura que pueda tener efecto.
sigamos leyendo
2. La respuesta se da realmente en la especificación.
(1) La explicación de la altura es: si la altura del bloque contenedor no se especifica explícitamente (se puede entender que la altura está determinada por el contenido) y el elemento no está en una posición absoluta, el valor calculado es automático.
A partir de una explicación específica, la altura está determinada por el contenido. En la prueba anterior, si agrega contenido al div (como cambiar el div a <div>hello</div>), utilice height:100% sin agregar una altura a su cuerpo principal, y también tomará efecto y también se pueden mostrar imágenes de fondo.
A continuación, analicemos por qué falla la altura: 100%.
Es decir, si nuestro hijo establece la altura: 100%, pero el padre no establece una altura que pueda tener efecto, entonces la altura predeterminada del padre es automática y aparecerá lo siguiente:
Debes saber que los cálculos automáticos y porcentuales no se pueden calcular, por lo que
'automático' * 100 / 100 = NaN
Este también es un problema en el que la altura: 100% fallará.
(2) La explicación del ancho es: si el ancho del bloque contenedor depende del ancho del elemento, el diseño resultante no está definido en CSS2.1.
"Comportamiento indefinido" significa que la especificación no especifica qué hacer y el navegador puede actuar según su propio entendimiento.
(3) Por tanto, si lo analizas según la definición estándar, lo sabrás.
Si la altura es clara, es automática y, naturalmente, el cálculo del porcentaje de altura no tendrá ningún resultado. No existe tal declaración para el ancho, por lo que el ancho se basa en el valor calculado real del bloque contenedor como base para el cálculo del porcentaje.
Debido a que la especificación explica que el ancho depende del ancho del elemento, como el elemento <div>, ocupa una línea de forma predeterminada, por lo que usar ancho: 100% puede tener efecto, y si es un <span> etiqueta, luego ancho: 100 % tampoco es efectivo. También puede probar lo siguiente para saber si es verdadero o falso.
......
De hecho, para los atributos de alto y ancho, o para la mayoría de los atributos CSS, si desea comprender y analizar un atributo en profundidad, todavía hay muchos artículos sobre él y debe continuar practicando para comprenderlo y dominarlo gradualmente. el contenido.