爱记录

不缩放

flex-shrink:0;

flex 丢失width 100%

用pos定位解决

flex不能溢出隐藏

就是不能用,不用就解决了

点击不选中

user-select: none;

溢出省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

英文换行

word-wrap:break-word;
word-break: break-all;

上下左右垂直居中 一

.box{
    width:100px;
    height:100px;
    background: red;
    border: 1px solid #ccc;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

上下左右垂直居中 二

.box{
    width:100px;
    height:100px;
    background: red;
    border: 1px solid #ccc;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

上下左右垂直居中 三

.parent {
    height:600px;
    display: flex;
    align-items:center;
    justify-content:center;
}
.box{
    width:100px;
    height:100px;
    background: red;
    border: 1px solid #ccc;
}

等比缩放

.box{ width: 600px; height: 600px; background: red; border: 1px solid #ccc;}
.box span{ font-size: 32px; line-height: 32px; display: inline-block;}
.box{ transform: scale(0.5,0.5); transform-origin: 0 0;}

chrome浏览器字体调整

text-size-adjust: none;