transform 平移

transform: translate(-50%,-50%); 定位后，left50%，top50%,位置并不是居中的 ，需要移动自身的上下50%
-webkit-transform:translate(-50%,-50%);
transform: translateX(-50%); X轴平移50%

文字内容超过宽度显示...

//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

nth-child 选择子元素

div:nth-child(2){}   /*第二个子元素*/

div:nth-child(-n+2){}   /* -n+2 就是选择前面两个选择*/

::before after

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

/* 在每一个.user前插入内容 */
.user::before{
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(a.png) no-repeat -59px  -191px;
    background-size: 104px auto;
    margin: 5px auto 0;
}

after

h2{
    position: relative;
    text-indent: -999px; /*在界面不显示，为了seo优化*/
    overflow:hidden;
}

.user h2::after{
    position:absolute;
    top: 3px;
    left: 20px;
    content: ""; 
    width: 23px;
    height: 23px;
    background: url(a.png) no-repeat -59px  -191px;
    background-size: 104px auto; 
}

在文字后面添加 > 图标

.more::after{
    position:absolute;
    top: 3px;
    left: 20px;
    content: ""; 
    width: 23px;
    height: 23px;
    border-top: 2px solid #FFF;
    border-right:2px solid #FFF;
    transform: rotate(45deg); 
}

匹配以什么开头的样式写法

在每个li上面加上背景图标和样式（这样可以省略重复代码）

.nav li [class^="loca-nav-icon"]{
    width: 30px;
    height: 30px;
    background-color: red;
    background: url(a.png) no-repeat 0 0;
    background-size: 32px auto;
} 
.nav li loca-nav-icon-icon1{
    background-position: 0 -32px;
}  
.nav li loca-nav-icon-icon2{
    background-position: 0 -64px;
}

object-fit: cover 图片保持原始比例

transition和animate有何区别

Transition是css中检测指定属性变化进行自动补间动画的属性。
Animate是先指定好动画过程中的关键帧属性，进行动画的属性。

滚动背景图片固定效果

background:url(../img/bg.jpg) no-repeat center fixed//不平铺 上下左右居中  固定

图片下面留白问题

造成原因：

图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课）
而这个属性的vertical-align的默认值是baseline。
所以就会出现上图的情况（图片底部出现一个小留白区域）。

解决办法：

将img的vertical-align设置为middle

uniapp 隐藏滚动条，但依旧具备可以滚动的功能

/deep/.uni-scroll-view {
    background-color: #fff;
}

/deep/.uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none
}

button按钮文字超过宽度自动换行

width: 50px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
height: auto;
overflow: hidden;