写在前面
Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误或不足之处,请多多指正!谢谢大家!!!
如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!
目录
【其他系列】
1. CSS3 简介
1.1 CSS3 概述
- CSS3 是 CSS2 的升级版本,它在 CSS2 的基础上,新增了很多强大的新功能,从而解决一些实际面临的问题。
- CSS3 在未来会按照模块化的方式去发展:
- CSS3 的新特性如下:
- 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
- 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
- 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
- 新增了全新的布局方案 —— 弹性盒子。
- 新增了 Web 字体,可以显示用户电脑上没有安装的字体。
- 增强了颜色,例如: HSL 、 HSLA 、 RGBA 几种新的颜色模式,新增 opacity 属性来控制透明度。
- 增加了 2D 和 3D 变换,例如:旋转、扭曲、缩放、位移等。
- 增加动画与过渡效果,让效果的变换更具流线性、平滑性。
1.2 CSS3私有前缀
什么是私有前缀
- 如下代码中的 -webkit- 就是私有前缀
div { width:400px; height:400px; -webkit-border-radius: 20px; }
为什么要有私有前缀
- W3C 标准所提出的某个 CSS 特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核,使用私有前缀来测试该 CSS 特性,在浏览器正式支持该 CSS 特性后,就不需要私有前缀了。
- 举个例子:
-webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;
- 查询 CSS3 兼容性的网站:https://caniuse.com/
常见浏览器私有前缀
- Chrome 浏览器: -webkit-
- Safari 浏览器: -webkit-
- Firefox 浏览器: -moz-
- Edge 浏览器: -webkit-
- 旧 Opera 浏览器: -o-
- 旧 IE 浏览器: -ms-
注意:
- 我们在编码时,不用过于关注浏览器私有前缀,不用绞尽脑汁的去记忆,也不用每个都去查询,因为常用的 CSS3 新特性,主流浏览器都是支持的,即便是为了老浏览器而加前缀,我们也可以借助现代的构建工具,去帮我们添加私有前缀。
2. CSS3新增的3个基本属性
2.1 CSS3 新增长度单位
- rem 根元素字体大小的倍数,只与根元素字体大小有关。
- vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
- vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
- vmax 视口宽高中大的那个的百分之多少。(了解即可)
- vmin 视口宽高中小的那个的百分之多少。(了解即可)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新增长度单位</title> <style> * { margin: 0; padding: 0; } .box1 { width: 200px; height: 200px; background-color: deepskyblue; } .box2 { width: 20vw; height: 20vh; background-color: green; } .box3 { width: 20vmax; height: 20vmin; background-color: orange; } </style> </head> <body> <div class="box1">像素</div> <div class="box2">vw和vh</div> <div class="box3">vmax</div> </body> </html>
2.2 CSS3 新增颜色设置方式
- CSS3 新增了三种颜色设置方式,分别是: rgba 、 hsl 、 hsla
- 这些在 CSS2 中已经详细讲解:
- 地址:https://blog.csdn.net/qq_34025246/article/details/129918059
2.3 CSS3 新增选择器
- CSS3 新增的选择器有:动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素;
- 这些在 CSS2 中已经详细讲解:
- 地址:https://blog.csdn.net/qq_34025246/article/details/129903322
结语
本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力