SOURCE

<div class="div1">deepstone</div>
<div class="div2">deepstone</div>
<div class="div3">deepstone</div>
<div class="div4">deepstone</div>
<div class="div5">border-box 边框盒子区（包含边框，内边距和内容盒子）的宽度和高度
    content-box 是默认值，设定内容盒子区的宽度和高度
    padding-box 内边距盒子区（包含内边距和内容盒子）的宽度和高度。*/
    </div>

[class]{
    margin: 10px;
}
.div1{
    width:200px;
    height:50px;
    border:1px solid green;
}
.div2{
    width:200px;
    height: 50px;
    padding: 20px;
    border:1px solid green;
}
.div3{
    width:200px;
    height: 50px;
    border: 1px solid yellow;
    padding: 10px;
}
.div4{
    width: 200px;
    height: 50px;
    border:1px solid yellow;
    padding: 10px;
    /* border-box 边框盒子区（包含边框，内边距和内容盒子）的宽度和高度
    content-box 是默认值，设定内容盒子区的宽度和高度
    padding-box 内边距盒子区（包含内边距和内容盒子）的宽度和高度。*/
    box-sizing: border-box;
    /*outline轮廓 指的是紧邻border外的边线*/
    outline: lightblue dotted 2px;
    /*outline-offset 用于设定outline边线与border边框的距离*/
    outline-offset: 5px;
}
.div5{
    color: gray;
    width:200px;
    height: 50px;
    border: 3px solid red;
    /*设置内容超出范围时的显示方式overflow
    overflow-x（或overflow-y）或直接overflow
    overflow-x(overflow-y):visible | hidden | scroll | auto */
    overflow: hidden;
}