一.今日内容：
定位扩展
1.绝对定位的盒子居中问题
加了绝对定位的盒子不能通过margin：（）auto；进行水平居中，但是可以通过计算的方式实现水平和垂直居中。
水平居中的方法
先将左边偏移50%；使用margin-left让盒子往左偏移自己宽的一半
2.不论是什么元素，使用固定定位或者绝对定位之后都可以直接设置宽高
3.脱标的盒子不会触发外边距塌陷的问题。
4.固定定位和绝对定位都会完全压住下面的盒子
元素的显示与隐藏
display显示与隐藏（常用的隐藏元素属性）
display：block；除了转化为块元素的功能外，还能将元素给显示出来；
display：onoe；
visibility显示隐藏
visibility：visible 元素可视
visibility：hidden 元素隐藏
如果隐藏元素之后不占位置就用dislay，如果要占位置就用visibility
overflow溢出的显示与隐藏
overflow：visible不剪切内容，也不添加滚动条。
overflow：hidden将超出盒子的内容给隐藏掉。
overflow：scroll
overflow：auto
CSS的其他技巧
精灵图 利用background-position将精灵图移动1到指定的位置
鼠标样式 属性cursor 属性值是default默认的鼠标样式
pointer小手的鼠标样式
text 文本鼠标的样式
move 拖动时的鼠标样式
not-allowed 禁止鼠标样式
输入框删除外框
outline：none；
文本域取消拖拽
resize：none；
行内元素的对齐方式
vertical-align
属性值：top顶线对齐
middle中线对齐
baseline 基线对齐
bottom底线对齐
css的三角制作
css的省略号号制作
1.让文字一行显示
2.将多余的文字隐藏掉
3.将隐藏的文字用省略号代替
css的滑动门
用a标签实现左部背景图
用span标签实现右部的背景图
css字体图标的使用
1.登录阿里字体图标库
https://www.iconfont.cn/
2.找到字体图标将需要的字体图标添加至购物车
3.将购物车的字体图标下载下来
4.将下载的压缩包解压到项目目录下
5.在demo_index.html文件中查看字体图标的类名
6.在html文件中引入字体图标
7.改变字体图标大小要注意权重问题，字体属性默认的权重是10
ps的基本操作
常规操作
1.文件里面可以打开相应的psd图片
2.ctrl+r可以打开标尺，右击标尺可以选择单位
3.ctrl+加号可以放大图片 ctrl+减号可以缩小图片
4.按住空格键，可以拖动整个试图
5.用选框工具可以测量大小
切图
先选择切片工具
选择要切片的区域
点击文件进行保存
选择jpeg格式进行存储
将·切片选项选择为选中的切片导出即可
图层
选中所需合并的图层
ctrl+e合并图层，右键点击图层导出即可
cutterman插件的使用
重启ps，找到cutterman插件
使用cutterman进行图层合并导出
|
