11.16
定位拓展
1、绝对定位中的盒子居中问题
不能通过 margin：0 auto 进行水平居中，
需要计算方式实现
水平居中
步骤1：left：50%；
步骤2：margin-left：-盒子自己宽的一半
垂直居中
步骤1：top50%
步骤2：margin-top:-盒子自己宽的一半
2、不论什么元素，使用 固定/绝对定位 后都可以直接设置宽高
3、脱标的盒子不会外边距塌陷
4、固定/绝对定位 都会完全压住下面的盒子
元素的显示与隐藏
display：
显示与隐藏
display：block
显示隐藏
display:none
隐藏对象
隐藏的元素不再占有原来位置
visibility
visibility：visible
元素可视
visibility：hidden
元素隐藏
隐藏的元素继续占有原来的位置
overflow
overflow：visible
不剪切内容，也不添加滚动条
overflow：hidden
超出盒子内容隐藏
overflo：scroll
不管内容是否超出，有滚动条
overflow：auto
内容超出才有滚动条，不超出没有
CSS的其他技巧
1、精灵图
将多张小图片整合到一张大图片
使用：①利用背景图片插入精灵图
②用background-position移动精灵图到指定位置
精灵图一般都是向左和向上移动，因为浏览器坐标，一般移动数值都是负值
2、鼠标样式
cursor
cursor：default
默认鼠标样式
pointer
小手
text
文本
move
拖动时鼠标样式
note-allowed
禁止时鼠标样式
3、输入框删除外框
outline：none
4、文本域取消拖拽
resize：none
5、行内元素的对齐方式
vertical-align
top
middle
baseline（默认，基线对齐）
bottom
6、css三角制作
步骤：
1、将盒子宽和高设置为0，利用边框产生四个三角
2、将其他3个不用的三角设置为透明transparent
7、css制作省略号
步骤：
1、让文字一行显示（white-space：nowrap）
2、将多余的文字隐藏掉（overflow：hidden）
3、将隐藏的文字用省略号代替（text-overflow：ellipsis）
8、css滑动门
原理：用a实现左部背景图，span实现右部背景图
9、css字体图标使用
阿里字体图标库网站
下载好图标代码后，用link将图标css文件引入HTML
PS的基本操作
常规操作
按住空格键，可以拖动整个视图
Ctrl+R可以打开标尺，右击标尺可以选择单位
用选框工具可以测量大小
切图
用切片工具操作
图层
ctrl+e合并图层
cutterman插件
在窗口-拓展里面打开这个插件，直接点要的图，导出
|
