个人博客:

https://chenjiahao.xyz


1、让网站快速变灰

 html {
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);//谷歌浏览器
}

2、让div如input般可编辑

 <div id="test" contentEditable="true"  ></div>  

 <div id="test1" contentEditable="true" ></div>  

  <div id="test2" contentEditable="true"></div> 

兼容性如下图:

3、让div禁止选择

 <div unselectable="on" onselectstart="return false;">
试试看能否选择
</div>

4、给placeholder设置属性

 ::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}

5、清除浮动

 .clearfix:after{display:block;visibility:hidden;clear:both;height:;content:'.';font-size:}

6、文字溢出显示省略号

 {display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

7、强制换行

 //自动换行

 div{
word-wrap: break-word;
word-break: normal;
} //强制英文单词断行 div{
word-break:break-all;
} //强制不换行 div{
white-space:nowrap;
}

Ps:未完待续~

常用css总结的更多相关文章

  1. discuz内置常用CSS代码分析

    CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...

  2. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  3. 常用CSS Reset汇总

    什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始 ...

  4. 常用CSS HACK

    常用CSS HACK IE6 3像素bug和双边距bug一样的经典 现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-non ...

  5. 常用css属性

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...

  6. 常用CSS技术收藏

    常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM ...

  7. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  8. html5--6-59 其他常用CSS属性

    html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...

  9. day 40 文本属性 常用css属性 定位

    一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...

  10. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

随机推荐

  1. Python---列表的学习(二)

    列表的第二部分 (1)列表的排序 1)使用方法sort()可对列表进行永久性排序 food = ['apple','orange','pear','grape'] food.sort() print( ...

  2. SpringBoot+SpringMVC+MyBatis快速整合搭建

    作为开发人员,大家都知道,SpringBoot是基于Spring4.0设计的,不仅继承了Spring框架原有的优秀特性,而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程.另外Spr ...

  3. Oracle 实用SQL

    start with connect by prior 递归查询用法 select * from 表名 aa start with aa.id = 'xxx' connect by prior aa. ...

  4. Python网络爬虫实战(二)数据解析

    上一篇说完了如何爬取一个网页,以及爬取中可能遇到的几个问题.那么接下来我们就需要对已经爬取下来的网页进行解析,从中提取出我们想要的数据. 根据爬取下来的数据,我们需要写不同的解析方式,最常见的一般都是 ...

  5. Android开发学习路线的七个阶段和步骤

    Android开发学习路线的七个阶段和步骤           Android学习参考路线     第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和St ...

  6. 渗透测试----access偏移注入

    偏移注入指access偏移注入,由于数据库结构的问题,偏移注入只适用于access数据库.对于access数据库来说,无论是逐字猜解还是联合查询注入,都是需要我们能够猜到用户名和密码的列名(字段),才 ...

  7. 字节输入流InputStream

    import java.io.File; import java.io.FileInputStream; import java.io.IOException; public class FileIn ...

  8. Elastic Stack 笔记(三)Kibana5.6 安装

    博客地址:http://www.moonxy.com 一.前言 Kibana 是 Elastic Stack 公司推出的一个针对 Elasticsearch 的开源分析及可视化平台,可以搜索.查看存放 ...

  9. 基于GitHub Issues的评论系统--gitment

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. ![file](https://img2018.cnblogs.com/blog/830272/201909/ ...

  10. 过渡 - transition

    过渡 - transition 是变形transfrom其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果. 实例1: <div clas ...