css属性名太长记不住的备忘录

[phoebeCodeSpace]

样式篇

-webkit-tap-highlight-color: color | transparent

当用户点击可点击元素，显示的高亮颜色。

-webkit-appearance：none | button | button-bevel ....

改变按钮和其他控件的外观

-webkit-input-placeholder: color

设置placeholder的颜色

布局篇

flex 垂直居中：

.wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

功能篇

超过N行展示...：

.list{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: N;
	word-break: break-all;
}
//强制换行，不同换行依据：
word-break: break-all;      //只对英文起作用，以字母作为换行依据。
word-wrap: break-word;     //只对英文起作用，以单词作为换行依据。
white-space: pre-wrap;    //只对中文起作用，强制换行。

移动端横向滚动：

.nav ul {
     position: absolute;
     left: 0;
     top: 0;
     overflow: hidden;
     overflow-x: scroll;
     overflow-scrolling: touch;
     -webkit-overflow-scrolling: touch;
     white-space: nowrap;
     padding: 0 15px;
     height: 50px;
     font-size: 0;
}

// html
div.scroll-nav>ul.nav-list>li.item-list>a
// css
.scroll-nav {
   overflow: hidden;
   overflow-x: auto;
}
.scroll-nav .nav-list {
   padding-bottom: 2rem;
   white-space: nowrap;
   font-size: 0;
}
.scroll-nav .item-list {
   display: inline-block;
   vertical-align: middle;
}

弹框出现的时候 遮罩层下面防止滚动

body.lock-position {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

偏门篇

text-transform: capitalize; 首字母大写
text-transform: uppercase; 转化为大写
text-transform:lowercase; 转化为小写

touch-action:none;   禁用手势
touch-action: pan-y pinch-zoom; 处理水平平移的图像轮播，但不想干扰网页的垂直滚动或缩放。
touch-action: manipulation; 只允许进行滚动和持续缩放操作。

• touch-action