本文主旨是记录一些不常用但是非常炫酷的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记录的更多相关文章

  1. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

  2. 分享几个很实用的CSS技巧对前端技术很有帮助

    创建剪切动画 对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低. .animate { width: 200px; height: 200px; backg ...

  3. 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

    1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...

  4. Linux下几个常用的快捷键,真的很实用

    1. [tab] 键 在linux所有的shell中,[tab]是最常用的也是linux的bash  shell中最棒的功能:它具有命令补全和档案补全的功能.如果不使用[tab]键,那就别说自己懂li ...

  5. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  6. 偏门却又实用的 CSS 样式

    ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placehold ...

  7. 20个初学者实用的CSS技巧

    过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护.得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式. 不论你是 ...

  8. 100个实用的CSS技巧,以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  9. 翻了翻element-ui源码,发现一个很实用的指令clickoutside

    前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...

随机推荐

  1. 转载 修改oracle用户密码永不过期

    1.查看用户的proifle是哪个,一般是default: sql>SELECT username,PROFILE FROM dba_users; 2.查看指定概要文件(如default)的密码 ...

  2. 一台机器部署多个tomcat服务 nginx反向代理多个服务 笔记

    安装tomcat步骤           1. 下载apache-tomcat-8.0.30 ,下载下来的文件为apache-tomcat-8.0.30-windows-x64.zip         ...

  3. factory di

    services.AddScoped(typeof(Test)); //services.AddScoped<Test>() // .AddScoped<ITest, Test> ...

  4. 2016蓝桥杯"取球博弈"问题

    较难,网上有能得出正确结果的代码,但是读了一下,像是拼凑出的结果,逻辑不通,代码和注释不符 参考网上代码写了一版,结构相对清晰,注释比较详细 题目很长: 两个人玩取球的游戏.一共有N个球,每人轮流取球 ...

  5. 进程、线程与GIL全局解释器锁详解

    进程与线程的关系: . 线程是最小的调度单位 . 进程是最小的管理单元 . 一个进程必须至少一个线程 . 没有线程,进程也就不复存在 线程特点: 线程的并发是利用cpu上下文的切换(是并发,不是并行) ...

  6. 利用JAVA API函数实现数据的压缩与解压缩

      综述 许多信息资料都或多或少的包含一些多余的数据.通常会导致在客户端与服务器之间,应用程序与计算机之间极大的数据传输量.最常见的解决数据存储和信息传送的方法是安装额外的存储设备和扩展现有的通讯能力 ...

  7. 比sort()性能更好的原生js代码实现数组从小到大排序

    nums = [1,2,4,1,34,6,-1,2] for(let i = nums.length - 1; i > 0; i--) { let maxIdx = i; for(let j = ...

  8. 2522 和为K的倍数

    2522 和为K的倍数 2 秒 262,144 KB 10 分 2 级题   小b喜欢和为K的倍数的序列. 现在有一个长度为n的序列A,请问A有多少个非空连续子序列是小b喜欢的. 收起   输入 第一 ...

  9. Django+xadmin的安装与配置

    已安装python3.6.5rcl 已安装django-1.10.8(后续有错) 一.安装xadmin 1.下载xadmin,下载地址:https://github.com/sshwsfc/xadmi ...

  10. docker swarm集群搭建以及使用滚动更新

    基础环境,三台虚拟机 172.17.3.70 172.17.3.71 172.17.3.72 系统配置:centos 7,关闭selinux 需要优化的基础配置: [root@sw1 ~]# vim ...