日常心得（持续更新）

下拉框

<select class="selelct">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>
	.selelct{
	    appearance: none;//去除默认的三角形
	    -webkit-appearance: none;
	    background: transparent url(../images/lg/icon_down.png) no-repeat;//替换自定义的下拉箭头
	    background-position: 90% center;
	    outline: none;  // 去掉下拉时候的蓝框
	}

素材：

自定义单选

 <div class="input-radio-wrap">
	<input type="radio" class="input-radio" name="1" />
	<span class="input-radio-txt">安全</span>
 </div>
 
    .input-radio {
        position: relative;
        top: 2px;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-right:15px;
        padding: 0;
        width: 14px;
        height: 15px;
    }

    .input-radio-txt {
        display: inline-block;
        vertical-align: top;
        flex: 1;
        height: auto;
        line-height: 17px;
        color: #aaaaaa;
        font-size: 15px;
    }

    input[type="radio"]::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        display: inline-block;
        width: 15px;
        height: 15px;
        background-image: url("./imgs/lg_bg_radio.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
    }

    input[type="radio"]:checked::before {
        background-image: url("./imgs/lg_bg_radio_checked.png");
    }

    input[type="radio"]:checked+.input-radio-txt {
        color: #599eff;
    }

自定义复选：

<input type="checkbox" class="input_check" name="1" /> 

.input_check{
    position: relative;
    width: 16px;
    height: 16px;
    margin:0;
    padding:0;
    border:none;
    cursor: pointer;
}
.input_check::after{
    content:'';
    display: inline-block;
    width: 16px;
    height: 16px;
    background:#ffffff url("../../images/bg_input_check.png") no-repeat center / 16px 16px;
}
.input_check:checked::after{
    background:#ffffff url("../../images/bg_input_checked.png") no-repeat center / 16px 16px;
}

图片自适应大小

 <div class="right_content_map">
 [外链图片转存失败(img-QnCiaStr-1562047304958)(https://mp.csdn.net/mdeditor/images/lg/data_exception_map.png)]
<div>
 .right_content_map{
    position: absolute;
    left: 9%;
    top: 9%;
    right: 35%;
    bottom: 13%;
}
图片设置百分百，图片父级容器大小由定位拉开

字体渐变色

.font_color_1 {
    background: linear-gradient(#34a0fc, #00ebff);
    -webkit-background-clip: text;
    color: transparent;
}

IE9+ 渐变

.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;} 

输入框去掉默认蓝框

outline:none;

css选择器

/*选择除了最后一个的*/
li:nth-last-child(n+2){
	border-top：1px solid #ff0000;
}
/*【负方向范围】选择第1个到第6个 */
 li :nth-child(-n+6){}
 
/*【正方向范围】选择从第6个开始的 */
 :nth-child(n+6){}
  
  /*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
 :nth-child(-n+9):nth-child(n+6){}

/*除了第一个tr，后面的奇数tr背景色变红*/
table tbody tr:not(:first-of-type):nth-child(odd){
    background: red;
}

左边固定，右边自适应

 
 <div class="note_wrap cl">
           <label class="note_title fl">注：</label>
           <p class="note_content_EN" style="overflow:hidden;">The Data Explorer is an interactive tool that provides access to data from EPA's annual Inventory of U.S. Greenhouse Gas Emissions and Sinks. You can follow the instructions on the right and use the options below to create customized graphs, examine trends over time, and download the data. You can visit other EPA pages to learn more about EPA's national inventory and how it relates to EPA's Greenhouse Gas Reporting Program。</p>
 </div>
 /*	左边元素浮动，右边块级元素设置overflow：hidden；*/

点击空白处，弹框消失

 event.stopPropagation();//阻止事件冒泡
 $(document).click(function (e) {
                    var target = $(e.target)||$(e.srcElement);
                    if (target.closest('m_select_content_list').length == 0) { //m_select_content_list目标弹框
                        $(_this).siblings('.m_select_content_list').hide();
                    }
                });

$(document).on('touchend', function (e) {
        e.stopPropagation();
        /* 
          判断点击事件发生在区域外的条件是：
	      1. 点击事件的对象不是目标区域本身
            2. 事件对象同时也不是目标区域的子元素
         */
        // _planContentEdit 要除外的区域

        if (!_planContentEdit.is(e.target) && _planContentEdit.has(e.target).length === 0) {
            _planContent.val(_planContentEdit.val());
            _popupPlanContent.addClass('hide');
        }
    });

背景透明用rgba颜色

background:rgba(0,0,0,0.6);
/*#00000060安卓不能显示*/

判断表单是否被修改过
判断表单是否被修改过

获取表单默认值

//defaultValue是DOM元素属性，JQ对象要先转换
//JQ:
$(ele).get(0).defaultValue;
//原生JS
document.getElementByClass(“account”).defaultValue；

通用tab切换

/**
 * @Date: 2018-11-30 10:40:20
 * @param 
 * @author lg
 * @desc:tab切换方法
 **/
function clickToggle(clickEle, showContent) {
    var $ele = $(clickEle) || '',
        $Content = $(showContent) || '';
    $ele.on('click', 'li', function () {
        var _this = this,
            _index = $(_this).index();
        $(_this).addClass('active').siblings().removeClass('active');
        $Content.eq(_index).addClass('show').siblings(showContent).removeClass('show');
    })
}

input、textarea样式修改

input,textarea{
	margin:0;
	padding:0;
	outline:none;
	resize:none
}
//placeholder颜色
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

flex布局：三行，第一第三行高度固定，第二高度自适应

 <div class="main">
        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom"></div>
    </div>
    .main{
    		/*！！！父容器的高度要有！！！*/
            position: absolute;
            top:0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            width: 100%;
            height: 100%;
            background: red;
        }
        .top{
            height: 100px;
            background: green;
        }
        .center{
            flex:1;
            background: yellow;
        }
        .bottom{
            height: 100px;
            background: black;
        }

手机屏幕尺寸JS判断

<script type="text/javascript">
     
    //定义变量获取屏幕视口宽度
    var windowWidth = $(window).width();
    if(windowWidth < 640){
        // do something
    }
    if(windowWidth >= 640){
        // do something
    }
 
</script>

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕物理分辨率的高： window.screen.height

屏幕物理分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

屏幕缩放因子：window.devicePixelRatio

屏幕逻辑分辨率：window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)

iphone实现hover效果，设置active无效问题

• 在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
• 要让css的:active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。
• Use the :active pseudo-class in your css, then add ontouchstart="" and οnmοuseοver="" to the body tag.
  （在您的css中使用:active伪类，然后添加ontouchstart=“”和οnmοuseοver=“”到body标签。）
  设置active无效问题

<body onmouseover=" "  ontouchstart= " "  >
</body>
//vue中使用v-on指令。即v-on:touchstart=""

浏览器滚动条兼容样式
基于webkit的浏览器

/* 滚动条样式 */
  ::-webkit-scrollbar{
    width: 4px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb{
    border-radius: 1em;
    background-color: rgba(50,50,50,.3);
  }
  ::-webkit-scrollbar-track{
    border-radius: 1em;
    background-color: rgba(50,50,50,.1);
  }

火狐浏览器滚动条隐藏

overflow-y: scroll;
scrollbar-color: transparent transparent;
scrollbar-track-color: transparent;
-ms-scrollbar-track-color: transparent;