css好用吗,一些不好记却很好用的 CSS 属性
前言
在写过一段时间 css 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什么东西,很顺的就可以写出来。
这些属性之所以常见,是因为许多地方都用得到,而有些 CSS 属性只能使用在某些特定的地方,或者只有在某个特定的情境之下才会出现。我经常会忘记这些没不常的属性,但有时候这些属性其实特别重要。
所以本文介绍一些我觉得不太好记但是却很好用的 CSS 属性,也是顺便帮自己做个笔记。
input 的外框与 “|” 的颜色
比起 border, outline 是一个相对少见的属性,但是要特别提到的是在 input 上的应用。在浏览器的默认行为中,当你把焦点移动到 input 时,边缘会出现一圈蓝色:
那个蓝色的就是 outline,可以通过 Chrome devtool 验证:
所以如果不想要 outline 或是想改颜色,那么就修改这个属性就行了。
在输入框中出现的那个一直闪的 | 叫做 caret,如果想改变颜色的话可以通过 caret-color 属性修改改:
点击时的蓝色框框
我记得在手机上点击一些东西的时候会出现一个蓝色的外框还什么之类的,但我刚刚怎么试都没有试出来,总之对应的属性叫做
-webkit-tap-highlight-color,用这关键字查应该可以查到一些其他文章跟范例。
平滑滚动
有许多网站都有一个功能,最常见的是博客网站,在右侧可能会出现文章每一个段落的标题,点下去之后就可以快速定位到那个段落去。
如果没有任何设定的话,就是点下去直接跳到那定位的段落。但有一种东西叫做平滑滚动(smooth scroll),会添加一些过场,让使用者知道是滚动到那边去的。
很久以前要实现这个功能可能需要用到 JS,但现在可以用 CSS 的 scroll-behavior: smooth; 来搞定(下面的例子取自 MDN):
载入新内容时的 scroll 位置
许多网站都有滚动到最底下的时候自动载入更多的功能,在载入更多的时候,你会预期使用者还是停留在同一个位置,不会因为载入更多就自动把滚动条往下滚之类的。
但有时候浏览器默认的处理方式不如预期,有可能你载入更多元素的时候,画面并没有停留在你想像中的位置。
这时候可以用 overflow-anchor 这个 CSS 属性来调整这个行为。
一次只滑一个元素
有时候我们会需要一个这样的效果:使用者轻轻滑一下,就直接滑到下一个元素,而不是滑到任意地方,这可以通过 scroll-snap 相关的属性来实现的,像是这样:
手机上的 300ms 点击延迟
这个应该很多人都知道,在手机上的点击事件会有个大约 300ms 的演出,也就是说你点下去之后要等 300ms 才会触发 click 事件。之所以会有这个延迟,是因为你可以在手机上通过双击来放大画面 ,所以在第一次点击的时候,浏览器不知道你是要点两次还是只点一次,因此需要等待一段时间。
这个延迟在之前好像就已经被去除了,但是如果你发现仍然存在的话,可以用 touch-action: manipulation 这个 CSS 属性来解决,这属性可以通过设置来停用一些手势。
更多详情可以参考 MDN。
font-smooth
我是在 Create React App 默认的 css 中(
https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.css#L6) 看到这个属性的:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
在很多网站上也可以发现这两个属性,它们与字体的渲染有关,例如 antialiased 其实就是大家都听过的反锯齿。可以自己决定用什么方式来去渲染字体。
结语
本文简单地记录了一些我觉得比较难记但是好用的 CSS 属性,因为不会很频繁地去使用,所以等到真的要用的时候很容易忘记属性名,如果在搜索时关键字输得不对很难找到这个属性叫什么。
css好用吗,一些不好记却很好用的 CSS 属性相关推荐
- 《CSS蝉意花园读书精记》(基础篇---------上.资料篇1)
这一篇文章主要是翻译书中提到的国际化的一篇文章,并让大家了解软件开发中字符编码的众多问题,被翻译的文章写得比较早,可能从技术的角度来看不是很有意义的,作者在文中是概括主流的字符编码,并不能让大家深入的 ...
- CSS 与 地图可视化 模糊注记 (十七)
地图可视化来到Css 篇章了,这次一口气是兼容了7个地图引擎, 这次直接上包应用 类库兼容地图引擎有 mapbox maptalks arcgis 4 leaflet openlayer 高德地图 百 ...
- 计算机三级信息安全技术易错、不好记的选择、填空内容
马上要参加三级信息安全技术的考试了,记录了在刷题中一些容易错.不好记的知识点. 密码学: 1949年Shannon发表了注明的<保密系统的通信理论>把密码学至于坚实的数学基础之上,标志着密 ...
- CSS基础笔记(多看多记冲冲冲)
加油加油加油,天天做笔记! 入门跟着黑马的pink老师在b站的视频走的. 这是他的b站链接. https://www.bilibili.com/video/BV14J4114768?p=1 文章目录 ...
- 如何提升CSS技术?8个硬核技巧带你迅速提升CSS技术
神器的选择器 浅谈布局那些事 绘制三角的原理 完美极致的变量 添油加醋的伪元素 灵活多变的障眼法 意向不到的内容插入 无所不能的模拟点击事件 准备工作 整个分享过程不搞那些乱七八糟的环境搭建.既然只玩 ...
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul ...
- 心情不好或者问题很难解决就看一看
心情不好或者问题很难解决就看一看 写的太好了!专门找来送给那些优柔寡断和喜欢胡思乱想的朋友们,每天一学,摆脱烦恼? (一) 1.不要在流泪的时候做任何决定,情绪负面的时候说话越少越好. 2.不要去反复 ...
- 前端笔记(4)css,复合选择器,标签的显示模式,行高,css背景,css三大特性
css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...
- css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
最新文章
- Allure Report使用
- 关于write()和fsync()
- robotframework手机号随机产生脚本
- Discuz!NT负载均衡方案
- Cocos2d 3.0继承自Sprite的类在addChild后出现故障
- 客户端连接mysql 自动断开_MySql连接空闲8小时自动断开的原因及连接池配置方法...
- Java JSR303 valid
- 用友u8怎么导出凭证_CASE11 用友U8导入期初档案凭证批量作废编辑自动现流(5/5)...
- mysql 如何把整列数据*10_10张图告诉你,MySQL 是如何查找数据的?
- header简单用处
- [图示]做人36字诀:四)人际互动——教你赢得朋友
- vue-router个人总结
- Android录屏解决方案调研
- css实现手风琴图片特效
- 联想笔记本连不上手机热点_笔记本电脑连接不上手机热点该怎么解决?
- 基于 EG6831 的无感 BLDC 控制方案
- 计算机画图更改,如何用电脑画图功能修改图片与加字
- [RK3288][Android6.0] RK3288和RK3288-W版本说明
- 主力资金是股价的风向标
- smartgit官方下载地址
热门文章
- JSON数据格式详解
- C# 获取进程或线程的信息
- 动态初始化一维数组详解
- linux 对象管理器,Linux多安全策略和动态安全策略框架模块详细分析之函数实现机制中文件对象管理器分析(3)...
- html5语言基础教程,HTML5基础教程,从入门到精通,零基础学HTML5
- java 连接 oracle 10_java-连接到oracle 10g数据库时,获得IOException“...
- nginx 返回动态Html,Nginx负载均衡
-Nginx动态更新upstream
- C++11多线程thread参数传递问题
- Java基础之HashMap流程分析
- 微信平台第三方服务器,浅谈微信第三方服务平台的发展前景