css常用解决方案

（1）禁止选中文本

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Chrome/Safari/Opera */

-khtml-user-select: none; /* Konqueror */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; 

 

（2）禁止换行，省略号

white-space: nowrap;         /* 禁止换行 */

  overflow: hidden;

/* 其他相关样式 */
text-overflow: ellipsis;     /* 超出省略号显示 */
word-break: break-all;        /* 英文字母断字 */
word-wrap: break-word;        /* 英文单词断字 */
white-space: pre-wrap;        /* 中文断字 */

 

（3）去除 display:inline-block; 1px 间隙

方法一：设置字体大小（推荐）

div {
    font-size: 0;                /* 父级设置字体大小为0 */
}
div span {
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 24px;             /* 自身再设置字体大小 */
}

 

方法二：设置负 margin 值，仔细观察会发现：第一个间隙和第二个间隙值调整并非严格同步。（灵活运用）

div span {
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: -5px;         /* 数值自行调节 */
}

 

方法三：使用flex，请看  Flex 布局教程

 

（4）垂直居中

方法一： table布局（兼容性好，需要在外面包两层标签）

.wrapper {
    display: table;
    height: 100%;
    border: 1px solid #000;
}

.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="wrapper">
    <div class="content">
        <img class="clear" src="i-see.svg" alt="" width="50" height="50">
    </div>
</div>

 

方法二：相对定位 + transform（外面包一层标签，需兼容css3属性）

.content {
    position: relative;
    border: 1px solid #000;
}

.clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

<div class="content">
    <img class="clear" src="clear.png" alt="">
</div>

 

方法三：felx（外面包一层标签，需兼容flex布局）

.content {
    display: flex;                  /*Flex布局*/
    display: -webkit-flex;          /* Safari */
    align-items: center;            /*指定垂直居中*/
    -webkit-align-items: center;    /* Safari */
}
.clear {
    width: 20px;
    height: 20px;
}

<div class="content">
    <img class="clear" src="clear.png" alt="">
</div>

 

 （5）解决ios点击闪屏

-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(200,200,200,0);

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/hcxwd/p/8303872.html