好记星还是好记性都不如烂笔头，记录简短属性，方便查询遗忘的css技巧，总结加深记忆

1，::first-letter伪元素对display:table；display:flex；无效。字符前面不能有图片或者inline-table之类的元素存在。

2，opacity和transform等新属性会影响元素的z-index。

3，word-break打的是单词间的注意，word-wrap打的是间隙标点分割的注意。word-spacing是单词之间间距的，white-space是字符是否换行显示的。

4，图片元素下方缝隙，默认有文本节点存在，行高的上下空间 （vertical-align：baseline;）导致，可以img { display: block; }； 或vertical-align:bottom vertical-align:middle vertical-align:top；或让line-height足够小或 让font-size: 0;。

5，flex（弹性盒）布局属性display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative;水平justify-content根据排列模式自己再填写。

6，background 分解属性 background-image: url(images/bg.png); background-repeat: no-repeat; background-size: cover; background-position: left top;多个图片作为背景时候，background-image: url(l-t.png), url(r-t.png),url(l-b.png),url(r-b.png); background-repeat: no-repeat; background-position: left top, right top,left bottom,right bottom; background-size: 5%, 20%,10%,5%;分别设置。

7，a标签点击阴影问题a:focus {outline: none; border: none;outline-style:none; -moz-outline-style: none;}，a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none;}。

8，img{-webkit-touch-callout: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}；

9，-webkit-overflow-scrolling:touch;  属性控制元素在移动设备上是否使用滚动回弹效果，流畅滑动。

10，单行省略号overflow: hidden;text-overflow:ellipsis;white-space: nowrap;。

双行省略号： 

text-overflow: -o-ellipsis-lastline;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  line-clamp: 2;  -webkit-box-orient: vertical;

11、弹性和布局display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;justify-content: space-between; -webkit-justify-content: space-between;

12、绝对定位左右居中    left: 50%;top:50%;

transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);

position: absolute;

13、输入框占位符样式::-webkit-input-placeholder { color:#f00; }::-moz-placeholder { color:#f00; } /* firefox 19+ */:-ms-input-placeholder { color:#f00; } /* Internet Explorer 10+ */:-moz-placeholder { color:#f00; } /* firefox 14-18 */

14、透明遮罩层   width:100%;height:100%;position:fixed;top:0; background:rgba(0, 0, 0, 0.6);z-index:11;left:0px; 

15、css 选择器

16、断行

white-space: pre-wrap;

17、文本渐变色  

font-size: 20px;

font-weight: bold;

background: linear-gradient(to bottom, #f0d8b6, #99745a);

background: -webkit-linear-gradient(to bottom, #f0d8b6, #99745a);

-webkit-background-clip: text;

-webkit-text-fill-color:transparent;

color: #99745a;

18、swiper  全屏滚动 到最后底部时  只滚动底部高度

其他设置height：100%  底部设置固定高度

初始化是设置 

slidesPerView :'auto',

direction: 'vertical',