不常用但是很实用的css记录
本文主旨是记录一些不常用但是非常炫酷的css属性,提升用户体验的捷径之一。
1、background-attachment 滚动视差 https://codepen.io/Chokcoco/pen/oMPrGZ
2、点击图片产生水纹效果 https://codepen.io/Chokcoco/pen/wxYZWO
3、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 http://www.w3school.com.cn/cssref/pr_transform.asp
4、width:fill-available,width:max-content,width:min-content,width:fit-content https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/
5、计算属性 calc() http://www.runoob.com/try/try.php?filename=trycss_func_calc
6、object-fit 调整替换元素在外部容器变化的时候所呈现的样子 https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
7、只有内联设置的width与height才能被 obj.style.width|height获取到
8、凡是需要滚动的地方都加一句scroll-behavior:smooth ,scrollIntoView可以让元素进入视区
target.scrollIntoView({
behavior: "smooth"
});
不常用但是很实用的css记录的更多相关文章
- 一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...
- 分享几个很实用的CSS技巧对前端技术很有帮助
创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
- Linux下几个常用的快捷键,真的很实用
1. [tab] 键 在linux所有的shell中,[tab]是最常用的也是linux的bash shell中最棒的功能:它具有命令补全和档案补全的功能.如果不使用[tab]键,那就别说自己懂li ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
- 偏门却又实用的 CSS 样式
::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...
- 20个初学者实用的CSS技巧
过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- 翻了翻element-ui源码,发现一个很实用的指令clickoutside
前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...
随机推荐
- Chrome 58.xxx,iisExpress 创建的SSL网站显示安全正式错误Error:net::ERR_CERT_COMMON_NAME_INVALID
https://www.reddit.com/r/sysadmin/comments/677hep/chrome_58_not_supporting_self_signed_certificates/ ...
- C语言数据结构基础学习笔记——静态查找表
查找:在数据集合中寻找满足某种条件的数据元素的过程称为查找. 查找表:用于查找的数据集合称为查找表,一般有以下操作:①查找是否在表中:②查找属性:③进行操作. 查找表又分为: ①静态查找表:只可以进行 ...
- 常见cmd命令,开发人员必备
运行程序 notepad--------打开记事本 calc-----------启动计算器 regedit.exe-------注册表 write----------写字板 mmc--------- ...
- 【JsonView工具】谷歌浏览器中安装JsonView扩展程序
接口测试过程中,有时候要查看接口返回的数据(比如Get接口),为了更方便的查看,发现这个插件挺好用的. 实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的j ...
- spring boot tomcat 打本地包成war,通过Tomcat启动时出现问题: ZipException: error in opening zip file
一个第三方公司提供spring boot 项目,直接启动是ok的, 但是打包成war,通过Tomcat启动,就出现 ZipException: error in opening zip file: 2 ...
- asp.net 微信开发(一)
在准备工作中,我们已经完成准备工作,接下来就是进行开发啦,应该怎么来开发呢??容我想想...我觉得我们可以直接让用户的消息发送到微信的消息,转到我们自己的服务器上面!!感觉好厉害的样子 1.首先写 验 ...
- HTML5 关于本地操作文件的方法
由于传统 b/s 开发出于安全性的考虑,浏览器对于本地文件的操作权限几乎没有,用户想要操作一个文件基本都是采用先上传到服务器, 再回显给浏览器供用户编辑,裁剪等的方法,这种方式虽然可行,但其对于服务器 ...
- ORM全集
Django终端打印SQL语句 LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'console' ...
- (转)Android 只开启一个Activity实例
在一个Activity中,多次调用startActivity()来启动另一个Activity,要想只生成一个Activity实例,方法有两种. 方法一:设置起动模式 一个Activity有四种启动模式 ...
- [Kafka] |FAIL|rdkafka#producer-1 : Receive failed: Disconnected
Why am I seeing Receive failed: Disconnected? 1. broker 的空闲连接回收器关闭不活跃连接. 由 broker 的配置属性 connections. ...