Mi pregunta es tan simple pero bastante problemática para mí, si un div principal tiene relleno y el ancho del div del niño es del 100%, el ancho del div del niño siempre es más corto que el del padre. si cambio div hijo como div absoluto y div padre como relativo, el ancho del hijo es igual al del padre sin importar el relleno y el margen en los padres. Como esto:
.first { background-color: yellow; width: 100px; height: 100px; padding: 10%; position: relative; } .second { background-color: blue; position: absolute; width: 100%; height: 100%; opacity: 40%; } <div class="first">HI <div class="second"> HELLO </div> </div>Aunque la posición de los padres es totalmente relativa, entonces asume que Child depende totalmente de '.first'div. Entonces, supongo que ¿cómo se calcula el ancho del niño en este caso?
Cuando establece div secundario en posición absoluta (y el padre tiene un valor relativo de posición), este elemento se elimina del flujo de documentos normal. Además, si la propiedad izquierda se establece de forma diferente a 'auto' , es normal "ignorar" el relleno porque, de acuerdo con los documentos W3C, "estas propiedades especifican compensaciones con respecto al bloque contenedor del cuadro" (si es automático, entonces no debería ignorar el relleno , pero ancho: 100% "ignorará" el relleno y cuando el padre tenga 100px, el hijo también tendrá 100% de ancho). Vea también esto para responder qué es un bloque contenedor: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block .