前端基础之PS和相关基础知识总结

PS安装：

• 淘宝

PS简介

• 面板简介（菜单栏、工具栏、辅助面板）

• 图片格式：

  • jpg=jpeg（色彩丰富的图片）
  • png（半透明图片）
  • gif（网页动态图）
  • psd（ps设计源文件）

• 前提知识
  

• 如何切图：

  • 编辑-首选项-增效工具-勾选启用生成器
  • 文件-生成图像资源（勾选）
  • 将psd文件中要切出来的图片选中改变名称添加后缀（.png）
  • 企业切图工具
    • 按照网页当中的提示安装好插件之后，在pohtoshop当中窗口-拓展功能就能看到插件
    • 从而可以快速获取要设计网页的相关样式

• float浮动：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

  • left
  • right
  • none

• float注意点：

  • 只会影响后面的元素。
  • 内容默认提升半层。
  • 默认宽根据内容决定。
  • 换行排列。
  • 主要给块元素添加，但也可以给内联元素添加。

• 利用clear属性清除float浮动

• 其他清除浮动的方法：
  固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
  父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
  overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
  display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
  设置空标签 : 不推荐 , 会多添加一个标签。
  after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。

• 在同一个文档流下，子元素的大小决定父元素的大小【撑开】

• CSS属性之position定位：

  • 浮动用于左右定位，position用于叠加定位，
  • position相对定位：relative不会使元素脱离文档流，也不会影响其他元素定位，偏移是相对于当前元素自身左上角进行的（relative：left、right、top、bottom）
  • position绝对定位：absolute会使元素脱离文档流，使内联元素支持宽高（让内联具备块的特性），让块元素默认宽根据内容决定（让块具备内联的特性）、偏移是相对于定位祖先元素进行的，默认祖先元素是整个文档。
  • position固定定位：fixed会使元素脱离文档流，使内联元素支持宽高（让内联具备块的特性），让块元素默认宽根据内容决定（让块具备内联的特性）、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。
  • position黏性定位：sticky在指定位置进行黏性操作，相对于整个浏览器窗口。
  • CSS属性z-index定位层级：默认层级为0，用于解决嵌套时候的层级问题。同级先比较，