B 站黑马程序员 pink 老师前端课程学习笔记_05 CSS3

最新推荐文章于 2023-12-01 00:17:34 发布

长城上的守夜人

最新推荐文章于 2023-12-01 00:17:34 发布

阅读量807

点赞数

分类专栏：前端学习笔记文章标签： css css3

本文链接：https://blog.youkuaiyun.com/PancrasG/article/details/114262800

版权

前端学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS3中的浮动布局，包括浮动的定义、特性及应用场景，探讨了为何要使用浮动以及如何清除浮动。通过四种清除浮动的方法：额外标签法、父级添加属性、父级添加伪元素、父级添加双伪元素，解决因浮动导致的父级高度塌陷问题。此外，还提及了PS切图的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. CSS 浮动

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

网页布局的本质——用 CSS 来拜访盒子。把盒子摆放到相应位置

CSS 提供了三种传统布局方式

普通流（标准流）
浮动
定位

**标准流：**标签按照规定好的默认方式排列

块级元素会独占一行，从上到下顺序排列
- 常用元素：div,hr,p,h1~h6,ul,ol,dl,form,table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
- 常用元素：span,a,i,em

标准流是最基本的布局方式

1.2 为什么要使用浮动（float）

有很多布局效果标准流无法完成，此时就可以利用副都懂完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1.3 什么是浮动

flot属性用于创建浮动框，将其移动到以彼岸，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 {float: 属性值；}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

1.4 浮动特性

设置了浮动的元素最重要的特征：

脱离标准普通流的控制（浮），移动到指定位置（动），俗称脱标
- 浮动的盒子不再保留原先的
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
- 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
浮动元素具有行内块元素特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样，添加浮动后它的大小根据内容来决定
- 浮动的盒子中间没有缝隙，紧挨在一起
- 行内元素有了浮动，则不需要转换块级、行内块元素可以直接给高度和宽度

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

为了约束浮动元素位置，网页布局一般采取的策略是：先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列走有位置，复合网页布局第一准则。
先设置盒子大小再设置盒子位置

1.5 浮动布局

浮动布局注意点

浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动

浮动的盒子只会影响自己后面的标准流，不会影响前面的标准流

2. 清除浮动

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

语法：

选择器 {clear：属性值;}

属性	描述
left	清除左侧浮动元素
right	清除右边浮动元素
both	同时清除左右两侧浮动的影响

实际应用中，几乎只用clear: both

清除浮动的本质：清除浮动元素脱离标准流造成的影响
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

2.1 额外标签法

也称为隔墙法，是 W3C 推荐做法。

在浮动元素末尾添加一个带清除浮动样式的额外标签，例如

<div style="clear:both"></div>

或其他标签（如<br/>等）这个标签必须是块级元素

优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化较差

2.2 父级添加`overflow`属性

给父级元素添加overflow属性，将其属性值设置为hidden,auto,或scroll

优点：代码简洁
缺点：无法显示溢出部分

2.3 父级添加`:after`伪元素

https://www.bilibili.com/video/BV14J4114768?p=186&spm_id_from=pageDriver

:after方式是额外标签法的升级版

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

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、网易、淘宝

2.4 父级添加双伪元素

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

优点：代码简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯

3. PS切图

3.1 常见图片格式

jpg格式：产品类图片常用格式
gif格式：图片动画效果
png格式：背景透明的图片
PSD格式：PS专用格式

3.2 右键导出

右击图层→导出为png格式
ctrl+E 合并图层→右击图层→导出为png格式
最好的方法：沟通

3.3 切片切图

利用切片工具受冻划出
导出选中图片（存储为web→选择图片格式→存储）

3.4 插件切图

Cutterman：http://www.cuttman.cn/zh/cuttman