前端 css样式问题集合

.clearfix {
	zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

清除浮动

font-family: monospace; 字体等宽

input 属性为 number时设置宽度为

<inputtype="number" οninput="if(value.length>5)value=value.slice(0,5)" />

var clearNoNum = function (obj) {
var clearNoNum = function (obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入两个小数
};

只能输入整数或者小数

最最后一个\d几个就有几位

<input maxlength="3" autocomplete="off" type="text" id="discountRate" name="discountRate"

οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" οninput="discontInputCheck(this,$('#thirdDiscountRule').val())">

οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"控制输入数字

 $('#discountRate').on('input',function(){
    var disval = $('#discountRate').val();

    if(disval>=10||isNaN(disval)){
$('#discountRate').val(disval.substring(0,1));
    }if(disval.length>2&&disval<1.1){
    $('#discountRate').val(1.1);
    }if(disval.length<2&&disval==0){
    $('#discountRate').val('');
    }

}

控制输入一位小数

ios 搜索框置顶

<div class="searchStroe" id="searchStroe">
   <div class="am-search">
<div class="am-search-input">
<div class="am-search-ph" style="width: 100%;">
<span class="am-search-ph-container">
<i class="am-search-ph-icon"></i>
<span class="am-search-ph-placeholder" style="visibility: visible;">搜索</span>
</span>
</div>
<input type="search" id="searchshop" class="am-search-value" value="" placeholder="搜撒索" maxlength="8">
<a class="am-search-clear"></a>
</div>
</div>
<div class="line"></div>
</div>
<div id="containerInfo" class="container">
<div class="goods_list">
</div>
</div>

.searchStroe{
position: relative;
    width: 92%;
    padding-right: .3rem;
    padding-left: .3rem;
    padding-top: .2rem;
    z-index: 10;
    overflow: hidden;
    background: #fff; 
    height: 0.95rem;
    -webkit-transition:all .1s;
transition:all .1s;   
}
.container{
padding:0 .3rem;
overflow-y: scroll;  
position: relative;
-webkit-overflow-scrolling: touch;  
}


.msg_content div {
line-height: .35rem;
}
.am-search {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
height:.58rem;
background-color:#fff;
}
.am-search,.am-search-input {
position:relative;
overflow:hidden
}


.am-search-input {
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
width:100%;
height:.58rem;
background-color:#fff;
background-clip:padding-box;
border-radius:.06rem;
    font-size: .28rem;
}
.am-search-input .am-search-ph,.am-search-input input[type=search] {
position:absolute;
top:0;
left:0
}
.am-search-input .am-search-ph {
z-index:1;
height:.58rem;
line-height:.58rem;
width:100%;
-webkit-transition:width .3s;
transition:width .3s;
display:block;
text-align: left; 
    background-color: #f2f5f8;
    padding-left: .3rem;
}
.am-search-input .am-search-ph-icon {
display:inline-block;
margin-right:.1rem;
width:.3rem;
height:.3rem;
overflow:hidden;
vertical-align:-.05rem;
background-repeat:no-repeat;
background-size:.3rem auto;
background-image: url('../images/iconOther.png');
background-size: 100% 100%;
}
.am-search-input .am-search-ph-placeholder {
color:#bbb;
font-size:.28rem
}
.am-search-input input[type=search] {
z-index:2;
opacity:0;
width:100%;
text-align:left;
display:block;
color:#000;
height:.58rem;
font-size:.28rem;
background-color:transparent;
border:0
}
.am-search-input input[type=search]::-webkit-input-placeholder {
background:none;
text-align:left;
color:transparent
}
.am-search-input input[type=search]:-ms-input-placeholder {
background:none;
text-align:left;
color:transparent
}
.am-search-input input[type=search]::placeholder {
background:none;
text-align:left;
color:transparent
}
.am-search-input input[type=search]::-webkit-search-cancel-button {
-webkit-appearance:none
}
.am-search-input .am-search-clear:active{
background-image: url('${resource_path}/assets/praise/images/clear.png');
}
.am-search-input .am-search-clear {
position:absolute;
display:none;
z-index:3;
width:.3rem;
height:.3rem;
padding:.13rem;
border-radius:50%;
    top:0;
right:0;
background-color:transparent;
background-position:50%;
background-repeat:no-repeat;
background-size:.3rem .3rem;
-webkit-transition:all .3s;
transition:all .3s;
background-image: url('../images/clear.png');
}
.am-search-input,.tel .am-search-clear:active {
background-image: url('../images/clear.png');
}
.am-search-input,.tel .am-search-clear-show {
display:block
}
.am-search.am-search-start .am-search-input input[type=search] {
opacity:1;
padding-left:.7rem
}
.am-search.am-search-start .am-search-input input[type=search]::-webkit-input-placeholder {
color:transparent
}
.am-search.am-search-start .am-search-input input[type=search]:-ms-input-placeholder {
color:transparent
}
.am-search.am-search-start .am-search-input input[type=search]::placeholder {
color:transparent
}
.am-search.am-search-start .am-search-input .am-search-ph {
padding-left:.3rem;
width:auto
}
.searchStroe .line{
height: 0.16rem;
    background: #f5f5f5;
    width: 115%;
    margin-top: 0.2rem;
    margin-left: -0.3rem;
}

js：var bodyHei = $(window).height();
var hearderHei = $("#searchStroe").height();
var conHei = bodyHei - hearderHei - 10;
$("body").css('height', bodyHei+'px');
$("#containerInfo").css('height', conHei+'px');

移动端字体大小

document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';

 https://www.cnblogs.com/youryida/p/5447576.html