总是记不住但又总是要用的css
有没有经常遇到一些样式每次写都要用百度呢?我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。转载请注明出处。
一、设置input 的placeholder的字体样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}
设置input聚焦时的样式
input:focus {
background-color: red;
}
取消input的边框
input{
border: none;
outline: none;
}
二、隐藏滚动条或更改滚动条样式
/*css主要部分的样式*//*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px; /*对垂直流动条有效*/
height: 10px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color:cyan;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background:khaki;
}
三、文字超出隐藏并显示省略号
单行(一定要有宽度)
width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
四、控制div内的元素自动换行
纯英文或者数字的时候
.box {
word-wrap: break-word;
word-break: break-all;
}
word-wrap: break-word;
比较温柔,会先另起一行,新的行放不到再把单词断了。样式如下:
See the Pen word-wrap: break-word; by 小东西儿
(@xiaodongxier) on CodePen.
word-break: break-all;
这娃比较暴力,他不会去新起一行,而是直接在后面跟着,如果放不下,则会强制把单词折断。样式如下:
See the Pen word-break: break-all; by 小东西儿
(@xiaodongxier) on CodePen.
五、 纯css画三角形
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
六、 绝对定位元素居中(水平和垂直方向)
#demo {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: green;
}
七、表格边框合并
table,tr,td{border: 1px solid #333;}
table{
border-collapse: collapse;
}
八、div 元素模拟输入框可编辑
contenteditable
属性
<style>
.box {
border: 1px solid red;
background: blue;
color:#fff;
}
</style>
<p class="box" contenteditable="true">这是一个可编辑段落。</p>
效果预览:
.contenteditable { border: 1px solid rgba(255, 0, 0, 1); background: rgba(0, 0, 255, 1); color: rgba(255, 255, 255, 1) !important }
这是一个可编辑段落。
总是记不住但又总是要用的css的更多相关文章
- 这些年一直记不住的 Java I/O
参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...
- MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题
///MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题,在webconfig中配置<system.web><authentication mode ...
- Git 记不住命令
Git 记不住命令 每次用每次查 真棒 git log --stat --author=someone # git查询某个人修改记录 git log filename # fileName相关的com ...
- $.ajax 方法参数总是记不住,在这里记录一下
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- 英语每日阅读---8、VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸
英语每日阅读---8.VOA慢速英语(翻译+字幕+讲解):脸肓症患者记不住别人的脸 一.总结 一句话总结: a.neural abnormalities are more widespread:Duc ...
- Grid属性太多记不住?【Grid栅格布局可视化编辑器】直观易懂高效,拖拉拽,有手就行!
手把手教你通过拖拉拽可视化的方式带你练习[Grid栅格布局]的各个属性,直观易懂!再也不愁记不住繁多的Grid属性了.整个过程在众触应用平台进行,不用手写一行CSS代码. grid-auto-flow ...
- 有了 tldr,妈妈再也不用担心我记不住命令了
引言 有一次我在培训时说「程序员要善于使用 Terminal 以提高开发效率」,一位程序员反驳道:「这是 21 世纪,我们为什么要用落后的命令行,而不是先进的 GUI?」 是的,在一些人眼里,这个黑黑 ...
- 算法是什么我记不住,But i do it my way. 解一道滴滴出行秋招编程题。
只因在今日头条刷到一篇文章,我就这样伤害我自己,手贱. 刷头条看到一篇文章写的滴滴出行2017秋招编程题,后来发现原文在这里http://www.cnblogs.com/SHERO-Vae/p/588 ...
- Spring控制反转(IOC)和依赖注入(DI),再记不住就去出家!
每次看完spring的东西感觉都理解了,但是过了一段时间就忘,可能是不常用吧,也是没理解好,这次记下来. 拿ssh框架中的action,service,dao这三层举例: 控制反转:完成一个更新用户信 ...
随机推荐
- JAVA微信支付——企业付款(企业向微信用户个人付款、转账)
本地开发环境支付回调调试方法可以参考:https://www.cnblogs.com/pxblog/p/11623053.html 需要自行引入相关依赖 官方文档地址:https://pay.weix ...
- dart系列之:dart优秀的秘诀-隔离机制
目录 简介 dart中的隔离机制 生成一个Isolate Isolate之间的交互 一个例子 总结 简介 之前介绍了很多dart中的异步编程技巧,不知道大家有没有发现一个问题,如果是在java的异步编 ...
- 【九度OJ】题目1445:How Many Tables 解题报告
[九度OJ]题目1445:How Many Tables 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1445 题目描述: ...
- 1120 机器人走方格 V3
1120 机器人走方格 V3 基准时间限制:1 秒 空间限制:131072 KB N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只能向右或向下走.并要求只能在这条线的上面或下面走, ...
- hdu-1237简单计算器(栈的运用)
http://acm.hdu.edu.cn/showproblem.php?pid=1237 简单的栈的运用. 首先将数字和运算符分离,分别保存在两个数组中,然后按原来的式子的顺序,首先将第一个数和第 ...
- 破解UltraEdit64 Version 28.20.0.92 技术分享。
本文为原创作品,转载请注明出处,作者:Chris.xisaer E-mail:69920579@qq.com QQ群3244694 补丁程序下载地址:https://download.csdn.net ...
- Shell实现文件内容批量替换的方法
在Linux系统中,文件内容的批量替换同Windows平台相比要麻烦一点.不过这里可以通过Shell命令或脚本的方式实现批量替换的功能. 笔者使用过两个命令:perl和sed ,接下来会对其做出说明. ...
- A Deep Neural Network’s Loss Surface Contains Every Low-dimensional Pattern
目录 概 相关工作 主要内容 引理1 定理1 定理2 A Deep Neural Network's Loss Surface Contains Every Low-dimensional Patte ...
- 编写Java程序,使用 dom4j 创建一个 XML 文档,文档名为“city.xml”。注意该文档的格式和数据
查看本章节 查看作业目录 需求说明: 使用 dom4j 创建一个 XML 文档,文档名为"city.xml".该文档的格式和数据如图所示 实现思路: 创建Java项目,添加dom4 ...
- Java集合与数组的联系和区别
数组特点 存放一组相同的数据类型(基本类型和对象类型)的数据,从而实现对数据的管理. 优势:可以快速的通过下标对数组元素进行访问,效率高 劣势:容量实现定义好了,不能随着需求变化而扩容. 集合特点 集 ...