css中很有用的属性
有些css属性很实用,但不常用也就被忘记。
这里纪录了自己在项目中用过的一些。
html,body{
-webkit-tap-highlight-color:transparent;
}
这个的用途是:手机端用a标签或是表单的地方,点击时候有闪烁,用户体验很不好。加上它就可以啦~
html,body{
user-select:none;
}
user-select有4个值,
none:文本不能被选择
all:所有内容作为一个整体时可以被选择
text:可以先择文本
element:可以选择文本,但选择范围受元素边界的约束
input:-webkit-autofill {
-webkit-box-shadow : 0 0 0 100px white inset ;
}
去掉chorme浏览器input表单保存账号密码后默认填充的黄色背景。
div{
word-break: keep-all;
white-space:nowrap;
}
规定自动换行的处理方法,在table中可能用得多一点。
word-break: normal | break-all | keep-all;
分别是使用浏览器默认换行规则,允许在单词内换行,只能在半角空格或连字符处换行。
white-space:normal | pre | nowrap | pre-wrap | pre-line | inherit
分别是 默认。空白会被浏览器忽略。 | 空白会被浏览器保留 | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止 | 保留空白符序列,但是正常地进行换行。 | 合并空白符序列,但是保留换行符。 | 规定应该从父元素继承 white-space 属性的值。
没有添加前
添加这两个属性后
resize : none | both | horizontal | vertical:
分别是:无法调整大小,可调整宽度和高度,可调整宽度,可调整高度
使用后可让div想textarea那样被拉大,缩小。不过一般都不会用到。
object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
适用于替换元素,如图片。
object-fit: fill / contain / cover / none / scale-down
对比使用后效果,分别用固定大小div,宽高不定div做了测试,用到了横图和长图,cover真好用,再也不用担心图片过长过高后显示不正常了!

暂时只遇到了这些,项目中有新发现再来补充。。。
css中很有用的属性的更多相关文章
- css3中那些鲜为人知但又很有用的属性
概述 这是我在写移动端页面的时候遇到的,css3中鲜为人知但又很有用的属性,记录下来,供以后开发时参考,相信对其他人也有用. tap-highlight-color 在移动端开发中,我们需要在用户轻按 ...
- 分享20款移动开发中很有用的 jQuery 插件
今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS中具有继承性的属性:
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 今日推荐:10款在 Web 开发中很有用的占位图片服务
设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...
随机推荐
- HTML表单提交
<!DOCTYPE html> <!--当前文档为html5--> <html> <head> <!--设置文档编码--> <meta ...
- JDK常用工具集——jps
该命令的作用是罗列出目标系统(target system)中所有具有访问权限到的Java进程. 一.命令简介: jps [option] [hostid] 二.参数说明: option ...
- linux 内核与用户空间通信之netlink使用方法
转自:http://blog.csdn.net/haomcu/article/details/7371835 Linux中的进程间通信机制源自于Unix平台上的进程通信机制.Unix的两大分支AT&a ...
- 注解:【有连接表的】Hibernate双向1->N关联 (N端、1端同时参与控制关联关系)
Person与Address关联:双向1->N,[有连接表的],N端.1端同时参与控制关联关系 Person.java package org.crazyit.app.domain; impor ...
- iOS APP提交上架最新流程(转)
时隔1年又让我鼓捣iOS,刚接手就是上架,经验值为0的我,虽然内心是拒绝的,但还是要接受这项任务滴!也就是在被拒后重新审核,再改在提交...这样 反复的过程中也对上架流程熟悉了好多,写篇帖子送给同为菜 ...
- Hibernate的一级缓存
Hibernate的一级缓存 什么是缓存:缓存将数据库/硬盘上文件中数据,放入到缓存中(就是内存中一块空间).当再次使用的使用,可以直接从内存中获取 缓存的好处:提升程序运行的效率.缓存技术是Hibe ...
- C#连接Oracle数据库(直接引用dll使用)
转载至:http://www.cnblogs.com/gguozhenqian/p/4262813.html 项目中有个功能需要从一台Oracle数据库获取数据,本以为是很简单的事情,直接将原来的Sq ...
- BACKLOG
团队: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...
- 洛谷 P2701 [USACO5.3]巨大的牛棚Big Barn Label:二维数组前缀和 你够了 这次我用DP
题目背景 (USACO 5.3.4) 题目描述 农夫约翰想要在他的正方形农场上建造一座正方形大牛棚.他讨厌在他的农场中砍树,想找一个能够让他在空旷无树的地方修建牛棚的地方.我们假定,他的农场划分成 N ...
- 洛谷 P2725 邮票 Stamps Label:DP
题目背景 给一组 N 枚邮票的面值集合(如,{1 分,3 分})和一个上限 K —— 表示信封上能够贴 K 张邮票.计算从 1 到 M 的最大连续可贴出的邮资. 题目描述 例如,假设有 1 分和 3 ...