有些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. javascript 核心语言笔记- 2 语法结构

    字符集 JavasSript 程序是用 Unicode 字符集 编写的,Unicode 是 ASCII 和 Latin-1 的超集,支持几乎所有在用的语言.ECMAScript 3 要求 JavaSc ...

  2. jwplayer播放器停止 单页内多个jwplayer对象停止问题

    单页内多个jwplayer对象停止问题,一直没有找到单页内多个jwplayer播放器停止问题,点击其中一个停止其他播放器; 整个播放代码Remove(),这样就可以停止了,也在ie下防止暂停不了.重音 ...

  3. 浅析session&cookie

    session&cookie没有出现的黑暗时代 大家都知道,HTTP协议是一种无状态的协议,本次请求下一次请求没有任何的关联,所有没有办法直接用http协议来记住用户的信息,试想一向,每一次点 ...

  4. Linux yum配置文件详解

    说明:经过网上抄袭和自己的总结加实验,非常详细,可留作参考. yum的配置一般有两种方式:   一种是直接配置/etc目录下的yum.conf文件, 另外一种是在/etc/yum.repos.d目录下 ...

  5. 字符串的replace()方法隐藏着什么不可告人秘密?

    最近在做JS算法项目时发现一个令我匪夷所思的问题, 这里想记录一下问题. 首先介绍一下字符串replace()方法的基本用法. replace() 方法使用一个替换值(replacement)替换掉一 ...

  6. Linux环境下的Nginx编译与安装

    1.新建文件夹: mkdir -p /zuker cd /zuker 2.编译: yum -y install gcc-c++ make wget autoconf libjpeg libjpeg-d ...

  7. 分享Kali Linux 2016.2第50周虚拟机

    分享Kali Linux 2016.2第50周虚拟机该虚拟机使用Kali Linux 2016.2第50周的64位镜像安装而成.基本配置如下:(1)该系统默认设置单CPU双核,内存为2GB,硬盘为50 ...

  8. wpf,离线状态下部分功能不可用。

    离线状态下,设置按钮的不可用.通过改变资源字典的值. App.xaml 文件下添加如下 xmlns:sys="clr-namespace:System;assembly=mscorlib&q ...

  9. 数位DP CF 55D Beautiful numbers

    题目链接 题意:定义"beautiful number"为一个数n能整除所有数位上非0的数字 分析:即n是数位所有数字的最小公倍数的倍数.LCM(1到9)=2520.n满足是252 ...

  10. [软件推荐]Windows文件夹多标签工具Clover

    Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能,目前最新版本为:3.1.7 Clover 把 Chrome 标签页有的样 ...