几个css常用标签

Posted 2020-09-20

总结一下自己在项目中常用到的一些css属性：

      1.将某个快固定在屏幕的顶部/底部位置:

           position:fixed;

           bottom:0;或者 top:0;   

      2.个浏览器的兼容前缀：

          -webkit-   /*safrai、chrome浏览器私有*/

          -moz-      /*firefox浏览器私有*/

          -mz-       /*IE浏览器私有*/

          -0-         /*欧朋浏览器私有*/

      3.flex （也需加上兼容前缀）

           在css中，可以说flex是一个即轻便又简洁的布局神器了，下面列出常用的几个属性：

             在容器上  position:flex;

                     设置子级的排列方向      flex-direction:row            (→)

                                                    flex-direction:row-reverse (←)  

                                                    flex-direction:column        (↓)

                                                    flex-direction:row-reverse  (↑)

                     设置子级的对其方式      justify--contet:center         居中

                                                    justify--contet:flex-star      左对齐

                                                    justify--contet:flex-end       右对齐 

                                                    justify--contet:space-between   子级之间留空隙 （如两个子级分别在贴两头）

                                                    justify--contet:space-around     子级之间、之前、之后都留有空隙

                     多个子级进行排列         flex-wrap:nowrap                默认不换行

                                                    flex-wrap:wrap                    换行

                     在子级中                    order:具体数值                     默认为零、数值小的排前面

                                                    flex-grow: 具体数值              默认为零、如果有1和2则这两个子级瓜分剩余空间，分别占1/3 和 2/3空间。

        4.         伪类选择器                  多个同类标签下如:li p span img  可通过父级的类去控制个别子标签  .content li:first-child{}   .content li:last-child{} 

                                                    多个子级时也可以这样写    .content li:nth-child(第几个子级就写几，不限同类标签){}  

        5.         渐变背景                     background-image:-webkit-linear-gradient(right,#000000,#777777 50%,#000000);有to right; to left; to top; to bottom

        6.         超出文本部分用省略号代替  text-overlow:ellipsis;    /*兼容性：ie支持。safari:-webkit-.欧朋-0-*/

                                                       white-space:nowrap;

                                                       overflow:hidder; 

                                                       word-break: break-all;

                                                      -webkit-box-orient: vertical;

                                                      -webkit-line-clamp: 3;           (换几行)

        7.        背景阴影                        box-shadow:水平阴影 垂直阴影 羽化值 阴影颜色

        8.        图片滤镜                        fliter:blur(2px)模糊度