常用易忘CSS小技巧
2024-04-26 12:00:17
1 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
.wrap {display: inline-block;overflow: hiddenvertical-align: bottom
}
2 超出部分显示省略号
// 单行文本
.wrap {overflow:hidden;/*超出部分隐藏*/text-overflow:ellipsis;/*超出部分显示省略号*/white-space:nowrap;/*规定段落中的文本不进行换行 */
}
// 多行文本
.wrap {width: 100%;overflow: hidden;display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 *必须结合的属性*-webkit-box-orient: vertical; //设置伸缩盒对象的子元素的排列方式 *必须结合的属性*-webkit-line-clamp: 3; //用来限制在一个块元素中显示的文本的行数word-break: break-all; //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*
}
3 css实现不换行、自动换行、强制换行
//不换行
.wrap {white-space:nowrap;
}
//自动换行
.wrap {word-wrap: break-word;word-break: normal;
}
//强制换行
.wrap {word-break:break-all;
}
4.CSS实现文本两端对齐
.wrap {text-align: justify;text-justify: distribute-all-lines; //ie6-8text-align-last: justify; //一个块或行的最后一行对齐方式-moz-text-align-last: justify;-webkit-text-align-last: justify;
}
5 实现文字竖向排版
// 单列展示时
.wrap {width: 25px;line-height: 18px;height: auto;font-size: 12px;padding: 8px 5px;word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
}
// 多列展示时
.wrap {height: 210px;line-height: 30px;text-align: justify;writing-mode: vertical-lr; //从左向右 writing-mode: tb-lr; //IE从左向右//writing-mode: vertical-rl; -- 从右向左//writing-mode: tb-rl; -- 从右向左
}
5 使元素鼠标事件失效
.wrap {// 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。pointer-events: none;cursor: default;
}
7 禁止用户选择
.wrap {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
8 cursor属性
.wrap {cursor：pointer; //小手指；cursor：help; //箭头加问号；cursor：wait; //转圈圈；cursor：move; //移动光标；cursor：crosshair; //十字光标
}
9 使用硬件加速
.wrap {transform: translateZ(0);
}
10 图片宽度自适应
img {max-width: 100%}
11 Text-transform和Font Variant
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
12 将一个容器设为透明
.wrap { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
}
13 消除transition闪屏
.wrap {-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-perspective: 1000;
}
14自定义滚动条
overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {width: 5px;
}滚动条的轨道
::-webkit-scrollbar-track {background-color: #ffa336;border-radius: 5px;
}滚动条的滑块
::-webkit-scorllbar-thumb {background-color: #ffc076;border-radius: 5px;
}
15 让 HTML 识别 string 里的 ‘\n’ 并换行
body {white-space: pre-line;
}
16 实现一个三角形
.wrap { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px;
}
17 移除被点链接的边框
a {outline: none}
a {outline: 0}
18使用CSS显示链接之后的URL
a:after{content:" (" attr(href) ") ";}
19select内容居中显示、下拉内容右对齐
select{text-align: center;text-align-last: center;
}
select option {direction: rtl;
}
19 修改input输入框中光标的颜色不改变字体的颜色
input{color: #fff;caret-color: red;
}
20 修改input 输入框中 placeholder 默认字体样式
//webkit内核的浏览器
input::-webkit-input-placeholder {color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {color: #c2c6ce;
}
21 子元素固定宽度 父元素宽度被撑开
// 父元素下的子元素是行内元素
.wrap {white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {white-space: nowrap; // 子元素不被换行display: inline-block;
}
22 让div里的图片和文字同时上下居中
.wrap {height: 100,line-height: 100
}
img {vertival-align：middle
}
// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素
// vertical-align：baseline/top/middle/bottom/sub/text-top;
23实现宽高等比例自适应矩形
.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative; }.item {position: absolute; width: 100%;height: 100%;background-color: 499e56;} <div class="scale"><div class="item">这里是所有子元素的容器</div></div>
24 transfrom的rotate属性在span标签下失效
span {display: inline-block
}
25 边框字体同色
.wrap {width: 200px;height: 200px;color: #000;font-size: 30px;border: 50px solid currentColor;// border: 50px solid; // 实现二}
26 手动生成问号加圆圈
.help_tip{display: inline-block;text-align: center;background-color: #e2e2e2;width: 16px;height: 16px;font-size: 14px;line-height: 16px;
}
.help_tip:before{content: '?';font-weight: bold;
}
常用易忘CSS小技巧相关推荐
- 常用的一些javascript小技巧(收藏http://www.car371.com/article.asp?id=13)
常用的一些javascript小技巧 作者:隆轩 日期:2005-12-21 字体大小: 小 中 大 //事件源对象 event.srcElement.tagName event.srcElement ...
- css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中 将一段文字置于容器的水平中点 ...
- php页面开发,PHP网站开发中常用的8个小技巧
这篇文章主要介绍了PHP网站开发中常用的8个小技巧,本文讲解了命名.使用.PHP判断Form表单是否提交.PHP 获取字符串长度.PHP超全局对象等内容,需要的朋友可以参考下 PHP是一种用于创建动态 ...
- 日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
- css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能 确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时 就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
- 12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
- 10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
- OI常用的常数优化小技巧
注意:本文所介绍的优化并不是算法上的优化,那个就非常复杂了,不同题目有不同的优化.笔者要说的只是一些实用的常数优化小技巧,很简单,虽然效果可能不那么明显,但在对时间复杂度要求十分苛刻的时候,这些小的优 ...
- 自己常用的C/C++小技巧
这里列出了自己常用的一些c/c++小技巧, 有些会有不足, 可以简单探讨一下. 32位/64位等 分类 分类: 小技巧 同理可以用于其他位, 比如16位什么的. 由于不同位的平台指针的大小可能是不同的 ...
最新文章
- 好书推荐:《零基础快速入行入职软件测试工程师》学测试一本就
- NFS文件系统详解以及安全设置
- EXT GridPanel
- Hyperledger Fabric安装问题备忘（二）
- 统计123出现次数_如何使用 count 统计词条出现次数?
- 2022年美国大学生数学建模竞赛常见问题汇总
- asp.net怎样解决高并发问题
- CentOs安装ssh服务
- #pragma预处理命令
- Ubuntu9.04更新源
- 【回文串7】LeetCode 234. Palindrome Linked List
- 安装dubbo管理控制台
- PASCAL VOC数据集分析及下载、解压
- avx2指令集对php有用吗,AVX2指令集的作用
- 怎么把手机字体改成繁体_手机繁体字怎么改成简体,8步就能轻松完成!
- opencv之图像平移
- 微擎 人人商城 对接京东vop 对接京东商品，同步商品 地址，库存，价格，上下架等。七 （上）之异常订单 后台功能完善...
- nb_samples(采样数)转换
- 查看PFX证书的信息
- chrome版本更新后，chromedriver对应版本更新