偏门却又实用的 CSS 样式
来源:互联网 发布:java写爬虫很复杂吗 编辑:程序博客网 时间:2024/04/28 16:09
今天跟大家说一些偏门一点的 CSS 样式、技巧。什么是偏门?就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式。
::-Webkit-Input-Placeholder
input 的 H5 placeholder
属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder
属性来改。
小Tips: 配合 opacity 属性使用效果更佳哦!
@Impor 嵌套样式表文件
使用它可以在样式表再次内嵌套样式表文件,比如一些组件 CSS可以使用,但不太推荐使用这个,因为加载时有可能会被漏掉。
Outline 当点击Input元素时显示的当前状态线(外发光)
这个状态线是用来提示用户当前状态指示作用,但因为效果很美观,建议去掉,或自己改个样式
Contenteditable 设置Element是否可编辑
Webkit-Playsinline
手机video 都可以在页面中播放,而不是全屏播放了。
Position: Absolute, 让Margin有效的
设置left:0, right:0 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。
使用 Clearfix 清楚浮动,解决父类高度崩塌。
User-Select 禁止用户选中文本
清除手机Tap事件后Element 时候出现的一个高亮
::-Webkit-Scrollbar-Thumb
可以修改谷歌的滚动条样式,safari好像也可以
-Webkit-Appearance:none
To apply platform specific styling to an element that doesn’t have it by default
To remove platform specific styling to an element that does have it by default
移除浏览器默认的样式,比如chrome的input默认样式
CSS开启硬件加速
http://www.cnblogs.com/rubylouvre/p/3471490.html
使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug
-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单
Transform-Style: Preserve-3d 让元素支持3d
Perspective 透视
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。
Css实现不换行、自动换行、强制换行
Box-Sizing 让元素的宽度、高度包含Border和Padding
Calc() Function, 计算属性值
https://www.w3schools.com/cssref/func_calc.asp
上面的例子就是让宽度为100%减去100px的值,项目中很适用,要IE9以上兼容。
Css3 Linear-Gradient 线性渐变
默认开始在top, 也可以自定义方向。
常用的选择器 :Nth-Child() Selector
以下代码是选择父类下第一个子节点,p元素,建议学习这个样式属性的使用,很实用的。
- 偏门却又实用的 CSS 样式
- CSS的2个冷门却又实用的选择器
- 常用又偏门的sql
- 非常实用的CSS样式
- CSS-- 实用CSS样式
- 实用的CSS样式知识及技巧
- 制作好看又非常简单CSS样式的颜色块
- 5种简单实用的css列表样式实例
- 美观实用的 侧导航菜单样式(JS+CSS)
- 修改view 的style(参照系统默认样式 简单模仿即可实现,简单又实用)
- 为什么有时候修改了css文件,页面的样式却没有改变?
- 修改了CSS文件,JSP页面的样式却没有变化
- 实用的按钮样式
- DIV+CSS技巧-最实用的16条css样式设置
- 偏门
- 悲哀却又充满希望的一天
- 常常忘记却又常用的sql
- 不易掌握却又至关重要的异常
- scp实现OS之间的远程传输文件
- 用CSS开启硬件加速来提高网站性能(转)
- zfs文件系统
- Android MotionEvent.getRawX
- samba配置
- 偏门却又实用的 CSS 样式
- 初探 JavaScript 中的函数式编程
- 跨平台开发 No installed provisioning profiles match the installed iOS signing identities
- 导游
- (转)Linux下查看内存使用情况方法总结
- 自定义View
- Android-studio 显示行号、设置字体大小、更改背景
- java基础--5.集合-2.集合
- PulltorefreshViewDemo