web前端学习-css浮动

目录

css-结构伪类选择器：

 css-伪元素：

css-浮动的作用：

 css-浮动的特点：

 css-清除浮动-额外标签：

  css-清除浮动-单伪元素：

 css-清除浮动-双伪元素：

  css-清除浮动-overflow：

css-浮动 小案例练习1：

css-浮动 小案例练习2：

---

css-结构伪类选择器：

作用与优势:

                1. 作用：根据元素在HTML的结构中关系查找元素

                2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁

                3. 场景：常用于查找某父级选择器中的子元素

fg

 拓展：n的取值也可以是公式：

 css-伪元素：

作用：一般页面中的非主体内容可以使用伪元素

区别：

        元素：HTML设置的标签

        伪元素：由css设置的标签

种类：

注意点：

        1.必须设置content属性才能生效

        2.伪元素默认是行内元素

 

css-浮动的作用：

早期时候：图文环绕（了解）

 

现在作用：网页布局(重点)

                块标签在一行排列

 

 css-浮动的特点：

  1.浮动元素脱离标准流，在标准流中不占位置

        》可以简单理解为从地面飘到了空中（理解）

  2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

  3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  4.浮动元素由特殊的显示效果

          》一行可以显示多个

          》可以设置宽高

 注意点:

        浮动的元素不能用过text-align：center或者margin：0 auto

 

 css-清除浮动-额外标签：

首先我们为什么要清除浮动？

清除浮动：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因:子元素浮动后脱标→不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

 

 上面可以看出 当top这个标签盒子设置高度为0的时候 和footer的内容部分重合了。

解决办法—直接给这top标签盒子设置高度：

这个办法简单粗暴但是有时候不满足我们需要，比如当内容不是固定时候。

解决办法—额外标签方法：

        操作：

                1.给父亲元素内容的最后添加一个块级元素

                2.给添加的块级元素设置clear：both

        特点：

                缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

                   

 

  css-清除浮动-单伪元素：

        操作：用伪元素代替基本标签

        特点：

                优点在项目中使用，直接给标签加类即可清除浮动

 

 css-清除浮动-双伪元素：

        操作：

        特点：

                优点：项目中使用，直接给标签加类既可以清除浮动

 

 

  css-清除浮动-overflow：

        操作：

                1.直接给父亲元素设置overflow：hidden

        特点：

                优点：方便

 

css-浮动 小案例练习1：

设计思想及顺序:从上到下， 从大到小，从外到内

1.首先分析整体为一个大盒子

2.然后分为左右2个盒子

3.右边盒子里面放8个小盒子

 

 

css-浮动 小案例练习2：

 

设计思想及顺序:从上到下， 从大到小，从外到内

1.首先分析整体为一个大盒子

2.然后分为左右2个盒子

3.右边盒子里面放8个小盒子

 

注意点：在书写标签属性时候以下顺序可以提高浏览器运行效率

                1.先写浮动 ，display...

                2.然后写宽高背景色...

                 3.最后写文字样式

这里是本人学习CSS3基础的一些笔记，可以供大家一起学习和交流！！！