PhotoShop使用
- 组成:
- 菜单
- 工具栏
- 附注面板
- 快捷键:
- ctrl+r:显示隐藏标尺
- 在标尺上可以拖拽出参考线
- 可以通过移动工具拖拽回去,也可在视图菜单中选择清除所有的参考线
- alt+滚轮:可以对图片进行放大缩小
- png等图片的切图流程:
- 通过矩形选框工具,选择指定的区域
- 微调:alt减少区域 shift增加区域 上下左右键进行微调
- 利用参考线记录量取的位置,以便之后测量其他的值
- ctrl+c:复制图层
- ctrl+n:新建画布
- ctrl+v:粘贴图层
- 存储为web格式
- 通过矩形选框工具,选择指定的区域
- psd图片的切图流程:
- 启动生成器
- 图像资源
- 重命名图层,自动获取切图
- 可以上传到线上,方便数据获取
float浮动
- 脱离文档流,延着父容器靠左或靠右进行排列
- left、right、none
- float注意点
- 只会影响后面的元素
- 内容默认提升半层
- 默认宽根据内容决定
- 换行排列
- 主要给块元素添加,但也可以给内联元素添加
- 如何清除浮动
- 上下排列:clear属性,表示清除浮动的left、right、both。clear属性只会操作块标签,对内联标签不起作用
- 嵌套排列:
- 固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
- 父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
- overflow:hidden(BFC规范),如果有子元素想溢出,则会受到影响
- display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素
- 设置空标签:不推荐,会多添一个标签
- after伪类:推荐,是空标签的加强版,目前各大公司的做法
CSS定位
-
position:
- static-默认
- relative
- 如果没有定位偏移量,对元素悲伤没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、right、bottom是相对于当前元素自身进行的偏移
- absolute
- 使元素完全脱离文档流
- 是内联元素支持宽高-让内联具备块特性
- 使块元素默认宽度根据内容决定-让块具备内联的特定
- 如果有单位祖先元素相对于定位祖先元素发生了偏移,没有定位祖先元素相对于整个文档发生偏移-绝对、相对、固定
- fixed
- 使元素完全脱离文档流
- 使内联元素支持宽高-让内联具备块特性
- 使块元素默认根据内容决定-让块具备内联标签的特性
- 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
- sticky
- 在指定的位置,进行黏性操作
PC端的布局
- 通栏:自适应浏览器的宽度
- 版心:固定一个宽度,并且上容器居中