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端的布局

  • 通栏：自适应浏览器的宽度
  • 版心：固定一个宽度，并且上容器居中