CSS3中关于用户界面的几个属性可以帮助我们实现更方便的人机交互和控制；

　　resize　　/　　box-sizing　　/　　outline-offset;

　　resize:　　//本属性使用户可以直接通过鼠标拖拽来改变元素尺寸，需要配合overflow一起使用；

　　　　none　　/　　both　　/　　horizontal　　/　　vertical;

　　box-sizing:　　//此属性可以改变width和height的作用范围，进而影响到padding和border与宽高尺寸之间的关系；

　　　　content-box　　//内容盒，padding和border宽度都在元素width和height的范围以外；padding向外扩展；

　　　　border-box　　//边框盒，padding和border宽度包含在width和height范围以内；padding向内收缩；

　　outline-offset:　　//outline的向外偏移量；outline本身不占空间，默认紧挨着border；

　　　　　　　　　　　　//outline不一定就是矩形；

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            padding: 50px;
            border:20px solid blue;
            background: purple;
            margin:50px auto;
            resize: both;
            overflow: auto;
            outline:5px dashed yellow;
            outline-offset: 20px;
        }
        .contentBox{
            box-sizing:content-box;
        }
        .borderBox{
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="contentBox">content-box,width:200px;</div>
    <div class="borderBox">border-box,width:200px</div>
</body>
</html>