不常用但是很实用的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 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...
随机推荐
- 理解block和inode
什么是block和inode? 定义:block就像是杯子 inode就像是杯子的编号,因为杯子太多了 1.根据文件的大小,在磁盘中储存时会占用一个或多个block:那么究竟多大的文件会使用一个blo ...
- JAVA之Mybatis基础入门--框架搭建与简单查询
JAVA中,操作数据库有JDBC.hibernate.Mybatis等技术,今天整理了下,来讲一讲下Mybatis.也为自己整理下文档: hibernate是一个完全的ORM框架,是完全面向对象的.但 ...
- springmvc简单的流程说明及源码分析
框架流程图 springmvc的核心类org.springframework.web.servlet.DispatcherServlet,是一个servlet,间接继承了httpservlet;重写了 ...
- js 索引数组转JSON为空
let a = [] a.a = 1 console.log(a) // [a: 1] console.log(JSON.stringify(a)) // [] 当然js根本没索引数组一说,这是php ...
- leetCode83. 删除排序链表中的重复元素
给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3-&g ...
- 文件服务之二:ftp协议
FTP连接 命令连接 传输命令(客户端发给服务端的命令),服务端的21/tcp 数据连接 传输数据(传输数据时建立,数据传输完拆除) 数据链接的建立方法:主动.被动 主动模式(PORTstyle服务器 ...
- 在Airtest中如何使用无线模式控制手机
在使用Airtest超快速开发App爬虫文章的最后,我们留了一个尾巴:如何启动Airtest的无线模式,不用USB线就能控制手机? 本文将会讲到具体的做法.做法分为两种:第一种是在Airtest的ID ...
- python大法好——Python XML解析
Python XML解析 什么是XML? XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识. 它也是元标记语言,即定义了用于定义其他与 ...
- centos mysql 修改mysql用户密码
查看服务器版本: cat /etc/redhat-release 查看mysql 版本: mysql -u root -p use mysql; ###mysql 5.7以上.. update use ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...