css 倒三角_css操作之常用技巧

前言概述

汇总项目中常用的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. 内容垂直居中：

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

• 多行文本垂直居中：

方法1：父元素设置display: table;子元素设置display: table-cell;vertical-align: middle;

方法2(利用flex)：

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

块级元素垂直居中：

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

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

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

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

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

.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%;”会适配不同比例的屏幕(图片为了适配不同比例，部分比例相差太大会变形)：

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”一样的问题：

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