代码编织梦想

前言: 页面布局要学习三大核心,盒子模型,浮动 和定位

1.CSS定位

需要解决一下问题:

能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别

1.1为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗?

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

比如:电商网站下滑的时候,某些盒子会固定在某个位置不会移动

此时,标准流或浮动都无法快速实现,此时需要定位来实现

所以:

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

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

1.2定位的组成

定位:将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

6.2.1定位模式

定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

6.2.2 边偏移

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

边偏移属性示例描述
toptop:80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom:80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft:80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright:80px右侧偏移量,定义元素相对于其父元素右边线的距离

1.2.1静态定位(了解)

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

语法:

选择器 { position: static; }

特性:

1.静态定位按照标准流特性摆放位置,它没有边偏移

2.静态定位在布局时很少用到

1.2.2相对定位relative(重要)

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。

语法:

选择器 { position: relative; }

相对定位的特点:

1.它是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)

2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来的位置)

(脱标——指的是脱离标准流)

执行代码:

<!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>
        .box1 {
            /* 给第一个盒子相对定位 第一步代码 */
            position: relative;
            /* 第二步代码 给盒子添加边偏移 */
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(56, 207, 218);
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 61, 190);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwuGm4GB-1664758117352)(Typora_image/163.png)]

因此,相对定位并没有脱标,最典型的应用是给绝对定位当爹的。。。

1.2.3绝对定位absolute(重要)

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)

语法:

选择器 { position:absolute; 

绝对定位的特点:

1.2.3.1特点一

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

执行代码:

<!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 {
            width: 500px;
            height: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            top: 300px;
            left: 100px;
            /* bottom: 10px; */
            /* right: 50px; */
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

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

</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wuSXHwZ3-1664758117354)(Typora_image/164.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXR6mXaF-1664758117355)(Typora_image/165.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCZn6h44-1664758117356)(Typora_image/166.png)]

1.2.3.2 特点二

如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置

(孩子,爸爸,爷爷——爸爸没定位,爷爷有,这个盒子就以爷爷为主了)

(孩子,爸爸,爷爷——爸爸有定位,爷爷也有,这个盒子就以爸爸为主了)

执行代码1:

<!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: 400px;
            background-color: rgb(187, 173, 173);
        }

        .son {
            position: absolute;
            /* top: 50px;
            left: 100px; */
            /* 在祖先元素定位后,更改孩子的位置  第二步 */
            left: 200px;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: rgb(79, 200, 209);
        }
    </style>
</head>

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

</html>

效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI5fSbFf-1664758117358)(Typora_image/167.png)]

执行代码2:

<!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>
        .greatfather {
            /* 添加相对定位  用于对son的约束*/
            position: relative;
            width: 400px;
            height: 400px;
            background-color: rgb(20, 236, 208);
            /* margin-top: 100px; */
        }

        /* 外边距合并的问题的检验:小盒子外边距向下移动50px,大盒子向下移动100px,最后大小盒子都是向下移动100px */
        /* 大小盒子嵌套,大盒子向下移动100px,大小盒子整体都是向下移动100px  */
        /* 大小盒子嵌套,小盒子向下移动50px,大小盒子整体都是向下移动50px */
        .father {
            width: 200px;
            height: 200px;
            background-color: rgb(233, 236, 33);
            margin-top: 100px;
        }

        .son {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 50px;
            height: 50px;
            background-color: rgb(219, 81, 27);


        }
    </style>
</head>

<body>
    <!-- .greatfather>.father>.son -->
    <div class="greatfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anlmxzkK-1664758117360)(Typora_image/168.png)]

1.2.3.3 特点三

绝对定位不再占用原先的位置。(脱标)

1.3子绝父相

问题:

1.绝对定位和相对定位到底有什么使用场景呢?

2.为什么说相对定位给绝对定位当爹呢?
子绝父相的意思是:如果子级使用绝对定位,父级则需要相对定位

浮动的特点:只会影响插入浮动元素之后的元素

绝对定位不保留位置,相对定位才保留位置

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

(2) 父盒子需要加定位限制子盒子在父盒子内显示

(3) 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

1.4固定定位fixed(重要)

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

语法:

选择器 { position: fixed; }

固定定位的特点:

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

(1) 跟父元素没有任何关系

(2) 不随滚动条滚动

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

固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。

(把绝对定位看作是一个矩形,把固定定位看作是一个正方形,正方形也是一个特殊的矩形)

执行代码:

<!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>
        .dj {
            position: fixed;
            top: 100px;
            right: 40px;
            /* left: 0; */
        }
    </style>
</head>

<body>
    <div class="dj">
        <img src="../access/pvp.png" alt="固定定位所用的图片">
    </div>
    <p>在春天里,发现你最美!</p>
    <p>在春天里,发现你最美!</p>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AB7HsssU-1664758117361)(Typora_image/169.png)]

1.4.1 固定定位小技巧

——固定在版心右侧位置。

小算法:

1.让固定定位的盒子left:50%.走到浏览器可视区(也可以看做版心)的一半位置。

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

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

执行代码:

<!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: rgb(102, 218, 212);
            margin: 0 auto;
        }

        .fixed {
            /* 固定定位 */
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 走版心的一半 */
            /* margin-left: 400px; */
            margin-left: 405px;
            /* 向下移动点 */
            top: 100px;
            width: 50px;
            height: 150px;
            background-color: rgb(128, 224, 84);
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGh86sCw-1664758117362)(Typora_image/170.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AX3INyfS-1664758117363)(Typora_image/171.png)]

1.5 粘性定位 sticky (了解)

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

单词英标词意
relative[ˈrelətɪv]相对的; 相比较而言的; 比较的; 相关联的;
absolute['æbsəlu:t]完全的; 全部的; 纯粹的;
fixed[fɪkst]固定的; 不变的; 不能变的; 不易改变的;
sticky[ˈstɪki]粘性的; 黏(性)的; 一面带黏胶的;

语法:

选择器 { position: sticky; top: 10px; }

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配。兼容性较差,IE不支持

执行代码:

<!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;
            /* 第二步        top 0 指的是顶部当为0像素时,变成固定定位了*/
            top: 0;
            width: 800px;
            height: 50px;
            background-color: rgb(95, 212, 197);
            margin: 100px auto;
        }
    </style>
</head>

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

</html>

效果显示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQYFesbh-1664758117364)(Typora_image/172.png)]

1.6 定位的做总结

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

1.一定记住相对定位、固定定位、绝对定位 两个大的特点:1.是否占有位置(脱标否) 2.以谁为基准点移动位置

2.学会定位重点学会子绝父相。

1.7定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后顺序(z轴)

语法:

选择器 { z-index: 1; }

(1) 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上

(2) 如果属性值相同,则按照书写顺序,后来居上

(3) 数字后面不能加单位

(4) 只有定位的盒子才有z-index属性

执行代码:

<!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>
        .one,
        .two,
        .three {
            /* 加定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        /* 标准流没有先后叠放次序 */
        .one {
            background-color: rgb(201, 50, 23);
            /* 给第一个盒子添加z-index */
            z-index: 1;
        }

        .two {
            background-color: rgb(230, 216, 23);
            left: 50px;
            top: 100px;
            z-index: 2;
        }

        .three {
            background-color: rgb(41, 230, 236);
            left: 150px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>
    <div class="three">第三个盒子</div>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkgyW9ci-1664758117366)(Typora_image/173.png)]

1.7.1定位的拓展(一)

(1) 绝对定位的盒子居中

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

水平居中:

(1) left: 50%; :让盒子的左侧移动到父级元素的水平中心位置

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

垂直居中:

(1) top:50%: 让盒子的顶部移动到父级元素的垂直中心位置

(2) margin-top: -100px; :让盒子向上移动自身高度的一半。

执行代码:

<!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 {
            position: absolute;
            /* 绝对定位的盒子水平居中显示  第一步:left走50% 父容器宽度的一半*/
            left: 50%;
            /* 第二步  margin-left 负值 往左边走 自己盒子宽度的一半 */
            /* margin-left: -100px; */
            /* 盒子垂直居中第一步 top走50% 父容器高度的一半 */
            /* top: 50%; */
            /* 盒子垂直居中第二步  margin-top 负值 往上走,自己盒子高度的一半 */
            /* margin-top: -100px; */
            width: 200px;
            height: 200px;
            background-color: rgb(211, 26, 186);
            /* 让盒子居中对齐 */
            /* margin: 0 auto; */
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OA2YcxcI-1664758117366)(Typora_image/174.png)]

1.7.2定位的拓展(二)

1.定位的特殊特性

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

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

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

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

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

执行代码:

<!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>
        /* 行内块元素有个绝对定位,可以直接给高度宽度 */
        span {
            position: absolute;
            background-color: rgb(106, 224, 240);
            top: 100px;
            width: 200px;
            height: 200px;
        }

        div {
            position: absolute;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>123</span>
    <div>abc</div>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7auMSRp-1664758117368)(Typora_image/175.png)]

1.7.3 定位的拓展(三)

1.绝对定位(固定定位) 会完全压住盒子

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

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

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

执行代码:

<!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; */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: rgb(33, 207, 207);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p>飞流直下三千尺, 疑是银河落九天。</p>
</body>

</html>

效果展示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCeWRpUo-1664758117370)(Typora_image/176.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NS5OsTz2-1664758117374)(Typora_image/177.png)]

1.8 案例:淘宝焦点图布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EQp0Ukj-1664758117376)(Typora_image/178.png)]

分析:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJCdfVGl-1664758117377)(Typora_image/179.png)]

组成命名
大盒子类名为: tb-promo 淘宝广告
图片展示的图片
左右两个按钮按钮用链接处理 。左箭头 prev 右箭头 next
底侧小圆点ul处理,类名为 prmo-nav

执行代码:

<!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的样式  (前面有小黑点) */
        li {
            list-style: none;
        }

        .tb-promo {
            /* 子绝父相 */
            position: relative;
            width: 520px;
            height: 280px;
            /* background-color: orange; */
            /* 居中对齐  标准流可以通过auto水平居中 */
            margin: 100px auto;
        }

        /* 相对定位不脱离标准流,跟标准流一样,都可以通过margin : auto实现水平居中 */
        /* 绝对定位和固定固定不可以直接实现水平或者垂直居中   要实现需要用到上文中的算法 */

        /* 强制规定图片的大小 */
        .tb-promo img {
            width: 520px;
            height: 280px;

        }

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

            /* left: 0; */
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 30px;
            color: #fff;
            /* 去掉链接的下划线 */
            text-decoration: none;
        }

        .prev {
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级),就可以直接设置宽和高 */
            /* position: absolute; */
            left: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子,要实现垂直居中,需要用到算法 */
            /* top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的右上角设置 */
            border-top-right-radius: 15px;
            /* 盒子的右下角设置 */
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性,则默认会执行left属性, 同理  top  bottom 都有时,则会执行top属性 */
            /* 加了绝对定位的盒子不需要默认转换(行内变成块级),就可以直接设置宽和高 */
            /* position: absolute; */
            right: 0;
            /* top: 0; */
            /* 加了绝对定位的盒子,要实现垂直居中,需要用到算法 */
            /* top: 50%; */
            /* margin-top: -15px; */
            /* width: 20px; */
            /* height: 30px; */
            /* background: rgba(0, 0, 0, .3); */
            /* 文本水平居中 */
            /* text-align: center; */
            /* 文本垂直居中 */
            /* line-height: 30px; */
            /* color: #fff; */
            /* 去掉链接的下划线 */
            /* text-decoration: none; */
            /* 设置盒子的边角 */
            /* border-radius: 15px; */
            /* 盒子的左上角设置 */
            border-top-left-radius: 15px;
            /* 盒子的左下角设置 */
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            /* 子绝父相 */
            position: absolute;
            bottom: 15px;
            /* left: 0; */
            /* 绝对定位实现水平居中的方法 */
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            /* background-color: blue; */
            /* 白色半透明 */
            background: rgba(255, 255, 255, .3);
            /* 盒子边框变圆角 */
            border-radius: 7px;
        }

        .promo-nav li {
            /* 添加浮动,让它们在一行显示 */
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            /* 把正方形改成圆 */
            border-radius: 50%;
            /* 执行外边距,上下左右都是3px */
            margin: 3px;
        }

        /* li被选择带颜色 */
        .promo-nav .selected {
            /* 直接设定颜色,不会变色   因为上面已经设定了白色,根据元素的层叠性,要考虑权重的问题 */
            /* 解决方法:加权重 */
            background-color: #ff5000;
        }
    </style>
</head>


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

</html>

效果显示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U7iVOvoX-1664758117378)(Typora_image/180.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBonrH0p-1664758117379)(Typora_image/181.png)]

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_57021623/article/details/127149041

前端笔记——CSS定位(Position)属性详解!-爱代码爱编程

今天我们来谈谈什么CSS定位属性( Position)? 在了解之前,需要知道CSS的定位机制:它们分别有:普通流、浮动流、定位流。 1、普通:上下排列的布局(注:大部分情况) 2、浮动:左右排列的布局(注:大部分情况) 3、定位:层叠(叠加)排列的布局 (注:大部分情况) 而在CSS中,定位属性(position)又分别有:如下几种:1. posit

web前端入门——CSS中的几种定位详解及应用-爱代码爱编程

目录 css定位定位方式:position绝对定位和相对定位的区别定位元素层次关系定位元素居中方式定位的注意事项定位元素的应用 css定位 CSS 有三种基本的定位机制:普通流、浮动流、定位流。 其中: 普通流: 从上至下,从左至右 浮动流: 元素添加了float:; 定位流: 添加了定位属性 一个脱离了文档流的元素: 文档流中的元素摆放

前端基础学习——CSS入门详解-爱代码爱编程

CSS CSS 是指层叠样式表 (Cascading Style Sheets),使用样式来定义如何显示 HTML 元素。 1. CSS样式表 1.1. 行内式(内联样式) <div style="color: red; font-size: 12px;">青春不常在</div> 1.2. 内部样式表(内嵌样式

web前端之CSS——web字体详解-爱代码爱编程

前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体。从此,把特殊字体处理成图片的方式便成为了过去。 支持程度比较好,甚至 IE 低版本的浏览器也能支持。 字体的常见格式 不同浏览器所支持的字体格式是不一样的,我们有必要了解一下字体格式的知识。 TureTpe格式:(.ttf

CSS基础学习——定位-爱代码爱编程

目录 1. 定位1.1 为什么需要定位1.2 定位组成1.2.1 定位模式1.2.2 边偏移1.3 静态定位 static(了解)1.4 相对定位 relative(重要)1.5 绝对定位 absolute(重要)1.5.1 绝对定位——父级无定位1.5.2 绝对定位——父级有定位1.6 子绝父相的由来1.7 案例:学成在线-hot new模块添加

前端笔记(01)——定位的使用-爱代码爱编程

定位是前端比较重要的属性之一,此篇文章主要介绍定位的使用方法。 一、定位的种类及作用; 常用的定位有以下几种: 1、staic:静态定位;按照正常的文档流来进行排布。 2、relative:相对定位;在原位置的基础上进行位置移动,原位置保留,一般与子元素的绝对定位配合使用; 3、absolute:绝对定位;相对最近一级的已经定位的父辈元素进行位置偏移,

CSS入门基础详解——笔记、案例-爱代码爱编程

CSS入门学习 一、CSS简介 1、什么是css         css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 2、CSS的作用         CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行

前端面试--css篇(持续更新)-爱代码爱编程

1.盒子模型 普通盒子模型: 低版本IE盒子模型:根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。 2.css选择器

前端面试准备之——css篇_要不要买菜啊的博客-爱代码爱编程

CSS单位 CSS单位_小瑾沐晚风的博客-CSDN博客_css单位 transform CSS 变形(CSS3) transform_快乐de馒头的博客-CSDN博客_css transform line-height line-height详解_一只气鼓鼓的小河豚的博客-CSDN博客_line-height CSS盒模型 CSS盒模型完整介

【web前端面试】葵花宝典(2022版本)——css篇_不苒的博客-爱代码爱编程

文章目录 前言正文1.说一下css盒模型2.说一下CSS 3中引入的`box-sizing`属性3.`link` 标签和`import`标签的区别4.`transition`和`animation`的区别5.说说flex布局6.BFC(块级格式化上下文,用于清除浮动,防止margin重叠等)7.关于JS动画和css3动画的差异性8.说一下块元素和行

2022前端面试—css篇_life free的博客-爱代码爱编程

文章目录 一、CSS部分 css3新特性及详解:1.圆角border-radius2.阴影之box-shadow3.文字阴影text-shadow4.背景渐变linear-gradient5.转换transfo

10、前端开发:css知识总结——盒子模型(box model)(1)_bool doubleyellow的博客-爱代码爱编程

1、定义 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin

css文档流——position,float属性详解_position 文档流-爱代码爱编程

目录 一、文档流是什么 二、脱离文档流 1、设置浮动(float) float的几个属性介绍: 2、设置定位(position) position属性: 写在最后 一、文档流是什么 由于之前思否社区写的文章,我的主页:夨落旳尐孩 的文章 - SegmentFault 思否 所以这篇文章就直接从CSS文档流开始讲了,如果文

前端——css部分总结_前端css 多古诺-爱代码爱编程

目录 CSS简介CSS语法CSS选择器CSS伪类CSS 3D转换 CSS简介 CSS 指的是层叠样式表 (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示