前端学习笔记之CSS3新特性 3.13

Terry-98

已于 2022-03-13 17:00:49 修改

阅读量546

点赞数 1

文章标签： css css3 学习

于 2022-03-13 14:40:34 首次发布

本文链接：https://blog.csdn.net/qq_36450483/article/details/123456425

版权

本文详细介绍了CSS3中伪类选择器的应用，包括使用::after实现字体图标，创建黑色半透明罩的 hover 效果，以及三种清除浮动的方法——额外标签、overflow属性和伪元素技巧。此外，还涵盖了盒模型、CSS3滤镜、calc函数和过渡效果的讲解。

摘要由CSDN通过智能技术生成

1 伪类选择器使用场景

1.1 伪元素字体图标

实现效果：

注意：使用图标是要复制style代码，并且要声明font-family: 'icomoon';

div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon'
            content: '\e91e';
            color: red;
            font-size: 18px;
        }

1.2 伪元素实现黑色半透明罩

实现效果：

注意：鼠标经过的代码书写格式为.tudou:hover::before

.tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }
.tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }

1.3 伪元素清除浮动

清除浮动方法总结：

1. 额外标签法也称为隔墙法
2. 父级添加 overflow 属性
3. 父级添加after伪元素（新）
4. 父级添加双伪元素（新）

父级添加after伪元素和父级添加双伪元素是第一种额外标签法的一个升级和优化

1.父级添加after伪元素（新）

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

2.父级添加双伪元素（新）

.clearfix:before,.clearfix:after {
content:"";
display:table;
} .
clearfix:after {
clear:both;
}

2 CSS3盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、 border-box

1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）

2. box-sizing: border-box 盒子大小为 width

注意：box-sizing: border-box 时padding和border不会撑大盒子（前提padding

和border不会超过width宽度）

因此在全文声明部分可以加上box-sizing: border-box代码

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

3 CSS3其他特性（了解）

3.1 CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法：

filter: 函数(); 例如： filter: blur(5px);

blur模糊处理数值越大越模糊，注意一定要加单位px

img {
           filter: blur(15px);
        }

3.2 CSS3calc函数

在声明CSS属性值时执行一些计算。
语法：width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算。

.box{
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }