CSS浮动

目录

1. 浮动（float）

1.1 传统网页布局的三种方式

​1.2 标准流（普通流 / 文档流）

1.3 为什么需要浮动？

1.3.1 如何让多个块级盒子（div）水平排列成一行？

1.3.2 如何实现两个盒子的左右对齐？

1.3.3 总结（重点）

1.4 什么是浮动？

1.5 浮动特性（重难点）

1.5.1 浮动元素会脱离标准流（脱标）

1.5.2 浮动的元素会一行内显示并且元素顶部对齐

1.5.3 浮动的元素会具有行内块元素的特性

1.6 浮动元素经常和标准流父级搭配使用

2. 常见网页布局

2.1 常见网页布局

2.2 浮动布局注意点

3. 清除浮动

3.1 为什么需要清除浮动？

3.2 清除浮动本质

3.3 清除浮动

3.3.1 清除浮动语法

3.3.2 清除浮动的方法

（1）额外标签法

（2）父级添加overflow

（3）after伪元素法

（4）双伪元素清除浮动

清除浮动小总结

4. ps切图

4.1 常见的图片格式

PS有很多的切图方式：图层切图、切片切图、PS插件切图等

4.2 图层切图

4.3 切片切图

4.4 PS插件切图

5. 学成在线案例

5.1 准备素材和工具

5.2 案例准备工作

5.3 CSS属性书写顺序（重点）

5.4 页面布局整体思路

5.5 确定版心

5.6 头部制作

5.7 banner制作

5.8 精品推荐小模块

5.9 精品推荐

---

1. 浮动（float）

1.1 传统网页布局的三种方式

1.2 标准流（普通流 / 文档流）

1.3 为什么需要浮动？

提问：我们用标准流能很方便的实现如下效果吗？

1.3.1 如何让多个块级盒子（div）水平排列成一行？

1.3.2 如何实现两个盒子的左右对齐？

1.3.3 总结（重点）

1.4 什么是浮动？

1.5 浮动特性（重难点）

加了浮动之后的元素，会具有很多特性，需要我们掌握的：

1. 浮动元素会脱离标准流（脱标）

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性

1.5.1 浮动元素会脱离标准流（脱标）

1.5.2 浮动的元素会一行内显示并且元素顶部对齐

1.5.3 浮动的元素会具有行内块元素的特性

1.6 浮动元素经常和标准流父级搭配使用

2. 常见网页布局

2.1 常见网页布局

2.2 浮动布局注意点

3. 清除浮动

3.1 为什么需要清除浮动？

3.2 清除浮动本质

3.3 清除浮动

3.3.1 清除浮动语法

3.3.2 清除浮动的方法

（1）额外标签法

（2）父级添加overflow

（3）after伪元素法

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {   
     /* IE6、7专有 */
    *zoom: 1;
}

其中.clearfix为一个类名，只有类名为.clearfix才能调用以上代码

（4）双伪元素清除浮动

.clearfix: before,
.clearfix: after {
    content: "";
    display: table;
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

清除浮动小总结

浮动的盒子不会有外边距合并的问题

4. ps切图

4.1 常见的图片格式

PS有很多的切图方式：图层切图、切片切图、PS插件切图等

4.2 图层切图

最简单的切图方式：右击图层→快速导出为PNG

但是很多情况下，我们需要合并图层再导出：

1.选中需要的图层：图层菜单→合并图层（ctrl+e）

2.点击→快速导出为PNG

最好的方式是：沟通

4.3 切片切图

4.4 PS插件切图

5. 学成在线案例

5.1 准备素材和工具

1.学成在线PSD源文件

2.开发工具 = PS（切图）/cutterman插件+vscode（代码）+chrome（测试）

5.2 案例准备工作

5.3 CSS属性书写顺序（重点）

5.4 页面布局整体思路

5.5 确定版心

5.6 头部制作

5.7 banner制作

5.8 精品推荐小模块

5.9 精品推荐