首页 > 代码库 > 整理的前端注意事项和笔记
整理的前端注意事项和笔记
/*谷歌浏览器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的父节点。
整理的前端注意事项和笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。