css中易掉坑的知识点总结系列（一）

女爷i 2022-05-22 00:48 154阅读 0赞

今天在写css代码的时候，忽然发现很多看起来挺简单的，但是却忽略了它们的小知识点，小细节，所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起，方便自己以后查阅，也希望同时能够帮助到您(主要是针对我个人，有的可能重要，但我自己掌握的比较好，可能不会写在上面哦)

本博会持续更新，不会特意整理，遇到了就会往这里面加，就当是记笔记了

2018/6/11：遇到的css易错知识点整理

1、选择器优先级：

单个选择器的优先级：标签选择器<类选择器<id选择器<行内样式表

复合选择器优先级：写得越精确，优先级越高（css中层级很重要，写层级关系的要比不写层级的优先级高）

2、想要通过设置margin:0 auto;的方法让元素在水平方向居中，该元素必须要设置宽度

3、浮动的div在遇到margin-bottom值时会失效，解决办法：

在包裹层（父级）用padding-bottom代替在自身上使用：margin-bottom

4、为元素设置float（值为none除外），意味着该元素变为块级元素,可以参考：[float][]

5、子元素设置float（值为none除外）时，如果父元素自身没有设置高度，会出现高度塌陷的问题，解决办法：

1、在父元素上清除浮动(可参考[清除浮动][Link 1])2、为父元素设置高度（min-height/max-height/height）

ok，今天就先整理这些了，以后会不断的更新的

更新于2018/6/13

1、如果我们在样式表中对某个样式进行了设置，然后在自定义动画的动画帧中又对改样式做了不同的设置，那么我们想要保持动画帧中的设置，就要再添加一个类将样式表中的那个样式覆盖，不然动画执行完之后样式表中的样式会覆盖掉动画帧中的样式。（好绕啊，直接看例子吧）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>案例1</title>
        <style>
            @-webkit-keyframes show {
                0%{
                    transform:rotateX(-180deg); opacity: 0
                }
                60%{
                    transform:rotateX(10deg);
                }
                70%{
                    transform:rotateX(-8deg);
                }
                80%{
                    transform:rotateX(6deg);
                }
                90%{
                    transform:rotateX(-4deg);
                }
                100%{
                    transform:rotateX(0deg); opacity: 1
                }
            }
            @-webkit-keyframes hide {
                0%{
                    transform:rotateX(0deg); opacity: 1
                }
                100%{
                    transform:rotateX(180deg); opacity: 0
                }
            }
    
            a{
                text-decoration: none;}
            #wrap{width:400px; height:200px; position:relative; margin:300px auto;}
            .img{
                position:relative;
                perspective: 800px; -webkit-perspective: 800px;  transform-style: preserve-3d;
            }
            .btn{position:absolute; width:40px; height:40px; display:block; background:#e15671;
                color:#fff; line-height:40px; text-align:center; top:80px;}
            .btn_1{left:2px;}
            .btn_2{right:2px;}
            .item{width:400px; height:200px; opacity: 0; transition:2s;transform-origin: bottom; position:absolute; transform:rotateX(180deg);}
            .show{-webkit-animation:show 2s; animation:show 2s;transform:rotateX(0deg); opacity: 1}//这里我们又设置了transform，是为了覆盖.item中的transform样式
            .hide{-webkit-animation:hide 1s; animation:hide 1s; transform:rotateX(180deg); opacity: 0}
    
        </style>
    </head>
    <body>
    <div id="wrap">
        <div class="img">
            <img class="item show" src="img/1.jpg"/>
            <img class="item" src="img/2.jpg"/>
            <img class="item" src="img/3.jpg"/>
            <img class="item" src="img/4.jpg"/>
        </div>
        <a href="javascript:;" class="btn btn_1"><</a>
        <a href="javascript:;" class="btn btn_2">></a>
    </div>
    
    <script>
        var item1 = document.querySelectorAll('.item');
        var btns = document.querySelectorAll('.btn');
        var iNow = 0;
        var len = item1.length;
        btns[0].onclick = function(){
            item1[iNow].className = "item hide";
            iNow++;
            if(iNow==len){
                iNow = 0;
            }
            item1[iNow].className = "item show";
        }
        btns[1].onclick = function(){
            item1[iNow].className = "item hide";
            iNow--;
            if(iNow==-1){
                iNow =len-1 ;
            }
            item1[iNow].className = "item show";
        }
    
    
    </script>
    </body>
    </html>

在这个案例中我们在在动画帧中设置了transform属性值，在100%的时候，transform:rotateX(0deg),但是.item中也设置了transform:rotateX(180deg),如果我们没有在.show中添加一条transform样式，那么这个动画执行100%的时候在0deg，然后就会旋转到180deg，而我们想要的结果是执行完这条动画，让其停留在0deg，所以就要在.show重新添加transform:rotateX(0deg)去覆盖上面的.item中的值。

2、Webkit 实现了名为-webkit-font-smoothing的属性。这个属性仅在 Mac OS X/macOS 下生效。

*  none - 关闭字体平滑；展示有锯齿边缘的文字。
 *  antialiased - 平滑像素级别的字体，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
 *  subpixel-antialiased - 在大多数非视网膜显示器上，这将会提供最清晰的文字。

3、看到了淘宝首页的css重置中有的两条样式，之前没怎么用过，记下来

sup {
        vertical-align: text-top
    }
    
    sub {
        vertical-align: text-bottom
    }

更新于2018/6/17：

1、padding区会显示背景图片

2、vertical-align的默认对齐方式是和文字基线对齐，所以如果我们在HTML中添加图片的时候要注意到，如果我们不设置图片的vertical-align属性值的话，它的底部是默认有几个像素大小的，解决办法：vertical-align:top/bottom/middle，设置这三个属性值中的任何一个都是可以的，还有别的方法，请参考大神张鑫旭的博客：[vertical-align][]

3、display:inline-block;inline-block;在横向布局中使用的时候，会有一个小问题：代码换行会解析为空格

4、设置元素为绝对定位时，会提升元素的层级

5、清浮动：清除浮动造成的影响（父级高度塌陷）

1,给浮动元素的父级加高度  
        拓展性不好  
        在不能确定父级高度的情况下不能使用

2，clear:both(用得最多的方法)

zoom:1  用来触发  haslayout(IE浏览器的BFC)

.clear{
                *zoom: 1;/*兼容IE6,7*/
            }
            .clear:after{
                content: '';
                display: block;
                clear: both;
            }

3，BFC (是一套渲染机制)  
        触发一个元素的BFC  
        相当于在这个元素里面建立起一堵围墙

围墙里面的内容和围墙外面的内容不会产生干扰

6、触发BFC的条件：

*  float属性不为none
 *  position为absolute或fixed
 *  display为inline-block, table-cell, table-caption, flex, inline-flex
 *  overflow不为visible

7、vw/vh  
  
    1vw相当于屏幕宽度的百分之一

1vh相当于屏幕高度的百分之一

8、先看段代码：

注意：当我们在用到引号中嵌套引号的时候，要注意如果外面使用的是双引号，里面就要使用单引号，同理如果外面使用的是单引号，里面就要用双引号，今天就范了一个错误，style样式中我两个引号用的都是双引号，结果图片一直出不来，最后才发现是引号的问题。

9、setInterval, setTimeout

FireFox/Chrome浏览器对setInterval, setTimeout做了优化，页面处于闲置状态的时候，如果定时间隔小于1秒钟(1000ms)，则停止了定时器。但如果时间间隔大于或等于1000ms，定时器依然执行，即使页面最小化或非激活状态。

注意：因为是笔记的形式，很多都没有写的那么的详细，如果您有哪些地方是不太懂的，欢迎留言提问哦，一篇写太长看下去比较疲劳，所以一定这一篇就到此结束，之后还会在另一篇博客中持续更新哦

[float]: https://developer.mozilla.org/zh-CN/docs/CSS/float
[Link 1]: https://blog.csdn.net/lhjuejiang/article/details/79721948
[vertical-align]: https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/