前端8day-css 元素定位

.box::before{
                content:"我是在元素内部之前用css写出的文字--"
            
            }
            .box::after{
                content:"我是在元素内部之后用css写出的文字"
            }

html部分则是只有一个盒子

<div class="box">html里的内容--</div>

呈现效果如图：

检查浏览器时可看出在HTML中用伪对象选择器写的部分没有具体文字

3)自定义伪元素

伪元素默认是行内元素，行内元素无法设置宽度和高度，因此需要转化为块级元素

可以用：display：block；

或者：float：left；

就可以转化为块级元素

示例：

css:样式：（使用float：left）


.box::before{
                content:"";
                width: 300px;
                height: 20px;
                background-color: pink;
                float: left;
                
            }

效果：(float最开始是做文字环绕因此文字在右边)

css样式（使用display:block）

.box::before{
                content:"";
                width: 300px;
                height: 20px;
                background-color: pink;
                display: block;
                
            }

效果：（单纯转化为块级元素因此在下方）

1.5属性选择器

利用html的属性（了解）

[属性]

[属性=属性值]

元素[属性=属性值]

2.position 元素定位

2.1 static 默认值静态定位

2.2 relative 相对定位

相对于原位置定位

配合left,right,top,bottom四个属性移动，当四个属性同时存在，left，top生效。

参照点为左上角，往右下移动取正值;往左上移动取负值

参照点为右下角，往左上移动取正值;往右下移动取负值

相对定位后原位置保留

应用场景：

1)配合绝对定位使用

2)自己小范围移动

2.3 fixed 固定定位

相对于浏览器窗口定位

配合left,right,top,bottom四个属性移动，当四个属性同时存在，left，top生效。

固定定位后原位置不保留

应用场景：

固定在页面某个位置

2.4 sticky 粘性定位

相当于相对定位和固定定位的结合

默认为相对定位.当页面滚动,转换为固定值

示例：页面滚动时，图片转换为固定值（固定在浏览器顶部）

css：

body{
            /* 使页面能够下拉 */
            height: 5000px;
        }
img{
    position: sticky;
    top: 0;
    /* 将图片变为块元素并使其居中 */
    display: block;
    margin: 0 auto;
    height: 400px;
   }

html：

<body>
        <div>
            <img src="./images/0848d9ebbb01fa0f2d1648bab16c44f.jpg" alt="">
            <img src="./images/10503ac70ca51058a659a251f6cb6f0.jpg" alt="">
            <img src="./images/4716bedff6353ac7f970c76e64ac25d.jpg" alt ="">
            <img src="./images/0848d9ebbb01fa0f2d1648bab16c44f.jpg" alt="">
            <img src="./images/56420d3c25e3ae5f33ac209803cf87a.jpg" alt="">
            <img src="./images/acde8ee17baf4e1b04fd73881b34f5f.jpg" alt="">
            <img src="./images/ada0dc5c033a2b896f4ebbee448b50c.jpg" alt="">
            <img src="./images/bf2e4f48ad391aae7b7f3b05f4c64a7.jpg" alt="">
            <img src="./images/d2f494efcf3f47199fe09f7a54661ef.jpg" alt="">
            <img src="./images/f33ef6c75aceb7b4733cff1d352ef07.jpg" alt="">
            <img src="./images/fcfe081077a097c0633b99799cd709c.jpg" alt="">
          
        </div>
</body>

效果：

sticky粘性定位-动态效果

2.5 absolute 绝对定位

相对于已经定位的父元素定位

若父元素没有定位,则逐级向上寻找,最后相对于初始包含框定位(浏览器视口)

配合left,right,top,bottom四个属性移动，当四个属性同时存在，left，top生效。

应用场景:

在页面形成独立的一层

示例一：;实现如图效果：

分析：

1.一个大盒子里面包含一个小盒子

2.这里文字部分不进行描写主要练习布局

css：

<style>
        .big-box{
            /* 子绝父相 */
            width: 303px;
            height: 375px;
            position: relative;
        }

        img{
            width: 100%;

        }
        .wenzi{
            width: 100%;
            height: 88.5px;
            position: absolute;
            bottom:26px;
            background-color: pink;
        }
</style>

html部分：

<div class="big-box">
        <a href="#">
            <img src="./图1.png" alt="">
            <div class="wenzi"></div>
        </a>

    </div>

最终效果成型：

示例二：实现如图效果：

利用绝对定位设置样式

css：

        .big-box{
            width: 400px;
            height: 400px;
            position: relative;
            /* 隐藏溢出部分 */
            overflow: hidden;
        }
        img{
            width: 100%;
        }

        /* 鼠标悬停效果,让阴影部分到图片中 改变以后距左边为0px */
        .big-box:hover .shadow{
            left: 0px;
        }
        .shadow{
            position:absolute;
            /* 阴影盒子在big-box的右边 */
            left: 400px;
            top:0px;
            width: 400px;
            height: 400px;
            background-color: rgba(0,0,0,.5);
            /* 过渡效果 */
            transition: 1s;
        }

html：


    <div class="big-box">
        <a href="#">
            <img src="./images/4716bedff6353ac7f970c76e64ac25d.jpg" alt="">
            <div class="shadow"></div>
        </a>

    </div>