* 3.定位
* 为什么需要使用定位
* 1.当我们滚动屏幕的时候，定位可以将盒子定位到屏幕的某个位置
* 2.某个元素可以自由的在盒子内移动位置，并且会压住盒子
* 定位的使用
* 1.定位=定位模式+边偏移定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
* 定位模式：
* 1.position:static（静态定位）默认定位方式，没有边偏移，基本不用
* 2.position:relative（相对定位）
* 1.相对于自己原来的位置进行移动
* 2.原来位置的标准流位置继续占用，后面的盒子仍然以标准流的方式来对待它
* 3.相对位置没有脱标
* 3.position:absolute（绝对定位）
* 1.如果没有祖先元素，或者祖先元素没有定位，则以浏览器为标准定位
* 2.如果祖先元素有定位（相对，绝对，固定位置），则以最近一级的祖先元素为参考点移动位置
* 3.相对定位不再占有原来的位置（脱标）
* 4.相对定位最大的作用就是给绝对定位当爹的（子绝父像）
* 4.position:fixed（固定定位）
* 固定定位是元素固定于浏览器可视区域的位置，主要的使用场景：在浏览器页面的某个元素需要固定在一个位置，不随屏幕的滚动而滚动
* 特点：
* 1.以浏览器的可是窗口为参照点移动
* 1.不跟父元素有任何关系
* 2.不随滚动条滚动
* 2.固定位置不再占有原来的位置（脱标）
* 5.position:stick(粘性定位)
* 粘性是为了网页中的元素达到一定的边偏移条件时，停止随屏幕滚动。
* 特点：
* 1.以浏览器的可是窗口为参照点移动
* 2.固定位置不再占有原来的位置（脱标）
* 图片起始距上边400px，图片滚动到浏览器上边50px时开始固定
* 定位总结
* 定位的叠放顺序
* 可以使用z-index来控制盒子的先后顺序（z轴）
* 数值可以是正整数，负整数，0，默认时auto，数值越大，越靠上
* 数值相同，则按书写顺序，后来居上
* 数字后面不加单位
* 只有定位的盒子才有z-index属性
* 定位的拓展
* 绝对定位的盒子居中
* 加了绝对定位的盒子，不能通过margin：0，auto水平居中，但是可以通过计算来实现，垂直居中同理：
* 定位的特殊性
* 1.行内元素添加绝对定位或者固定定位，可以设置高度和宽度
* 2.块级元素添加绝对定位或者固定定位，如果不设置宽高，默认大小时内容本身大小
* 脱标的盒子不会出发外边距塌陷问题
* 浮动、绝对/固定定位，元素都不会触发外边距塌陷问题
字体图标的使用
* iconfont-阿里巴巴矢量图标库
元素的显示和隐藏
*
display的显示与隐藏
*
属性值
*
none隐藏对象
*
block时显示元素
*
display隐藏元素之后不占原来的位置，后期常与JS连用
*
visibility显示与隐藏
*
属性值
*
visible元素可见
*
hidden元素隐藏
*
visibility：hidden隐藏元素时，元素仍占原来位置
*
overflow溢出显示与隐藏
*
overflow:visible；不剪切，也不添加滚动条
*
overflow：hidden；将超出盒子的内容隐藏
*
overflow：scroll；不管盒子里内容有没有超过父盒子的高度，都显示滚动条
*
overflow：auto；超出盒子的尺寸，才显示滚动条，不超出，不显示
CSS其他技巧
*
精灵图
*
将多张小图整合到一张大图上，避免重复请求，减轻服务器压力
*
精灵图的使用步骤
*
1.获取所需的小图标大小
*
2.设置一个盒子，盒子大小和小图标尺寸一致
*
3.将精灵图设置成盒子背景图片
*
4.利用background：position来调整图片位置，以显示我们所需的图标
*
鼠标样式
*
1.cursor：default；默认的鼠标样式
*
2.cursor：pointer；小手鼠标样式
*
2.cursor：text；文本鼠标样式
*
2.cursor：move；拖动时鼠标样式
*
2.cursor：no-allowed；禁止时鼠标样式
*
对齐标准方式
*
vertical-align为了让行内元素
*
文字的各个线的说明
*
1.vertical-align：baseline 基线对齐（默认）
2. vertical-align：bottom 底线对齐
3.vertical-align：middle 中线对齐
4.vertical-align：top 顶线对齐
*
CSS三角制作
*
1.设置边框宽度，样式，颜色设置为透明
*
2.将所需要的边框颜色，设置成需要的颜色即可
*
CSS省略号的制作
*
1.将文字强制一行展示
*
2.将超出盒子的文字切掉overflow：hidden
*
3.将切掉的部分以用省略号表示
|
