您现在的位置是:首页 > Javascript
当前栏目
CSS 基础知识
2023-03-15 23:24:43 时间
1、自定义变量var
css现在支持自定义变量了,有了这个特性做主题功能就方便多了 html结构
<div class="parent">
<div class="child">测试内容</div>
</div>
基础用法:var(color,default),var接收两个参数,第一个是自定义样式,第二个是默认样式,当自定义颜色变量不存在时会设置成默认样式
<style>
:root{
--color:black/*变量通过--声明*/
}
.child{
color:var(--color,#333) /*文字会显示成黑色*/
}
</style>
可以在任何标签内声明变量,优先级计算方式与其他样式相同
<style>
body{
--color:red/*变量可以在任意标签内声明,优先级计算方式跟别的样式一样*/
}
:root{
--color:black
}
.child{
color:var(--color) /*文字会显示成红色,因为body标签的优先级比伪类的优先级高*/
}
</style>
下面的例子中parent优先级最高
<style>
body{
--color:red
}
:root{
--color:black
}
.parent{
--color:blue /*变量可以在任意标签内声明,这里parent优先级最高*/
}
.child{
color:var(--color) /*文字会显示成蓝色*/
}
</style>
可以通过js动态修改div的样式修改主题颜色,下面的例子可以通过修改parent类名调整child的字体颜色
<style>
body{
--color:red
}
:root{
--color:black
}
.parent{
--color:blue
}
.parent02{
--color:purple /*parent02比parent优先级高,因为是后声明的,可以通过js动态修改class改变child的字体颜色*/
}
.child{
color:var(--color)
}
</style>
2、事件穿透pointer-events
事件穿透就是取消该元素事件触发的能力,任何事件都不会在这个元素上触发,事件会透过该元素穿透到他下边的元素上,他可以附两个值auto和none,默认auto
<div class="bottom">
<div class="top"><div>
<div>
<style>
.bottom:{
width:200px;
height:200px;
position:relative;
}
.top{
position:absolute;
top:0;
left:0;
z-index:9;
width:100%;
height:100%;
pointer-events:none; /*点击top时点击事件会作用到bottom上边,bottom的点击事件被触发*/
}
</style>
这个样式可以在一些修饰性元素上添加
3、省略号,查出容器范围显示省略号
<div class="text>省略号,查出容器范围显示省略号</div>
<style>
/*单行省略号*/
.text:{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/*多行省略号*/
.text{
display: -webkit-box; //
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
4、背景渐变色
<div class="box"></div>
<style>
.box{
width:200px;
height:200px;
background: linear-gradient(to right, red , blue);
/*background-image:linear-gradient(to right, red , blue);*//*也可以使用background-image*/
}
</style>
5、文字渐变色
<div class="box">我有渐变色</div>
<style>
.box{
background-image: linear-gradient(90deg,red,blue);
-webkit-background-clip:text;
color: transparent;
}
</style>
6、calc计算
注意:运算符两侧需要空格,没有空格会失效,可以使用vw,vh和百分比进行计算
<style>
.box{
width:100vw;
height:calc(100vh - 60px);
}
</style>
7、谷歌浏览器记住密码的input输入框默认背景色覆盖
谷歌记住密码的输入框会有一个如下的背景色,通过background无法覆盖掉,可以使用box-shadow去除
input{
box-shadow:0 0 1000px #fff inset;
}
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件