盒模型两种模式区分 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒模型</title>
        <style>
            div{
                height: 200px;
                width: 200px;
                background: #6A5ACD;
                padding: 20px;
            }
            /* 默认的box-sizing的值为content-box(标准模式),width==文本内容的宽度，
            所以设置padding之后，会撑大块元素的 使其整体变大 */
            .boder-box{
                /* 总的宽度固定不变,所以设置padding之后减少的是content的宽度 */
                box-sizing: border-box;/* 怪异模式又名ie模式，设置盒模型就是用的这个模式 */
            }
        </style>
    </head>
    <body>
        <div class="boder-box">
            你站在桥上看风景，看风景的人在窗前看你
        </div>
        <div class="content-box">
            你站在桥上看风景，看风景的人在窗前看你
        </div>
    </body>
</html>

 

posted @ 2020-04-15 16:50  世界我快乐  阅读(292)  评论(0)  编辑  收藏  举报