Box model distinguishes between two modes

<! DOCTYPE html > 
< html > 
    < head > 
        < meta charset = "utf-8" > 
        < title > Box model </ title > 
        < style > 
            div { 
                height : 200px ; 
                width : 200px ; 
                background : # 6A5ACD ; 
                padding : 20px ; 
            } 
            / *  default box-sizing value is content-box (standard mode), width == width of text content,
            So after setting padding, it will support large elements to make it bigger* / 
            .boder-box { 
                / * The total width is fixed, so the width of the content is reduced after setting padding * / 
                box-sizing : border-box ; / * Strange mode, also known as ie mode, is used to set the box model This mode of * / 
            } 
        </ style > 
    </ head > 
    < body > 
        < div class = "boder-box" > 
            You stand on the bridge to see the scenery, and the people watching the scenery see you in front of the window 
        </ div > 
        < div class = "content-box" > 
            You stand on the bridge to see the scenery, and the person watching the scenery looks at you in front of the window 
        </ div > 
    </body>
</html>