El modelo de caja distingue entre dos modos

<! DOCTYPE html > 
< html > 
    < head > 
        < meta charset = "utf-8" > 
        < title > Box model </ title > 
        < style > 
            div { 
                height : 200px ; 
                width : 200px ; 
                background : # 6A5ACD ; 
                padding : 20px ; 
            } 
            / * El valor de tamaño de cuadro predeterminado es content-box (modo estándar), ancho == ancho de contenido de texto,
            Entonces, después de configurar el relleno, admitirá elementos grandes para hacer que todo sea más grande * / 
            .boder-box { 
                / * El ancho total es fijo, por lo que después de configurar el relleno, el ancho del contenido se reduce * / 
                box-sizing : border- box ; / * Strange mode, también conocido como ie mode, es el modo utilizado para configurar el modelo de caja * / 
            } 
        </ style > 
    </ head > 
    < body > 
        < div class = "boder-box" > 
            Te paras en el puente para ver el paisaje , La persona que mira el paisaje te mira frente a la ventana 
        </ div > 
        < div class = "content-box" > 
            te paras en el puente para ver el paisaje, y la persona que mira el paisaje te mira en la ventana 
        </ div> 
    > </ Html > </ cuerpo