跟随黑马学前端-15，定位、元素隐藏

第十五天：定位、元素隐藏

给代码注释就像是给浴室做清洁一样 — 你永远都不想干，但它的确给你和客人带来了更愉快的体验。

学习目标

  • 能够说出为什么需要定位

  • 能够说出定位的4种分类

  • 能够说出4种定位各自的特点

  • 能够说出为什么常用子绝父相布局

  • 能够写出淘宝轮播图布局

  • 能够说出显示隐藏的2种方式以及区别

定位

为什么需要定位？

如果需要：

  1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

  2. 滚动窗口的时候，盒子是固定屏幕某个位置的

所以：

  1. 浮动可以让多个块级盒子一含内没有缝隙排列显示，经常用于横向排列盒子

  2. 定位则是可以让盒子在某个盒子内移动位置或者固定在屏幕种某个位置，并且可以压住其他盒子

定位组成

定位：将盒子定在某一个位置，所以定位也就是在摆盒子，按照定位的方式移动盒子

定位=定位模式＋边位移

  • 定位模式用于指定一个元素在文档中的定位方式

  • 边位移则决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置的，其值可分为4个：

值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移

边偏移就是定位的盒子移动的最终位置，有top、bottom、left和right四个属性

边偏移属性 示例 描述
top top:80px; 顶部偏移量，定义元素相对于其父元素上边线的距离
bottom bottom:80px; 底部偏移量，定义元素相对于其父元素下边线的距离
left left:80px; 左侧偏移量，定义元素相对于其父元素左边线的距离
right right:80px; 右侧偏移量，定义元素相对于其父元素右边线的距离

注意是相对父元素，不是同级元素

静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思

语法:

1
2
3
选择器{
	position:static;
}

  • 静态定位按照标准流特定摆放位置，没有边位移

  • 静态定位在布局中很少用

相对定位relative（重要）

相对定位就是元素在移动位置的时候，是相对与它原来的位置来说的

语法：

1
2
3
选择器{
	position:relative;
}

相对定位的特点：

  • 它是相对于自己原来的位置进行移动的

  • 原来的位置保留（灵魂出窍？）（不会脱标的）

  • 因此。相对定位并没有脱标，它最典型的作用就是给绝对定位当爹的

绝对定位absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

所以说，如果加了绝对定位，那么其位置是按照其父元素来计算的

1
2
3
选择器{
	position :absolute；
}

绝对定位的特点：

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)

  2. 如果主线元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

    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
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>绝对定位-父元素有定位</title>
        <style>
            .father {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: skyblue;
            }

            .son {
                position: absolute;
                left: 30px;
                bottom: 30px;
                height: 200px;
                width: 200px;
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <div class="father"><div class="son"></div></div>
    </body>

    </html>

  3. 绝对定位不再占有原先的位置（脱标）

子绝父相的由来

意思：子级使用绝对定位，父级则需要使用相对定位

  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

  2. 父盒子需要加定位显示子盒子在父盒子内显示

  3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相也不是永远不变的，如果父元素不需要占有位置，那么子绝父绝也会遇到

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚定时元素的位置不会改变

语法：

1
2
3
选择器{
	postion:fixed;
}

固定定位的特点：（务必记住）

  1. 以浏览器的可视窗口为参照点移动元素

    • 跟父元素没有任何关系
    • 不随着滚动条滚动

  2. 固定定位不占有原先的位置

    固定定位也是脱离标准流的，其实固定定位也可以看作是一种特殊的绝对定位

固定定位小技巧（固定在版心右侧位置）

小算法：

  1. 让固定定位的盒子left:50%，走到浏览器可视区（也可以看作是版心）的一半位置

  2. 让固定定位的盒子margin-left版心宽度一半距离，多走版心宽度的一半距离

    就可以让固定定位的盒子贴着版心右侧对齐了

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w{
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed{
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 2.利用margin走版心盒子宽度的一半距离 */
            margin-left: 400px;/* 当然，为了有点空隙，应该调大一点，比如405px*/
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
        <div class="w">版心盒子，800像素</div>
</body>
</html>
粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合

语法：

1
2
3
4
选择器{
	postion:stickt;
	top:10px;
}

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

  2. 粘性定位占有原先的位置（相对定位特点）

  3. 必须添加top,left,right,bottom其中一个才有效

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
            /* 距离顶部0像素之后就成为粘性定位 */
            top:0;

        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏</div>
</body>

</html>

跟页面滚动搭配使用，兼容性差，不支持IE

总结

定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否（占有位置） 相对于自身位置移动 常用
absolute绝对定位 是（不占有位置） 带有定位的父级 常用
fixed固定定位 是（不占有位置） 浏览器可视区 常用
sticky粘性定位 否（占有位置） 浏览器可视区 当前很少

定位叠放次序 z-index

在使用定位布局的时候，可能出现盒子重叠的情况，此时，可以使用z-index属性来控制盒子的前后次序（z轴）

语法：

1
2
3
4
选择器
{
	z-index:1;
}

  • 数值可以是正整数、负整数或者是0，默认是auto，数值越大，盒子越往上

  • 如果属性值相同，那么按照代码顺序，后来居上

  • 数字后面不能加单位

  • 只有定位的盒子才有z-index属性

定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方式来实现水平和垂直居中

  1. left:50%;让盒子的坐车移动到父级元素的水平中心位置

  2. margin-left:100px;让盒子向左移动自身宽度的一半

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            /* 加了绝对定位的盒子是不能够通过设置margin来达到水平居中的 */
            /* margin:auto; */
            /* 1. left走50%，父级容器宽度的一半 */
            left: 50%;
            /* 2.margin负值往左边走，自己盒子宽度的一半 */
            margin: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
定位特殊特性

绝对定位和固定定位也和浮动类似

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            span{
                position: absolute;
                width: 200px;
                height: 150px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <span>123</span>
    </body>
    </html>

  2. 块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小

  3. 脱标的盒子不会触发外边距塌陷

    浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

  4. 绝对定位（固定定位）会完全压住盒子

    浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定位会完全压住标准流盒子内容</title>
        <style>
            .box{
                /* 浮动的元素不会压住下面标准流的文字 */
                float:left;
                width: 150px;
                height: 150px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <p>风乍起，扶摇直上九万里</p>
    </body>
    </html>

    image-20221226154628687

    但是绝对定位（固定定位）会压住下面标准流所有的内容

    1
    2
    3
    4
    5
    6
    7
    8
    .box{
                /* 浮动的元素不会压住下面标准流的文字 */
                /* float:left; */
                position: absolute;
                width: 150px;
                height: 150px;
                background-color: pink;
            }
image-20221226154825322

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

综合案例

  1. 大盒子我们类名为:tb-promo，淘宝广告

  2. 里面先放一张图片

  3. 左右两个按钮用链接就好了，左箭头prev，右箭头next

  4. 底部小圆点继续做，类名promo-nav

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-淘宝焦点图布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo {
            width: 520px;
            height: 280px;
        }

        /* 并集选择器可以声明多个相同的样式 */
        .prev,
        .next {

            top: 50%;
            position: absolute;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;


        }

        .next {
            /* 如果一个盒子我们既有left属性又有right属性，默认会执行left 同理，如果top和bottom同时存在，会执行top */
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        .promo-nav{
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255,255,255,.3);
            border-radius: 7px;
        }

        .promo-nav li{
            width: 8px;
            height: 8px;
            background-color: #fff;
            float:left;
            border-radius: 50%;
            margin: 3px;
        }

        .promo-nav  .selected{
            background-color: #ff5000;
        }



    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/tb.png" alt="">
        <!-- 左侧按钮箭头 -->
        <a href="#" class="prev">&lt;</a>
        <!-- 右侧按钮箭头 -->
        <a href="#" class="next">&gt;</a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

网页布局总结

通过盒子模型，清楚知道到部分html标签是一个盒子

通过CSS浮动、定位可以让每个盒子排列成网页

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己专门的用法

  1. 标准流

    可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

  2. 浮动

    可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

  3. 定位

    定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏

类似网页广告，当我们点击关闭就不见了，但是我们重新刷新页面，就会重新出现

本质：让一个元素在也页面中隐藏或者显示出来

  1. display显示隐藏

  2. visibility显示隐藏

  3. overflow溢出显示隐藏

display属性

display属性用于设置一个元素应如何进行显示

  • display:none;对象将会隐藏

  • display:block;除了转换为块元素之外，同时还有让元素显示的意思

display隐藏元素后，不在占有原来的位置

后面应用极其广泛，搭配js可以制作很多的网页特效

visibility可见性

visibility属性用于指定一个元素可见还是隐藏

  • visibility:visible;元素可见

  • visibility:hidden;元素隐藏

visibility隐藏元素后，仍然占有原来的位置

overflow溢出

overflow属性制定了如果内容溢出一个元素的框（超过其指定高度及宽度时），会发生什么

默认是visible，也就是显示溢出的部分

如果设置hidden，就会隐藏溢出的部分

如果设置scroll，就会始终显示滚动条

如果设置auto，就会在需要的时候添加滚动条

一般情况下，我们都不想让溢出的部分显示出来，因为溢出的部分会影响布局。

但是如果是有定位的盒子，请慎用overflow:hidden;因为它会隐藏多余的部分

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
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou:hover .mask{
            display: block;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask">
            <img src="images/tudou.jpg" alt="">
        </div>
    </div>
</body>

</html>