一、浮动
- css 布局的三种机制：普通流（标准流）、浮动、定位。
- 普通流布局的特点：块级元素独占一行，从上到下排列。行内元素从左到右排列，碰到父元素边缘自动换行。
- 为什么要用浮动：让多个块级盒子一行显示。
- 为什么要清除浮动：
浮动的应用：
- 利用浮动完成导航栏案例
- 能够清除浮动
- 能够使用PS切图工具
1、CSS 布局的三种机制
页面布局的核心就是用 css 来摆放盒子。
css 有三种来摆放盒子位置，分别是普通流（标准流）、浮动、定位。
1）、普通流
- 块级元素独占一行，从上到下顺序排列。常见元素：div、hr、p、h1~h6、ul、ol、dl、form、table等
- 行内元素是按照顺序从左到右的顺序排列，碰到父元素边缘自动换行，常见元素：span、a、i、em等。
2）、浮动
- 让盒子从普通流中浮起来，主要作用是让多个块级盒子在一行上显示。
3）、定位
将盒子定在浏览器的某一个位置，CSS离不开定位，特别是 js 特效。
2、浮动是什么
行内元素可以使用 display: inline-block; 属性来转换，但是有自己的缺陷：
1.多个元素一行显示时，中间会有空白缝隙；
2.不能让盒子左右对齐。
所以，在一些网页布局要求中，标准流不能满足需要，需要使用浮动来完成网页布局。
浮动的概念：元素的浮动是指设置了浮动属性的元素。
作用：
- 脱离标准普通流的控制，可让多个盒子（div）水平排列成一行。浮动布局成为重要的手段。
- 移动到指定位置，并且能实现盒子左右对齐等等。
- 浮动最早是用来控制图片，实现文字环绕图片的效果。
语法：在css中通过 float 来定义浮动，中文意思就是：浮、漏、特，语法如下：
选择器 {float: 属性值;}
其中属性值的取值有下面三个
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
关于浮动的口诀就是：英文 float，中文：浮、漏、特。
1）、浮动口诀之浮
浮：就是漂浮在普通流的上面，脱离标准流，也叫 脱标。
例如下面代码所示：
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}代码中的 box1 是小盒子，并且向左浮动，此时 box1 也不再是标准流。由于 box2 盒子是标准流，此时 box2 盒子会占据 box1 盒子的位置，box1 盒子漂浮在 box2 盒子上面。
也就是说：float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。
2）、浮动口诀之漏
漏：就是浮动的盒子，把自己原来的位置漏给下面的标准流的盒子，也就是不在占有原来的位置，脱离标准流。
3）、浮动口诀之特
浮动的特性：有了 float 属性会改变元素的 display 属性。
任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和行内块相似。
浮动的元素会互相紧靠在一起，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
4、浮动（float）小结
使用浮动的核心目的就是让多个块级盒子在同一行显示，因为这是最常见的一种布局方式。
对浮动的总结如下表所示：
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
5、浮动(float)的应用
浮动和标准流的父盒子搭配使用。由于脱标会影响下面的标准流元素，所以需要给浮动的元素添加一个标准流的父亲，这样可最大化的减小对其它标准流的影响。
一个完整的页面，是标准流 + 浮动 + 定位一起来完成的。
浮动应用案例，实现效果如下图所示，通过图片对这个案例进行分析，首先是一个大的盒子（div），大盒子内有两个小盒子，左边一个小盒子（div），右边一个小盒子（ul）。右边的小盒子中的盒子大小都是一样的，所以使用无序列表来做更恰当。让左边的小盒子和右边的小盒子一起浮动，这样就能在大盒子中完整显示。需要注意的是，盒子的大小尺寸测量一定要准确，否则出现的效果就无法预料。
具体实现代码如下所示：
<head>
<meta charset="UTF-8">
<title>浮动盒子练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1227px;
height: 615px;
background-color: pink;
margin: auto;
}
.left {
width: 235px;
height: 615px;
background-color: purple;
float: left;
}
.right {
width: 992px;
height: 615px;
background-color: skyblue;
float: left;
}
ul li {
list-style: none;
}
.right li {
width: 234px;
height: 300px;
background-color: pink;
float: left;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>导航栏案例，实现效果如下图所示，从图片进行分析，上面一个盒子（div），下面一个盒子（div），由于下面是按顺序排放的，同样使用无序列表来做。
具体实现代码如下所示：
<head>
<meta charset="UTF-8">
<title>导航栏案例</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
/*首先清除列表的默认样式*/
list-style: none;
}
.banner {
width: 760px;
height: 150px;
margin: auto;
}
.nav {
width: 760px;
height: 32px;
background: url(images/nav_bg.jpg) repeat-x;
margin: 0 auto;
}
.nav ul li {
float: left;
}
.nav ul li a {
/*由于 a 是行内元素，要先将其转换为行内块，一定要给 a 指定大小，因为需要 a:hover*/
display: inline-block;
width: 80px;
height: 32px;
line-height: 32px;
text-decoration: none;
font-size: 12px;
text-align: center;
color: #40510a;
background: url(images/button1.jpg) no-repeat;
}
.nav ul li a:hover {
background: url(images/button2.jpg);
}
</style>
</head>
<body>
<!-- banner 是广告条的意思 -->
<div class="banner"><img src="images/banner.jpg"></div>
<!-- nav 是导航栏，导航栏都采用 li 包含 a 的写法 -->
<div class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
</body>注意点：在实际的应用中，导航栏不会直接用链接 a 来做，而是用 li 包含链接（li+a）的方式来做。
- li+a 语义更清晰，看上去是有条理的列表型内容。
- 如果直接使用 a，容易被搜索引擎识别为堆砌关键字而造成降权，从而影响排名。
6、浮动（float）扩展
浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐。
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距。
浮动元素与兄弟盒子的关系，一个父盒子下面有多个子盒子：
- 如果第一个盒子是浮动的，那么当前盒子（第二个盒子）也浮动的话，就会与前一个盒子的顶部对齐；
- 如果第一个盒子没有浮动（普通流），第二个盒子不管有没有浮动，第二个盒子都会在第一个盒子的下方。
- 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议：如果一个盒子里面有多个子盒子，其中的一个子盒子浮动的话，那么其它兄弟盒子也应该浮动，防止引起问题
二、 清除浮动
为什么要清除浮动：在很多情况下，父级盒子不方便给高度。但是子盒子浮动就不占有位置，最后的父级盒子高度为0，这样就会影响下面的标准流盒子。
所以：
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响；
- 准确点说不是清除浮动，而是清除浮动后造成的影响。
清除浮动的本质：解决父级元素因为子级浮动引起内部为 0 的问题。清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。
1、清除浮动的方法
在 css 中，clear 属性就用于清除浮动。这里先记住清除浮动的方法，原理以后再说。
语法：
选择器 {clear: 属性值;} /*clear 清除*/关于 clear 的属性值的取值说明如下：
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响（实际使用最多的就是这个） |
清除浮动的具体使用方法有下面4个。
1）、额外标签法（隔墙法）
通过在浮动元素（或标签）末尾添加一个空的标签来做，例如<div style="clear: both"></div>，或者其他标签（如br）等也可以。
这个做法也是 w3c 推荐的做法。
- 优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。
2）、父级添加 overflow 属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。通常使用的是 overflow: hidden;
- 优点：代码简洁
缺点：内容增多的时候，容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3）、使用 after 伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法如下：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7 专有 */
}在 css 中定义这段代码后，接下来在需要清除浮动的父元素中引用该类即可，如<div class="clearfix"></div>
- 优点：符合闭合浮动思想，结构语义化正确
- 缺点：由于 IE6-7 不支持 :after，需要使用 zoom:1 触发 hasLayout。
- 代表网站：百度、淘宝、网易等。
4）、
同时使用 :before 和 :after 方法。使用方法如下：
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}这种方式的优点是简洁，代表网站是上米、腾讯等。
同样的，也需要在要清除浮动的父元素中引用该类即可，如<div class="clearfix"></div>
2、清除浮动总结
什么时候需要使用清除浮动？
1.父级盒子没有高度的时候。
2.子盒子浮动了的时候。
3.要影响下面的布局，就要清除浮动。
最后，浮动的总结如下表所示：
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
三、Photoshop 切图
常见的图片格式：
- jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式。
- gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果。
- png图像格式：是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。
- PSD图像格式：PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。
PS切图可分为利用自带的切片工具切图和利用PS的插件快速切图。
1、切片工具
ps 自带的切片工具在左侧工具栏的第5个工具，在该工具上右键选择“切片工具”。
ps 的切片分两大步：选中切片，导出切片。
导出切片在：文件菜单 --> 导出 --> 存储为 web 所用格式 --> 选择需要存储的图片格式 --> 点击下面的“存储...” --> 在弹出的对话框中不要忘记选择“选中的切片” --> 接下来是选择图片的保存路径，选择好路径后 ps 会自动在该路径下生成 images 文件夹。
选中切片的方法有：
利用切片工具手动划出，工具在 左侧工具栏的第5个工具，在该工具上右键选择“切片工具”，切图完成后对大小区域不满意，可以使用“上下左右”方向键微调。还可以在切图上的参考线上用鼠标将切图区域放大缩小。
要删除选择的切片方法是： 左侧工具栏的第5个工具，在该工具上右键选择“切片选择工具”，然后单击上一步的切片就选中了切片，此时按下键盘上的 Del 键即可。
利用左侧工具上的第1个工具的 “移动工具”，然后点击图片上想要切的区域，此时在菜单栏下方会出现“自动选择：组”。这里的组就是文件夹的意思，此时在右侧区域已经可以看到该组的信息。将组改为图层，在点击图片区域某个位置，此时在右侧就可看到刚才点击位置的图层。此时再点击“图层菜单” --> “新建基于图层的切片”，自动选中想要切图的区域。接下来将切片导出即可。
切图时，将图层调出后，将背景图层关掉，即可切出没有背景的图片，这时在导出的步骤中需要将图片导出为 png 格式的。切图的方法及步骤跟前面介绍的是一样的。要区别图片是否是有背景，在文件夹中预览图片时，选中图片后，此时图片的背景色与选中的颜色是一样的，就表示没有背景。
清除切片：当在图上选择了很多个切片时，一个一个的删除有点麻烦，此时可选择视图菜单 --> 清除切片方法。
基于辅助线的切图：首先将辅助线画好，点击左侧第5个工具的“切片工具”，此时在菜单栏下方会出现“基于参考线的切片”，点击该选项后，再点击左侧第5个工具的“切片选择工具”选择所切区域后，导出保存即可。
当辅助线和切片较多时，可以选择菜单栏的图层 --> 清除参考线/清除切片来一次性清除。
2、切图插件
在 photoshop 中可以安装插件，前提是 photoshop 是完整版的，不能是绿色版。Cutterman 就是 photoshop 中一款非常好的切图插件，在合作该插件前，需要先进行注册（注册免费）。关于该软件的官网及下载地址是：
http://www.cutterman.cn/zh/cutterman
下载完成好点击安装即可，安装完成后重启 ps 软件。在窗口菜单的扩展功能下就能看到这个插件。打开这个插件后根据提示进行注册即可开始使用。
Cutterman 支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 不需要记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
切图方法：
- 第1步：选择需要切图的样式，有 ios、Android、Web 三种可选，这三种可以同时选，也可只选其中一种。
- 第2步：选中 Web 样式后，下面有一个倒三角按钮可以点击，点击之后下面就出来图片格式，有png、jpeg、gif等，同样的可以只先一种格式或者选多种格式。选中多种格式，就会导出多种格式的图片。
第3步：设置尺寸 宽 和 高，这里不用设置，采用默认的。
第4步：建立好切图要保存的文件夹后，点击下面的输出，选择要保存的目录。
第5步：选中要切图的图层，点击 Cutterman 界面上的 【导出选中图层】即可完成导出，此时在第4步设置的保存目录下就能看到。
使用 Cutterman 切图还有一个优点就是，当要切一个按钮时，如果该按钮上有文字的时候，用传统的切图方法会把文字也会切下来，这不是想要的结果，当然也可以选中文字的图层把文字关掉再切。使用 Cutterman 时，只要选中按钮这个图层，直接导出即可。
此外，使用【矩形选择工具】划定选区后，使用 Cutterman 同样可以一键导出。