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);

 

 

 

 

 

 

 

posted @ 2018-01-17 17:01  清风晰心  阅读(215)  评论(0编辑  收藏  举报