今日学习内容
定位的拓展
1.绝对定位的盒子居中问题
加了绝对定位的盒子，不能通过margin：0 auto；进行水平居中，但是可以通过计算的方式实现
水平居中：
先将盒子移动左边偏移50% left：50%
使用margin-left让盒子往左偏移自身宽度的一半
垂直居中
将盒子移动下偏移50%
使用margin-top让盒子往下偏移自身高度一半
2.不论什么元素，在使用固定或绝对定位之后都可以设置宽高
3.脱标的盒子，不会出现外边距塌陷的问题
4.固定定位和绝对定位都会完全压住下面的盒子
元素的显示与隐藏
display显示与隐藏
display：block 除了转化功能 还可以将元素显示出来
display：none 隐藏对象
display来隐藏元素时，隐藏元素不再占有原来位置
visibility 显示隐藏
visibility：visible 元素可视
visibility：hidden 隐藏
隐藏后，继续占原来的位置
overflow 溢出的显示与隐藏
overflow：visible；不剪切内容，也不添加滚动条
overflow：hidden；将超出盒子的内容给隐藏掉
over：scroll；不管盒子里的内容有没有超出盒子的范围，都显示滚动条
overflow：auto；超出显示滚动条 不超出就不显示
CSS的其他技巧
精灵图
将多张小图片整合到一张大的图片中返回给浏览器，可以减少对服务的重复请求，以减轻服务器的压力
使用方法：
利用背景图片的方式来将精灵图插入background-img ul（）
将精灵图移动到指定位置即可，利用的属性是background-position，一般移动的数值都是负值
以坐上角为0，0 向右为正 向下为正
鼠标样式
属性
cursor
属性值
default 默认
pointer 小手鼠标样式
text 文本鼠标样式
move 拖动时的鼠标样式
not-allowed 禁止鼠标样式
行内元素的对齐方式
vertical-algin：baseline（基线对齐）
vertical-algin：bottom（底线对齐）
vertical-algin：middle（中线对齐，给图片加）
vertical-algin：top（顶线对齐）
删除输入外框
outline：none；
文本域取消拖拽
resize：none；
css的三角制作
width：0
height：0
border：px solid transparent；
border-top-color：red
省略号的处理
1）让文字不换行
white-space：nowrap；
2）将超出部分隐藏掉
overflow：hidden
3）将隐藏文字用省略号代替
text-overflow:ellipsis
css的滑动门
ps的基本操作
切图
|
