总结

1. 矩形图片显示中间部分

.panel{
        height: 200px;
        width: 200px;
        background-size: cover;
        background-position: center;
        background-image: url('./img1.png');
    }

<div class="panel"></div>

1.1 补充: 使用object-fit 样式

.img{
    object-fit:cover;
    height:200px;
    width:200px;
}

1.2 object-fit样式默认图片居中，使用object-position修改位置

    object-fit: scale-down;
    object-position: left top;

<img class="img" src="./img1.png"/>

2. 文字超出显示省略号

.text{
        width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

<div class="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

3. 英文，数字自动折行

.word{
        width: 200px;
        word-break: break-all;
    }

<div class="word">123123123123123123123123123123123123123123123123123123123123123123123123</div> 
<div class="word">asdfghjkjhthfghtrhfgbfghregdfgdfgdfgrdgdfgdrgdfdvbdfgdrgdfgdrd</div> 

4. h5 拦截安卓物理返回键

history.pushState(null, null, location.href);
window.addEventListener('popstate', function (event) {
    history.pushState(null, null, location.href);
    App.methods.back();//H5自己定义的返回方法
});

5. 页面置灰

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

6. 页面滚动时，不显示滚动条（修改滚动条的样式）

div::-webkit-scrollbar {
  width: 0;
}