【HTML5 CSS3】盒子的大小

 <div class="box1"></div>
    <style>
        /* 默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定 */
        .box1{
            width: 100px;
            height: 100px;
            background-color:#bfa;
            /* 内边距四边都多了10 */
            padding: 10px;
            border: 10px blue solid;
            /* box-sizing   用来设置盒子尺寸的计算方式
            属性
            border-box 此时box1为100*100，宽高用于设置整个盒子可见框的大小
            content-box 此时box1为140*140，宽高用于设置内容区大小*/
            box-sizing: border-box           
        }
    </style>