示例简介

汇总项目中常用的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%;
}