疯狂H5讲义 - 大小、定位、轮廓相关属性

本文链接：https://blog.csdn.net/qq_27905183/article/details/53087105

1.CSS3新增box-sizing属性，用于指定当前元素所设置的width和height属性是指定哪一块，目前只有firefox浏览器支持该属性，因此需要添加-moz-前缀使用：

1.content-box：指定width和height设置的是内容区也就是content的宽度和高度
2.padding-box：指定width和height设置的是内容区加内边距区也就是content+padding的宽度和高度
3.border-box：指定width和height设置的是内容区加内边距区加边框区的宽度和高度
举个小例子：
<!Doctype html>
<html
    <head>
        <title>box-sizing属性</title>
        <meta http-equiv="author" content="chengxi" />
        <style>
            div{
                border: 3px solid green;
                padding: 10px;
                width: 200px;
                height: 100px;
            }
            #div1{
                /*指定width和height设置的是内容区的宽度和高度*/
                -moz-box-sizing: content-box;
                /*最终div1指定的div的content+border+padding ={width:200+10+3+10+3;height:100+10+3+10+3}*/
            }
            #div2{
                /*指定width和height设置的是内容区加内边距区的宽度和高度*/
                -moz-box-sizing: padding-box;
                /*最终div2指定的div的content+border+padding ={width：200+3+3；height：100+3+3}
            }
            #div3{
                /*指定width和height设置的是内容区加内边距区加边框区的宽度和高度*/
                -moz-box-sizing: border-box;
                /*最终div3指定的div的content+border+padding ={width：200px；height：100px}
            }
        </style>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>
</html>

2.定位相关属性：

position：设置对象的定位方式：
    absolute：允许该对象漂浮于页面之上，无须考虑其他内容的布局，已脱离文档流
    relative：仍然在正常的HTML流中，目标对象的位置将参照前一个对象的位置进行定位
    static：目标对象仅仅以页面作为参考系
z-index：设置目标对象的漂浮层的层序，该值越大，漂浮层越处于上面，只有当position=absolute/relative时才有效
top/left/bottom/right：设置目标对象相对于最近的一个具有定位设置的父对象的对应方向的偏移量

3.轮廓相关属性：主要用于让目标对象周围有一圈光晕效果

outline：可同时设置目标对象的轮廓的颜色、线型、线宽三个属性
outline-color：设置组件的轮廓颜色
outline-style：设置组件的轮廓线型，支持的属性值和border-style一样
outline-width：设置组件的轮廓宽度
outline-offset：设置组件的轮廓偏移的距离，也就是轮廓和边框之间的距离