今日所学内容
CSS的定位拓展
绝对定位的盒子居中问题：加了绝对定位的盒子不能通过margin:0 auto来实现水平居中，但是可以通过计算的方式实现水平和垂直居中
水平居中：先向左边偏移50%，再使用margin-left让盒子往左偏移自己宽的一半（负值）
垂直居中：先向下边偏移50%，再使用margin-left让盒子往下偏移自己宽的一半（负值）
不论是什么元素，使用绝对定位和相对定位后都可以设置宽高
脱标盒子不会触发外边距塌陷问题
固定定位和绝对定位都会完全压住下面的盒子（包括盒子中的文字等内容）
元素的显示与隐藏
display
block 除了可以转化为块级元素外，还可以将元素进行显示
none 隐藏对象，为常用的隐藏方式
display隐藏的元素不占有原来的位置
display隐藏的元素不占有原来的位置
visibility
visible 默认值，元素可视
hidden 元素隐藏
用visibility隐藏元素后，继续占有原来的位置
overflow
visibility 不剪切内容也不添加滚动条
hidden 将超出盒子的内容隐藏
scroll 不管盒子里的内容有没有超出盒子范围，都显示滚动条
auto 超出盒子的话就显示滚动条，不超出就不显示滚动条
CSS的其他技巧
精灵图
为什么要使用精灵图：将多张小图片整合到一张大的图片中返回给浏览器，可以减少对浏览器的重复请求，减轻服务器的压力
精灵图使用方法
利用背景图片的方式将精灵图插入
将精灵图移动到指定的位置即可，利用的属性是background-position，一般移动的数值都是负值，x轴向右为正，y轴向下为正，精灵图一般都是向上和向左移动，所以是负值
鼠标样式
属性：cursor
属性值
default 默认的鼠标样式，即箭头
pointer 小手的鼠标样式
text 文本鼠标样式
move 拖动时的鼠标样式
not-allowed 禁止鼠标样式
输入框删除外框
outline:none
文本域取消拖拽
resize:none
行内元素的对齐方式
vertical-aliign
top 顶线对齐
middle 中线对齐
bottom 底线对齐
baseline 基线对齐（默认值）
css的三角制作
原理：盒子的四个边框联结处是分别平分的样式
将盒子的宽高设置为0直接利用边框可产生四个三角形状，将边框的颜色设为透明，需要哪个三角单独设置哪个三角即可
省略号的处理
让文字显示一行不要换行：white-space:nowrap
将超过盒子的文字隐藏：overflow:hidden
将隐藏的文字用省略号代替：text-overflow:ellipsis
css的滑动门
字体图标
从icon-font导入图标代码，用link引入
PS的基本操作
在文件里打开相应的psd图片
ctrl+r打开标尺，右击标尺选择单位
ctrl+加号放大，ctrl+减号缩小
用选框工具测量大小
空格键 拖动视图
|
