194节---------4月19日

浮动布局注意点

• 浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
• 一个盒子里有多个盒子，如果一个元素浮动了，那么其他兄弟也应该浮动，以防止引起问题。
• 浮动的盒子只会影响后面的标准流，不会影响前面的标准流

清除浮动

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0时，就会影响下面的标准流盒子。

• 清除浮动的本质就是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动后，父级就会根据浮动的子盒子自动监测高度，父级有了高度，就不会影响下面的标准流

---

语法：

选择器{clear：属性值；}

• left清除左侧浮动的影响
• right清除右侧浮动的影响
• both同时清除左右两侧浮动的影响

实际工作中：几乎只用clear:both;

清除浮动的策略是：闭合浮动

---

清除浮动的方法：

• 额外标签法（隔墙法）

新添加的元素必须是块级元素

在浮动元素末尾添加一个空的标签。例如：

<div style=“clear:both”><div>

• 父级添加overflow

将其属性值设置为hidden、auto或scroll

• 父级添加after伪元素

在父级元素<>中加上class:"clearfix"

在<style>中 直接加入代码段：

.clearfix:after {
    content : "";
    display: block;height: 0;
    clear : both;
    visibility: hidden;
}

.clearfix{
    *zoom : 1;
}

• 父级添加双伪元素

在父级元素<>中加上class:"clearfix"

在<style>中 直接加入代码段：

.clearfix:before,clearfix:after {
content :"";
display:table;

}

.clearfix:after {
    clear:both;
}

.clearfix{
    *zoom : 1;
}

---

PS切图

分为图层切图、切片切图、PS插件切图等。

图层切图

最简单的切图方式：右击图层，快速导出为PNG（透明背景）

如果图片和字体在两个图层，可以选中一个后，按shift再点另一个，然后ctrl+e,就可以合并为一个图层

切片切图

利用切片工具选出需要导出的部分，再存储（文件-导出-存储为web设备所用格式-选择需要的图片格式-存储）

PS插件切图

cutterman是ps的一款插件，能够自动将你所需要的图层进行输出