常见问题清单及解决方案总结—CSS方面

常见问题清单及解决方案总结

css万能清除浮动方法

.clearfixed:after {
    content: "";
    clear: both;
                display: block;
                height: 0px;
                visibility: hidden;
}

CSS单行超出省略号显示

.list-item-info p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

CSS多行超出省略号显示

.list-item-info p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

移动端清除输入框阴影

-webkit-appearance: none;

设置input中placeholder属性

.search_bg ::-webkit-input-placeholder { 
    color: #333;
    font-size: 12px;
    text-align: center;
}

置于最底层&置于最高层

将所在DIV 置于最底层,添加CSS如下:

style="z-index:-100;position: relative;"

将被挡住的DIV/ul/li 置于最高层,添加CSS如下:

style="z-index:9999;position: relative;"

css禁止点击

.disabled, [disabled] {
    opacity: .55;
    pointer-events: none;
}

CSS导入特殊字体@font-face

@font-face {
    font-family: 'LT_11441';
    src: url('../../fonts/LT_11441.eot');
    src: url('../../fonts/LT_11441.eot') format('embedded-opentype'),
    url('../../fonts/LT_11441.woff2') format('woff2'),
    url('../../fonts/LT_11441.woff') format('woff'),
    url('../../fonts/LT_11441.ttf') format('truetype'),
    url('../../fonts/LT_11441.svg#LT_11441') format('svg');
}

主要推荐一个好用的@font-face文件转换网站，可以生成全格式的字体文件并提供css写法，复制即可。
https://everythingfonts.com/font-face

密码可见性切换

密码可见性切换功能都是对input的type类型（text/password）进行切换。

点击input 提起数字键盘

一般在移动端的开发中如果输入密码会希望自动弹出数字键盘，减少弹出常规键盘后再切换的步骤，解决方式很简单：

最终效果：

安卓提起数字键盘，只能输入数字和小数点和加减符号，输入其他符号无反应，可以切换到英文键盘或拼音键盘，但无法输入；ios只弹出数字键盘。


有文章提到ios添加pattern="number"可以提起数字键，经iPhoneX测试无效。

密码框弹出键盘

最终效果：

ios、安卓只能输入数字、字母、特殊字符，无法切换到拼音键盘。

最终效果：

安卓和ios一致，只能输入数字和小数点，输入特殊字符时不会清空，ios输入不合法字符时会闪现字符。

使用CSS绘制三角箭头

.search_bg .position b {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;

}

使用CSS绘制同心圆

#rg{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(yellow 40%, white 40%,white 55%,yellow 55%);
    }

使用CSS3 calc()

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。对于单位不统一的元素尺寸计算很友好。
详细参见https://www.jianshu.com/p/b9bc930dd316

.col-3 {
                width: calc(100%/4 - 5px);
                float: left;
                margin-right: calc(5px*4/3);
                background: #eee;
                color: #333;
                height: 100px;
                text-align: center;
                margin-bottom: calc(5px*4/3);
                font-size: 18px;
                line-height: 100px;
            }

点击出蓝色边框

建议写在重置样式文件中

outline:none；

CSS实现背景渐变

background: linear-gradient(left , rgb(255,187,0) 1% , rgb(255,110,55) 85%);
background: -o-linear-gradient(left , rgb(255,187,0) 1% , rgb(255,110,55) 85%);
background: -ms-linear-gradient(left , rgb(255,187,0) 1% ,rgb(255,110,55) 85%);
background: -moz-linear-gradient(left , rgb(255,187,0) 1% ,rgb(255,110,55) 85%);
background: -webkit-linear-gradient(left , rgb(255,187,0) 1% , rgb(255,110,55) 85%);

CSS禁止文本选择

.div{ 
    -moz-user-select:none; 
    -webkit-user-select:none; 
    -ms-user-select:none; 
    -khtml-user-select:none; 
    user-select:none;
}

点击出现半透明的灰色背景

建议写在重置样式文件中

-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
-webkit-tap-highlight-color : transparent ;  

添加鼠标手型

a[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button {
  cursor: pointer;
}

参数：

default 默认光标（通常是一个箭头）

auto 默认。浏览器设置的光标。

crosshair 光标呈现为十字线。

pointer 光标呈现为指示链接的指针（一只手）

move 此光标指示某对象可被移动。

e-resize 此光标指示矩形框的边缘可被向右（东）移动。

ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize 此光标指示矩形框的边缘可被向上（北）移动。

se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize 此光标指示矩形框的边缘可被向下移动（南）。

w-resize 此光标指示矩形框的边缘可被向左移动（西）。

text 此光标指示文本。

wait 此光标指示程序正忙（通常是一只表或沙漏）。

help 此光标指示可用的帮助（通常是一个问号或一个气球）。

注意：始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

文字竖排显示

大多数情况下文字都是横排显示，偶尔需要文字竖排显示时可以使用如下代码：

.verticle {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

字体在移动端比例缩小后出现锯齿的问题

-webkit-font-smoothing: antialiased;

CSS重置样式文件

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}