掌握好这几个css属性,少写100行js代码
时间:2022-07-22
本文章向大家介绍掌握好这几个css属性,少写100行js代码,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.calc函数
calc可动态设置某个元素的长度。
html{
font-size:calc(100vw / 8)
}
.main{
width:100%;
height:calc(100vh - 200px)
}
比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性
2.attr函数
这个函数用于获取元素的属性的值,我常用于在before等伪类样式中。
ul li::before {
position: absolute;
color: #fff;
left: calc(100% - 50px);
font-size: 12px;
content: attr(data-tip);
line-height: 40px;
transform: scale(0);
transition: all 0.8s;
}
html
<li data-tip="about"><a href="">关于我们</a></li>
<li data-tip="center"><a href="">项目中心</a></li>
<li data-tip="media"><a href="">媒体报道</a></li>
attr就获取li元素中data-tip属性,然后加入到before中,注意不是所有的属性都可以用attr获取。
3.nth-child()
这个属性大家应该用的还是比较多,可用于选择特定的元素。
ul li:nth-child(odd){background-color:green;}/*设置单行样式*/
ul li:nth-child(even){background-color:gray}/*设置双行样式*/
ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */
ul li:nth-child(4){background-color:green;}/*单独设置第四个li*/
ul li:nth-child(3n+2){background-color:green;}/*匹配2,5,8,11...*/
ul li:nth-child(n+6){background-color:green;}/*从第六个li开始匹配*/
ul li:nth-child(-n+6){background-color:green;}/*匹配1-6的元素*/
ul li:nth-child(n+3):nth-child(-n+5){background-color:green;}/*匹配3-5的元素*/
ul li:nth-child(3n-1){background-color:green;}/*匹配(3-1),(6-1),(9-1)....*/
4.invalid和vaild
这两个css属性主要配合文本框的pattern的属性使用,验证成功时加载vaild样式,失败加载invaild样式
html
<input type="text" placeholder="请输入你的手机" pattern="^1[3456789]d{9}$" required>
css
input:invalid{background:Red}
input:valid{background:green}
5.filter: grayscale
这个属性主要是修改元素的黑白度,比如某人去世,让界面变灰,就可以使用此属性
html{filter:grayscale(100%);}
这样就可以使得页面变成灰色,适用于悼念某人的情况下。
6.linear-gradient
此属性配合background使用,实现渐变的背景
div{background-image:linear-gradient(to right, red , yellow); }
上述代码设置div从左侧到右侧,从红色到黄色的渐变。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux被中断的系统如何调用详解
- centos 修改ssh默认端口号的方法示例
- Linux中特殊权限SUID、SGID与SBIT的深入讲解
- linux新文件权限设置之umask的深入理解
- 在 CentOS 8/RHEL 8 上安装和使用 Cockpit的方法
- Linux删除文件提示Operation not permitted的处理办法
- 微任务与宏任务
- Linux 文件权限的详细介绍
- Linux统计一个文件中特定字符个数的方法
- CentOS7 安装 zabbix 4.0 教程(图文详解)
- 浅谈简单使用CentOS7防火墙及开放端口
- Linux后台运行Python程序的几种方法讲解
- tr命令在统计英文单词出现频率中的妙用
- 浅析CentOS8虚拟机访问Windows10主机文件夹方法
- CentOS 7 安装 Jenkins过程详解