CSS 宝典

input点击时候，有个灰块

outline:medium;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;

 

横向滚动。

.container {
    overflow-x: scroll;
    overflow-y:hidden;
    white-space:nowrap;
    padding: 15px 0px 20px;
    .item {
        display: inline-block;
        width: 33%;
        img {
            width: 70%;
        }
    }
}

 

 宽度计算。android4.3不兼容。android4.4部分兼容

width: calc(~'100% - 54px');

CSS单行省略号：

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

CSS多行省略号：(padding过大，会无效果)

display: -webkit-box;
text-overflow: ellipsis;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

 CSS垂直剧中  flex

.y-item-img-bg {
    position: absolute;
    right: 6%;
    top: 10px;
    width: 30%;
    height: 80px;
    display: flex;
    display: -webkit-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    img {
        max-width: 100%;
        max-height: 100%;
    }
}

 CSS正方形（头图） padding-bottom: 100% 。（height:100%。 会导致图片更改图片比例，若图片不是正方形，图片会被压缩。）

.img-bg{
    position: relative;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding-bottom: 100%;
    .item-img {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
}

 

1像素line。  transform 是关键。

:global .line {
      width: 100%;
      height: 1px;
      background-color: #EBEBEB;
      -webkit-transform: scale(1, 0.5);
      transform: scale(1, 0.5);
    }

 

input placeholder 设置

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
            color: #cccccc; 
        } 
        input:-moz-placeholder, textarea:-moz-placeholder { 
            color: #cccccc; 
        } 
        input::-moz-placeholder, textarea::-moz-placeholder { 
            color: #cccccc; 
        } 
        input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
            color: #cccccc; 
        }

屏幕宽度

document.documentElement.clientWidth

 

转载于:https://www.cnblogs.com/penn-wang/p/5524746.html