摸鱼复习一下css1

css这些自己之前随意做的笔记，工作没事做，简单复习一下
1.事件绑定和移除
btn.onclick = function () {} -------btn.onclik = null
addEventLister(‘click’,fn) ----removeEventLister(‘clcik’,fn)----------回调函数不能写匿名函数才能解绑
ie9-ie10: btn.attachEvent(‘onclick’, fn);----------btn.detachEvent(‘onclick’,fn)

2.居中几种方式(子盒子在父盒子居中)
水平居中
1.绝对定位，left:50%; margin-left: 盒子一半
2.绝对定位，left:50%; transform: translateX(-50%); —利用动画拉回一半
3.绝对定位：左右let:0; right:0; margin: 0 auto;
4.直接在父盒子中 margin: 0 auto;
5.自己计算宽高，设置margin/padding，使盒子居中
6.子盒子设置成行内块元素，利用text-align:center居中

垂直居中
1.绝对定位，top:50%; margin-top: 盒子一半
2.绝对定位， top:50%; transform: translateY(-50%); —利用动画拉回一半
3.绝对定位：上下top:0; bottom:0; margin: auto 0;
4.自己计算宽高，设置margin/padding，使盒子居中

水平垂直居中
1.绝对定位： top:0; bottom:0; left:0;right:0; margin:auto auto;
2.利用上面的先水平再垂直

3.去掉行内元素间隙
<取消间距
1.父元素设置font-size=0;子元素再单独设置font-size
2.代码修改，，去掉代码间空格，换行，挨着放或者用注释替换空格，换行
3.设置word-spacing:—调节字间距

4.解决margin塌陷（子盒子设置margin,会让父盒子跟着掉，也就是孩子踢父亲一脚）
注意：行内块元素不会导致margin塌陷，本质触发了bfc
1.给父亲设置边框或者padding
2.父元素或者子元素触发bfc

5.body细节
当html不设置背景时，body的背景将作为整个浏览器的背景色，而不是body标签自己的背景色。
当设置html背景色后，body的背景色就变成了body自己的背景色，此时html的背景色将被浏览器获取成为浏览器的背景色。

**6.css样式禁用a点击**
 a {
        pointer-events: none;
 }

7.切换页面时暂停动画
// 切换时暂停
document.addEventListener('visibilitychange',function(){
if(document.hidden){
    div.style.animationPlayState = 'paused';
}else{
    div.style.animationPlayState = 'running';
}

},false);

猜你喜欢