CSS（四）
（一）浮动
1.传统网页布局的三种方式
传统网页布局的三种方式：普通流（标准流）、浮动、定位，实际开发中一个页面基本上都包含了这三种布局方式
网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动
2.标准流
标准流：标签按照规定好的默认方式排列，是最标准的布局方式
块级元素独占一行，从上到下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、li、form、table
行内元素会按照顺序从左到右顺序排列，碰到父元素边缘会自动换行
常见元素：span、a、i、em等
3.为什么需要浮动
很多的布局效果，标准流没有办法完成，浮动可以改变默认的排列方式
经典应用：可以让多个元素一行内排列显示
4.什么是浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
.d1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.d2 {
float: right;
width: 200px;
height: 200px;
background-color: pink;
}
5.浮动的特性
1）浮动的特性——脱标：
1.脱离标准流的控制（浮），移动到指定的位置（动）
2.浮动的盒子不在保留原先的位置
2）浮动的特性——一行显示
1.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示，并且顶端对齐排列
2.浮动的元素互相不会有空隙，如果父级元素装不下这些浮动的盒子，则会另起一行对齐
3）浮动元素行内块元素特性
1.任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
2.如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度
3.如果块级元素没有设置宽度，默认宽度和父级元素一样宽，但是添加浮动后，宽度大小有内容决定
4.浮动的盒子中间是没有缝隙的
5.行内元素同理
4)浮动元素经常和标准流父级搭配使用
为约束元素的位置，网页布局一般采取的策略是：先用标准流的父级元素排列上下位置，然后内部子元素采取浮动排列左右位置
（二）常见网页布局
浮动布局的注意点：
1.浮动和标准流的父盒子搭配
先用标准流的父元素竖直排列，然后再将内部子元素采用浮动排列左右对齐
2.一个元素浮动，理论上其他兄弟元素也要浮动
一个大盒子里有多个子元素，其中一个子元素浮动，那么其他子元素也应浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
（三）清除浮动
1.为什么要清除浮动？
理想中的状态：父盒子不给高度，让子盒子撑开父盒子
但是，由于父盒子在很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父盒子高度为0，会影响下面的标准流盒子
由于浮动元素不再占有原文档流的位置，所以会对后面的元素排版产生影响，所以要清除浮动
清除浮动的条件：
1.父元素没有高度
2.子盒子浮动
3.影响下面的布局
2.清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级元素就会根据子盒子自动检测高度，父级有了高度，就不会影响下面的标准流啦
3.清除浮动
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。最常用 |
| none | 默认值。允许浮动元素出现在两侧。 |
清除浮动的策略为闭合浮动
4.清除浮动的方法
1）额外标签法
额外标签法也称为隔墙法，是W3C推荐的做法
额外标签法会在最后一个浮动元素后面添加一个空的标签。例如：
<div class="d1"></div> /* 浮动 */
<div class="d2"></div> /* 浮动 */
<div class="d3"></div> /* 浮动 */
<div class="clear"></div> /* 空标签 */
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差
PS：要求新添加的元素必须是块级元素
2）给父元素添加overflow属性
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
优点：代码简洁
缺点：无法显示溢出的部分
3）给父元素添加:after属性
:after方式是额外标签的升级版。也是给父元素添加
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
background-color: blue;
}
</style>
<body>
<div class="box clearfix">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
4）给父级元素添加双伪元素
<style>.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<body>
<div class="box clearfix">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
（四）PS切图
1.常见照片格式
2.图层切图
单个图层：选中图层，右键选择“快速导出为"PNG"
多个图层：选中多个图层，然后按CTRL+e合并图层，右键选择“快速导出为"PNG"
3. 切片切图
首先利用切片工具选中要切片的范围，然后选择文件菜单里面的导出，选择图片的格式，点击存储，切片选项选择：选中的切片，然后保存即可
如果保存没有背景图片的图像，把图层中取消背景图层的显示即可
4.PS插件切图
利用Cutterman插件进行切图，能够自动将你需要的图层进行输出
网站：http://www.cutterman.cn/zh/cutterman
PS：Cutterman插件要求安装的PS必须是完整版的
浙公网安备 33010602011771号