web第八天，PS切图与float浮动
Posted lykpy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web第八天，PS切图与float浮动相关的知识，希望对你有一定的参考价值。
一，PS工具
1，组成
菜单栏（上） 工具栏（左） 辅助面板（右）
2，图片常见格式
jpg ： 色彩丰富，比较适合做照片格式
png ： 可以做透明的图片
gif ： 动图
psd ： 是设计图的源文件
3，PS的简单操作
①，alt+鼠标滑轮： 放大缩小图片
②，辅助面版 ： 图层，；历史记录， 信息（查看图片宽高）
③，标尺 ： 最好先调出来，视图->标尺
④，参考线 ： 可以从标尺上拖拽出来，也可以拖拽回去，也可以视图->清除所有参考线
⑤，撤销 ： ctrl+z，辅助面板中的历史纪录
⑥，tab键可以显示与隐藏工具栏与辅助面板
4,工具栏工具
①，移动工具
先点中自动选择按钮，然后就可以点击任意的图层进行选择
②，矩形选框工具
对JPG，PNG进行切图处理，还可以量取尺寸大小
微调 :
通过键盘的上下左右键，进行选框的移动，这样可以将位置对齐
alt : 可以对所选框进行减少的操作
shift ： 可以对所选款进行添加的操作
切图 ：
ctrl+c复制，ctrl+n新建界面，ctrl+v粘贴，导出->快速生成png，导出为web存储格式（jpg，gif）
注 ： 要想对png进行半透明操作，需要用到魔术棒
如果要切图，必须先选中这个图层
③，切片工具
在工具栏的第五个工具，可以一次性切多个图片
④，吸管工具
吸取图片颜色，颜色在拾色器中获取
⑤，排版文字工具
添加或选中一些文本相关的操作（进行文字尺寸的对比测量）
⑥，抓手工具
可以移动图层到指定的可视区域（快捷键：空格）
⑦，放大镜工具
类似于alt+滑轮，将图片进行放大与缩小
5，PSD切图
要选择CC以上版本
①，编辑->首选项->增效工具->启用生成器
②，文件->生成->图像资源
6，企业中是如何切图的？
1. 蓝湖的账号。
2. 下载PS相关的插件。然后去安装。
3. 窗口 -> 扩展功能 -> 蓝湖
4. 小姐姐通过 蓝湖插件上传到web网页端。
鹏哥(前端届最帅的开发)：
1. 蓝湖的账号。
2. 直接在网页中查看到相关的数值。也可以直接下载切图。
2,PS实战
1，先写html结构
2，重置默认样式
3，写选择器
4，通过PS测量具体的数值
3，float浮动
1，文档流
文档流是文档中可显示对象在排列时所占用的位置。
2，float特性
加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
3，float取值
left：左浮动 right：右浮动 none：不浮动
4，float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列，当容器放不下这些浮动元素的时候，就会换行排列 ( 尽量让浮动的元素高度是统一 )
主要给块元素添加，但也可以给内联元素添加。
5，清除浮动
①，解决上下排列的情况
利用clear属性清除float浮动
clear：left | right | both（常用）
②，解决嵌套排列的情况
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
以上是关于web第八天，PS切图与float浮动的主要内容，如果未能解决你的问题，请参考以下文章