本文主旨是记录一些不常用但是非常炫酷的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. 理解block和inode

    什么是block和inode? 定义:block就像是杯子 inode就像是杯子的编号,因为杯子太多了 1.根据文件的大小,在磁盘中储存时会占用一个或多个block:那么究竟多大的文件会使用一个blo ...

  2. JAVA之Mybatis基础入门--框架搭建与简单查询

    JAVA中,操作数据库有JDBC.hibernate.Mybatis等技术,今天整理了下,来讲一讲下Mybatis.也为自己整理下文档: hibernate是一个完全的ORM框架,是完全面向对象的.但 ...

  3. springmvc简单的流程说明及源码分析

    框架流程图 springmvc的核心类org.springframework.web.servlet.DispatcherServlet,是一个servlet,间接继承了httpservlet;重写了 ...

  4. js 索引数组转JSON为空

    let a = [] a.a = 1 console.log(a) // [a: 1] console.log(JSON.stringify(a)) // [] 当然js根本没索引数组一说,这是php ...

  5. leetCode83. 删除排序链表中的重复元素

    给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3-&g ...

  6. 文件服务之二:ftp协议

    FTP连接 命令连接 传输命令(客户端发给服务端的命令),服务端的21/tcp 数据连接 传输数据(传输数据时建立,数据传输完拆除) 数据链接的建立方法:主动.被动 主动模式(PORTstyle服务器 ...

  7. 在Airtest中如何使用无线模式控制手机

    在使用Airtest超快速开发App爬虫文章的最后,我们留了一个尾巴:如何启动Airtest的无线模式,不用USB线就能控制手机? 本文将会讲到具体的做法.做法分为两种:第一种是在Airtest的ID ...

  8. python大法好——Python XML解析

    Python XML解析 什么是XML? XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识. 它也是元标记语言,即定义了用于定义其他与 ...

  9. centos mysql 修改mysql用户密码

    查看服务器版本: cat /etc/redhat-release 查看mysql 版本: mysql -u root -p use mysql; ###mysql 5.7以上.. update use ...

  10. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...