MyBlog

# 浮动

# 结构伪类选择器

  1. 作用与优势:
  • 作用:根据元素在HTML中的结构关系查找元素
  • 优势:减少对于HTML中类的依赖,有利于保持代码整洁
  • 场景:常用于查找某父级选择器中的子元素

  1. 选择器

    选择器 说明
    E:first-child{} 匹配父元素中的第一个子元素,并且是E元素
    E:last-child{} 匹配父元素中最后一个子元素,并且是E元素
    E:nth-child(n) {} 匹配父元素中第n个子元素,并且是E元素
    E:nth-last-child(n){} 匹配父元素中倒数第n个子元素,并且是E元素

    注意点

    1. n为:0,1,2,3,4,...

    2. 通过n可以组成常见公式

      功能 公式
      偶数 2n,even
      奇数 2n+1,2n-1,odd
      找到前5个 -n+5
      找到从第5个往后 n+5

# 伪元素

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

区别:

  1. 元素:HTML设置的标签
  2. 伪元素:由CSS模拟出的标签效果

种类:

伪元素 作用
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素

注意点:

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素

# 标准流--文档流(文件流)

标准流:又称文件流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素

常见标准流排版规则:

  1. 块级元素:从上往下,垂直布局,独占一行
  2. 行内元素或行内块元素:从左往右,水平布局,空间不够自动拆行

# 浮动

  • 格式: float:left/right;

  • 显示特点: 脱离文档流, 元素从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止.

  • 浮动元素如果一行装不下会自动换行, 换行时有可能被卡住

  • 当元素的所有子元素全部浮动时自动识别的高度为0 给元素添加overflow:hidden解决

  • 应用场景: 将纵向排列的元素改成横向排列

# 浮动的作用

让垂直布局的盒子变成水平布局

# 浮动的代码

属性名:float

属性值:

属性名 效果
left 左浮动
right 右浮动

# 浮动的特点

  1. 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置---相当于从地面飘到了空中
  2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
  3. 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素会受到上面元素边界的影响
  5. 浮动元素有特殊的显示效果
    • 一行可以显示多个
    • 可以设置宽高

注意点:浮动的元素不能通过text-align:center或者margin:0 auto,让浮动元素本身水平居中

# 清除浮动

# 清除浮动的介绍

含义:清除浮动带来的影响

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

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

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

# 清除浮动的方法

# 直接设置父元素高度

特点:简单粗暴,方便

缺点:有些布局中不能固定父元素高度.如:新闻列表,京东推荐模块

# 额外标签法

操作:

  1. 在父元素内容的最后添加一个块级元素
  2. 给添加的块级元素设置clear:both

特点:缺点--会在页面中添加额外的标签,会让页面的HTML结构变得复杂

# 单伪元素清除法

操作:用伪元素替代了额外标签

特点:优点--项目中使用,直接给标签加类即可清除浮动

# 双伪元素清除法

特点:优点--项目中使用,直接给标签加类即可清除浮动

# 给父元素设置overflow:hidden

操作:

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

特点:优点---方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*当元素的所有子元素全部浮动时 自动识别的高度为0 后面的
            元素会顶上来导致显示异常,添加overflow:hidden解决此异常*/
            overflow: hidden;
        }
        #d1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: right;
        }

        #d2{
            width: 50px;
            height: 50px;
            background-color: green;
            float: right;
        }

        #d3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

← 定位+装饰 →