css之坑

1、background-size要放在background后边才会生效。

2、隐藏滚动条，内容可以滑动

body::-webkit-scrollbar {
  display: none
 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
}

3、导航栏固定

position: fixed;
top:0px;
//bottom: 0;//固定在底部

在中间部分相对定位，就不会消失　　

4、rem 是相对于根元素计算的，rem值=当前px除以根元素。如：根元素为16px,需要一个18px的字体，只要18/16=1.125rem.

　　

(function () {
      var t;
      function initHtmlFont(){
          var maxWidth = 640;
          var html = document.documentElement;
          var windowWidth = html.clientWidth;
            var windowWidth = html.clientWidth>maxWidth?maxWidth:html.clientWidth;

          html.style.fontSize=(windowWidth/640)*200+'px';
      }
      window.onresize = function(){
        clearTimeout(t);
        t = setTimeout(initHtmlFont,250);
      }
      document.addEventListener('DOMContentLoaded', function () {
        initHtmlFont();
      }, false);
    })();

5、在使用margin的时候子元素影响父元素？

　　加上overflow或border　　

6、垂直居中calc支持运算

　　translate （50%）要加-webkit-

7、查找文本

<div>
			<li>
				<span>1</span>
			</li>
			<li>
				<span>2</span>
			</li>
			<li>
				<span>3</span>
			</li>
			<li>
				<span>4</span>
			</li>
			<li>
				<span>5</span>
			</li>
			<li>
				<span>6</span>
			</li>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
			$("div li").each(function(){
				$(this).find('span').each(function(){
					var a= $(this).html()
					console.log(a)
				})				

			})

		</script>

8、点击事件绑定(事件委托)　html同上

$('div li').on('click','span',function(){
				console.log($(this).html());
			})