LV1 之------DAY3 伪元素伪类 & 定位与层级关系

最新推荐文章于 2024-07-04 17:39:05 发布

水兮泱泱

最新推荐文章于 2024-07-04 17:39:05 发布

阅读量533

点赞数

分类专栏：学习笔记前端LV1

本文链接：https://blog.csdn.net/DU123_/article/details/89007716

版权

LV1 之------DAY3 伪元素（伪类）&定位&层级关系

一、伪类与伪元素：

最直接的区别：
①伪类 1个 “：”--------如：hover
②伪元素 2个“：”--------如：：after
伪类与伪元素的区别及特性
二、3种定位
1、 position: absolute
绝对定位：完全脱离文档流
① 父级有定位：以所有父级元素参考
②父级未定位：以html/body
2、position: relative ;
相对定位：不脱离以自身为参考
3、position: fixed;
固定定位：全脱离以浏览器可视窗口参考
上述定位都可用坐标 (即以参考对象的左上角）
可以通过 left right top bottom 以其所对应的参考对象为自己设置坐标
定位造成的父级元素高度塌陷只能给父级元素设高度

- 绝对定位： position: absolute；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="">
        .bigBox{
            width: 300px;
            height: 300px;
            /* margin-left: 200px; */
            position: absolute;
            left: 300px;
            background: #dedede;
        }
        .small{
           
        }
        .box1{
            /* 绝对定位
                完全脱离文档流
                宽度 是内容的大小或者width
                可以通过 left right top bottom 设置坐标

                    以谁作为参考？ body？
                如果所有父元素没有定位 则以body 参考  否则 以父元素进行参考
             */
            /* position: absolute;
            left: 0;
            top: 0; */
            position: absolute;
            background: deeppink;
        }
        .box2{
            width: 150px;
            height: 150px;
            background: deepskyblue;
        }
    </style
</head>
<body>
    <div class="bigBox">
        <div class="small box1">box1</div>
        <div class="small box2">box2</div>
    </div>
</body>
</html>

- 相对定位：position：relative;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

最低0.47元/天解锁文章

水兮泱泱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LV1 之------DAY3 伪元素伪类 & 定位与层级关系

LV1 之------DAY3 定位与层级关系一、3种定位1、 position: absolute绝对定位：完全脱离文档流① 父级有定位：以所有父级元素参考②父级未定位：以html/body2、position: relative ;相对定位：不脱离以自身为参考3、position: fixed;固定定位：全脱离以浏览器可视窗口参考上述定位都可用坐标 (即以参...
复制链接

扫一扫

专栏目录