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());
})

  

上一篇:自己动手实现java数据结构(七) AVL树


下一篇:资深P7架构师详解淘宝服务端高并发分布式架构演进之路