有些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中很有用的属性的更多相关文章

  1. css3中那些鲜为人知但又很有用的属性

    概述 这是我在写移动端页面的时候遇到的,css3中鲜为人知但又很有用的属性,记录下来,供以后开发时参考,相信对其他人也有用. tap-highlight-color 在移动端开发中,我们需要在用户轻按 ...

  2. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  3. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  4. CSS中具有继承性的属性:

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  5. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  6. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  8. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  9. 今日推荐:10款在 Web 开发中很有用的占位图片服务

    设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...

随机推荐

  1. Gym - 101102B

    题目链接 用火柴棍拼出最大的数,思维题,最后发现暴力1e7刚刚不会超时. #include <bits/stdc++.h> using namespace std; ]={,,,,,,,, ...

  2. mysql 常用语句

    1,查看索引使用情况的语句: explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explai ...

  3. 配置使用EF常见的一些问题及解决方案

    转自http://www.2cto.com/database/201511/449573.html 提示未注册,找不到驱动程序 No Entity Framework provider found f ...

  4. execl表格VLOOKUP函数的使用

    使用场景:最近在处理一个表格数据的时候出现了一点麻烦.想把另外表2里面对应的的数据放到表1里面,本来表2的ID是乱序的(这里为好看,就顺序排了.),一个个查找复制粘贴比较麻烦,后经大师指点VLOOKU ...

  5. MongoDB 安装

    年初换了个硬盘空间更大的vps,这下终于可以装MongoDB了. 1 配置包管理系统(yum) 建立 /etc/yum.repos.d/mongodb-org-3.2.repo文件.内容如下: [mo ...

  6. Hadoop 大数据第一天

    大数据第一天 1.Hadoop生态系统 1.1 Hadoop v1.0 架构 MapReduce(用于数据计算) HDFS(用于存储数据) 1.2 Hadoop v2.0 架构 MapReduce(用 ...

  7. 关于jqgrid数据不显示问题

    近日有个需求要用到jqgrid,原本用着一切都很顺利,但是在需求变动后,只是修改部分字段名称jqgrid就不显示数据了,后台数据也能传到前台,但是就是不给我显示,到嘴的肉就是没法吃,蛋疼,郁闷都无法形 ...

  8. 【BZOJ1672】[Usaco2005 Dec]Cleaning Shifts 清理牛棚 动态规划

    [BZOJ1672][Usaco2005 Dec]Cleaning Shifts Description Farmer John's cows, pampered since birth, have ...

  9. H5开发中的问题总结

    最近公司做了一个出行日记的项目,里面的页面十多页,天天加班,做到吐血.总体来说,写页面的时候虽然是十多个页面,其实难度还是在每个页面的特效上.公司是易到用车,出行日记的页面在APP里有生成入口,有兴趣 ...

  10. db2 游标使用

    游标一般用来迭代结果集中的行 为了在一个过程中处理一个游标的结果,需要做以下事情: 在存储过程块的开头部分 DECLARE 游标. 打开该游标. 将游标的结果取出到之前已声明的本地变量中(隐式游标处理 ...