CSS3盒模型也就是指 box-sizing 属性

box-sizing主要有三个值，分别为content-box（默认值）|| border-box || padding-box。

box-sizing:content-box,border和padding不计算在width内

box-sizing:padding-box,padding计算在width内，border不计算在width内（暂时只有火狐支持，前缀加入-moz-）

box-sizing:border-box,border和padding都计算在width内

outline外轮廓

在此顺便提一下outline属性，outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓线不会占据空间，也不一定是矩形

outline简写属性在一个声明中设置所有的轮廓属性,包括outline-color outline-style outline-width,与border一样，顺序可以任性调换。

outline不包含在box-sizing内。

    <style>
        .div1{
            width:200px;
            height:200px;
            background-color:pink;
            box-sizing:content-box;
            padding:50px;
            border:20px solid gold;
            color:white;
            margin:0 auto;
            outline:5px solid black;
        }
        .div2{
            width:200px;
            height:200px;
            background-color:red;
            -moz-box-sizing:padding-box;
            box-sizing:padding-box;
            padding:50px;
            border:20px solid gold;
            color:white;
            margin:0 auto;
            outline:5px solid black;
        }
        .div3{
            width:200px;
            height:200px;
            background-color:blue;
            box-sizing:border-box;
            padding:50px;
            border:20px solid gold;
            color:white;
            margin:0 auto;
            outline:5px solid black;
        }
    </style>
    <div class="div1">我是div我是div</div>
    <div class="div2">我是div我是div</div>
    <div class="div3">我是div我是div</div>

    
    
我是div我是div
    
我是div我是div
    
我是div我是div