掌握好这几个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从左侧到右侧,从红色到黄色的渐变。
如无作者授权,请勿转载。
- AngularJS in Action读书笔记3——走近Services
- 有了这些无人驾驶的汽车,未来还需要考驾照吗?
- 并发与实例上下文模式: WCF服务在不同实例上下文模式下具有怎样的并发表现
- AngularJS in Action读书笔记4(实战篇)——创建Statistic模块
- Effective Deep Memory Networks for Relation Extraction
- ConcurrencyMode.Multiple模式下的WCF服务就一定是并发执行的吗:探讨同步上下文对并发的影响[上篇]
- WCF技术剖析之二十一:WCF基本异常处理模式[下篇]
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
- WCF中并发(Concurrency)与限流(Throttling)体系深入解析系列[共7篇]
- AngularJS in Action读书笔记6(实战篇)——bug hunting
- FreeMarker模板开发指南知识点梳理
- WCF技术剖析之二十: 服务在WCF体系中是如何被描述的?
- WCF如何克服HTTP传输协议的局限提供对不同消息传输模式的实现
- H5手游大事件:腾讯上线“微信小游戏”!支持群分享与内购
- 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 数组属性和方法
- Pytorch 0.4.0版本保存的模型在高版本调用问题的解决方式
- Qt音视频开发27-Onvif设备搜索
- 容器化 FRP 使用方案
- 学习从拥有一支好笔开始
- leetcode栈之最小栈
- Discourse 安装防火墙的配置如何让邮件能够发送
- CentOS 8 如何安装 htop
- Discourse 重复安装过程中的密钥签发问题
- Appium之「元素定位和UiAutomator表达式」
- 机器人软件开发:机器人开源库安装
- 2020-10-05:如何求模平方根?
- leetcode栈之比较含退格的字符串
- Discourse 如何不使用 Let’s Encrypt 而使用 CA 签名的密钥进行安装
- 3分钟短文:Laravel slug,让你的url地址更“好记”
- Qt音视频开发28-Onvif信息获取