CSS问题整理

在移动端上运行，发现，点击某些带事件的DOM后，出现瞬间的闪动，a标签点击的时候还是出现黑色的背景。

解决方案

在css中添加

*{
     -webkit-tap-highlight-color:transparent;//方法一main
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//方法二
}

css的选择器中.a .b和.a > .b的关系

.a b{
    //选择所有子元素
}
.a > b{
    //只选择儿子类元素
}
选直系子元素，和所有子元素的办法

css + 选择器

h1 + p {margin-top:50px;}

选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

css3绘制平行四边形

.p{
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
}

取消a标签在移动端点击时的蓝色

去除ios input框点击时的灰色背景,取消a标签在移动端点击时的蓝色

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

 -webkit-tap-highlight-color: transparent;

边距合并

两个div第一个margin-bottom：40px；第二个margin-top：20px

两个div相距多少

40px

边距合并是指两个外边距相遇时会出现只留一个外边距，边距大小是组合到其中的最大外边距

超出部分省略号显示

*{
    overflow:hidden; //超出的文本隐藏

    text-overflow:ellipsis; //溢出用省略号显示

    white-space:nowrap; //溢出不换行
}

监听移动端软键盘回车事件

方法很简单,就是在搜索框的input外面套一个form标签注意点:form标签一定得添加 action属性(可设置为空)

<form action=""><input type="text" name="search" /></form>

移动端软键盘的回车会触发form的submit事件,所以我们只需要监听form的submit事件就可以实现按回车按钮进行搜索的功能

var oForm =  document.getElementsByTagName("form")[0];
oForm.onsubmit = function(){
    alert("yes")
};

IOS端监听软键盘回车事件

$("form").keydown(function(e){
    //IOS端监听回车事件
    if(e.which === 13 || window.event.keyCode == 13){
        var val = $('input').val();        
        httpEditWeight("birthweight",val);
                /*将修改后的出生体重存到localstorage*/
        localStorage.setItem("birth_weight",val);
        $("input").blur();
            //失去焦点，也就是键盘收起执行的操作
        $('#footer').css({"display":"block"});
        $('.div-bg').css("bottom","3.5rem")
        $('input').css("pointer-events","none");//点击使输入框无效
        $('.edit').removeClass("edit1").text("千克");
        disFlag = !disFlag;

        console.log("hello");
}
                })