伪元素选择器-清除浮动-CSS3过渡

最新推荐文章于 2024-07-19 22:22:29 发布

s_meng_

最新推荐文章于 2024-07-19 22:22:29 发布

阅读量360

点赞数

分类专栏：前端文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/s_meng_/article/details/115582923

版权

前端专栏收录该内容

39 篇文章 3 订阅

订阅专栏

伪元素选择器

伪元素的权重为1，微元素可以利用CSS创建新的标签元素，而不需要HTML标签，从而简化HTML结构。
下面我只介绍两个:
在这里插入图片描述

::before和::after创建一个元素,但是属于行内元素
新创建的元素在文档树中找不到,称为伪元素
使用放法: 选择器::before {}
::before和::after标签必须有content属性
::before在父元素内容的前面创建元素，content在父元素内容的后面创建元素
伪元素选择器和标签选择器的权重都是1

伪元素选择器的使用：

<style>
        @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?9gmtwd');
            src:  url('fonts/icomoon.eot?9gmtwd#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?9gmtwd') format('truetype'),
                url('fonts/icomoon.woff?9gmtwd') format('woff'),
                url('fonts/icomoon.svg?9gmtwd#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
            }
        div {
            position: relative;
            width: 400px;
            height: 50px;
            border: 1px solid red;
        }
        div::after {
            font-family: 'icomoon';
            position: absolute;
            top: 15px;
            right: 15px;
            content: '\e901';
            color: pink;
            font-size: 18px;
        }
    </style>
<body>
    <div></div>
</body>

效果如下:
在这里插入图片描述

使用伪元素清除浮动

给需要清除浮动元素的父级添加clearfix属性

<style>
        .box {
            background-color: skyblue;
        }
        .big,
        .sml {
            width: 200px;
            height: 60px;
            background-color: pink;
            margin: 10px;
            float: left;
        }
        .clearfix::after {
            /* 伪元素必须有的属性 */
            content: '';
            /* 转为块级元素 */
            display: block;
            /* 高设置为0 */
            height: 0;
            /* 清除浮动 */
            clear: both;
            /* 隐藏元素 */
            visibility: hidden;
        }
</style>

<body>
    <div class="box clearfix">
        <div class="big"></div>
        <div class="sml"></div>
    </div>
</body>

在这里插入图片描述

双伪元素清除浮动

<style>
        .box {
            background-color: skyblue;
        }
        .big,
        .sml {
            width: 200px;
            height: 60px;
            background-color: pink;
            margin: 10px;
            float: left;
        }
        .clearfix::after,
        .clearfix::before {
            content: "";
            /* 转换为块级元素并在一行显示 */
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
</style>

<body>
    <div class="box clearfix">
        <div class="big"></div>
        <div class="sml"></div>
    </div>
</body>

在这里插入图片描述

CSS3中的函数

使图片模糊化处理filter:blur()

filter:blur()数值越大,图片越模糊

计算盒子的大小cacl()

例如：让子元素的宽度永远比父元素小30px；
子元素的样式：with: cacl(100%-30px);
括号内可以使用"+" "-" "*" "/"来计算。

CSS3过渡

transition: property duration timing-function delay;
transtion: 要过渡的属性花费时间运动曲线何时开始
谁做过渡给谁添加transition属性
运动曲线: 默认ease 可以省略不写
何时开始: 默认0s 可以省略不写

进度条的案例:

<style>
        .father {
            width: 150px;
            height: 10px;
            border: 1px solid red;
            border-radius: 10px;
            padding: 1px;
        }
        .son {
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 5px;
            transition: all .7s;
        }
        .father:hover .son {
            width: 100%;
        }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>