示例简介

汇总项目中常用的css技巧。

技巧要点

1、css实现倒三角效果：

display: inline-block;content: "";border: 10px solid transparent;border-top-color: red;

2、iOS上滑动不流畅问题：

在“overflow:scroll”部分，也就是需要滑动的层处，加css代码“
-webkit-overflow-scrolling: touch”；

3、当css同时存在translate、rotate和scale时：

先后顺序应该是translate--rotate--scale，不然会导致跟所需要结果不一致；

4、使用样式“width:100%;padding:10px;”导致内容溢出：

使用“box-sizing: border-box;”可以解决这个问题；

5、内容超出部分隐藏并显示省略号：

width: 100px; /*内容宽度*/overflow: hidden;text-overflow: ellipsis; /*文本溢出显示省略号*/display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /*显示行数*/

6. 内容垂直居中：

1）单行文本垂直居中可设置height和line-height相等；

2）多行文本垂直居中：

方法1：

父元素设置display: table;

子元素设置display: table-cell;vertical-align: middle;

方法2（利用flex）：

display: flex;justify-content: center;flex-direction: column;

3）块级元素垂直居中：

方法1，父元素利用flex添加样式：

display: flex;justify-content: center;flex-direction: column;

方法2，父元素设置position: relative;子元素添加样式：

position: absolute;top: 50%;transform: translateY(-50%);

7. 利用content实现移上去更换图片效果：

<img class="imgBox" src="images/1.jpg" height="200" width="300" alt="" />

.imgBox:hover { content: url("../images/2.jpg") }

8. 设置文本不给选中：

user-select: none;

9. 对于列表，需要间隔线，且最后一个不显示间隔线，可以利用":not()"一句实现效果：

li:not(:last-child) { border-bottom: 1px solid red;}

10. 利用calc计算内容自适应高度（24为顶部高度，可根据实际情况调整）：

height: calc(100% - 24px);

11. 擅用选择器“:nth-child()”：

/*第2个添加背景色，2可根据实际情况修改*/li:nth-child(2) {  background-color: #ff0000;}/*奇数行*/li:nth-child(odd) {  background-color: #ff0000;}/*偶数行*/li:nth-child(even) {  background-color: #0000ff;}/*n是计数器（从 0 开始），b(0)是偏移值*/li:nth-child(3n+0) {  background-color: #ff0000;}

12. 修改input的光标颜色和触发后的边框颜色：

input { caret-color: red; outline-color: green;}

13. 使背景图全屏显示：

方法1，使用top center会根据不同分辨率显示图片顶部和中间部分（分辨率超出图片大小会产生空白）；而使用“background-size: 100% 100%;”会适配不同比例的屏幕（图片为了适配不同比例，部分比例相差太大会变形）：

<div class="bg-box"></div>

html, body {  height: 100%;  padding: 0;  margin: 0;}.bg-box {  position: absolute;  background: url("../images/bg.jpg") top center no-repeat;  height: 100%;  width: 100%;  /*background-size: 100% 100%;*/}

方法2，有跟方法1使用“background-size”一样的问题：

<img class="bg" src="images/bg.jpg" alt="" />

html, body {  height: 100%;  padding: 0;  margin: 0;}.bg {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}