整理的前端注意事项和笔记

/*谷歌浏览器10像素字体（适用微信浏览器）*/
font-size:14px;
-webkit-transform:scale(0.71);
transform:scale(0.71);

//点击div以外,div消失
$(‘.search-a‘).on(‘click‘,function(e){
    $(‘#condition‘).slideDown(200);
    e ? e.stopPropagation() : event.cancelBubble = true;
})
$(‘#condition‘).click(function(e){
    e ? e.stopPropagation() : event.cancelBubble = true;
})
$(document).click(function() {
    $(‘#condition‘).slideUp(200);
});

//jQuery实现textarea高度根据内容自适应
$.fn.extend({
    txtaAutoHeight: function () {
        return this.each(function () {
            var $this = $(this);
            if (!$this.attr(‘initAttrH‘)) {
                $this.attr(‘initAttrH‘, $this.outerHeight());
            }
            setAutoHeight(this).on(‘input‘, function () {
                setAutoHeight(this);
            });
        });
        function setAutoHeight(elem) {
            var $obj = $(elem);
            return $obj.css({ height: $obj.attr(‘initAttrH‘), ‘overflow-y‘: ‘hidden‘ }).height(elem.scrollHeight);
        }
    }
});
//调用
$(function () {
    $(".txtaMain").txtaAutoHeight();
});

<!-- 阻止微信图片长按出现菜单 ->
<div ontouchstart = "return false;">
</div>

/*双重阴影*/
.buttonbox{
  position:relative;
  width:190px;
  height:50px;
  border-radius:50px;
  box-shadow:0px 9px 6px rgba(0,0,0,0.06);
  margin: 40px auto 0;
  text-align:center;
  line-height:50px;
  color:#51BBA8;
}
.buttonbox::after{
  content:‘ ‘;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50px;
  box-shadow:0px 0px 4px rgba(0,0,0,0.06);
}

/* 1、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？
方法： */
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父节点，p是img的父节点。