CSS定位装饰

一.定位

1.三种定位方式：标准流，浮动，定位；

2.定位使用步骤：

01.设置定位方式：position ；

	relative：相对原来的位置移动了，原来的显示模式特点不变，占一行还是一行；如果四个定位都有，以左，上为准；
	absolute：先找已经定位的父级，相对定位和绝对定位无所谓；如果有，以父级为准；如果父级没有定位，以浏览器窗口为参照进行定位；托镖，不占位置了，改变了显示特点，具备了行内块的特点，加宽度高度生效，如果不设置也没有内容尺寸据变成子了 。绝父相；
	子绝父相居中:
	位移居中：

position: absolute;
            left: 50%;
            margin-left: -150px;

transform: translate(-50%, -50%);

3.底部半透明遮罩效果

. mask{
            background-color: rgba(0,0,0, .5);
            position: absolute;
        }

4.固定定位

1.托镖，不占位置，具备行内块特点；

.box{
            position: fixed;
            left: 0;
            top: 0;
        }

5.元素的层级关系

1.定位>浮动>标准流
两个定位在一起，后定位的在最上边；使用z-index属性，取值是整数；取值越大越靠上；

二.装饰

1.vertical-align垂直对齐方式

浏览器遇到行内和行内块标签按文字处理，默认按基线处理

2.光标类型

cursor属性

.box{
            cursor: pointer;
            cursor: default;
            cursor: text;
            cursor: move;
        }

3.圆角边框

从左上角开始赋值，顺时针，没有赋值的看对角；

.box{
            border-radius: 10px 10px 20px 50px;
        }

画一个正圆：

.box{
            border-radius: 50%/100px;
        }

胶囊按钮：值变成高度的一半就可以了，盒子本身是长方形；

4.overflow溢出部分显示效果

 .box{
            overflow: hidden;
            溢出隐藏
            overflow: visible;
            溢出可见
            overflow: scroll;
            无论是否溢出，都加滚动条
            overflow: auto;
            根据是否溢出，自动显示
        }

5.元素本身隐藏

   visibility: hidden;
           /*不常用*/
            display: none;
            不占位隐藏
        }

6.元素整体透明度

取值0-1;

.box{
           opacity: 0.5;
        }

7.精灵图

将多张小图合并成一张大图；减少发送次数，减轻服务器的压力，提高页面加载速度；
步骤：1.设置盒子大小等于小图；2.小图设置为盒子的背景；精灵图的标签都用行内标签 span，b，i，记得转换display：inline-block；3.修改背景图位置；