css个人笔记

• css权重

                               !important
           style               1000
             id                100
 class  伪类  [class="btn"]    10
       标签 伪元素             1
               *               0
伪类: 
 1 :link 修改从未被访问过状态下的样式          2 :visited 修改被访问过的状态下的样式
 3 :hover 修改鼠标悬停在标签状态下的样式       4 :active 修改鼠标长按状态下的样式    
 5 :focus;

 :first-child{ }
 :last-child{  }
 :nth-child(n){}

伪元素:
div::before{
    content: '' / url(),
}
div::after{}

• 浏览器内核及其前缀：
  • css标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样,浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所有会加厂商前缀加以区分。如某个属性已经从草案变为了或接近推荐方案并且厂商已经实现了推荐属性，那就不用加厂商前缀，如border-raduis.

目前基本的浏览器内核如下4种，其他的内核都是基于此4中进行再研发的

1. Gecko内核: 前缀 -moz- : 火狐浏览器
2. Webkit内核: 前缀 -webkit- : chrome,safari
3. Trident内核: 前缀 -ms- : IE
4. Presto内核: 前缀 -o- : opera

浏览器内核及其前缀作用:
css3中有些属性是属于实验性质暂不被支持的，添加前缀可以在相关的浏览器中起作用

for instance: text-stroke

div{
    font-size: 50px;    
    /* text-stroke:1px orange;   无效!  */
    color: transparent;
    -webkit-text-stroke: 1px orange;
    -moz-text-stroke: 1px orange;
    -ms-text-stroke: 1px orange;
    -o-text-stroke: 1px orange;
    /*在实际开发中将所有前缀写一遍后，再标准写一遍*/
    text-stroke:1px orange; 
}

for instance: text-stroke; chrome

• text-shadow: 水平 垂直 模糊度 颜色；

div{
    font-size: 30px;
    text-shadow: 5px 5px 3px orange,5px -5px 3px greenyellow;
}

text-shadow

• box-shadow：水平 垂直 模糊度 (阴影扩展) 阴影颜色 (内外阴影)；

button{
    border-radius: 3px;
    padding: 15px 20px;
    border: none;
    box-shadow: 2px 1px 3px black;
}
button:active{
    box-shadow: 1px 1px 2px black inset;
}

click.gif

• transform

        div{
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid orange;
            /* transition: all 0.1s; */
        }
        div:hover{
            transform: rotate(60deg);
            /* transform: translate(30px, 10px);  */
            /* transform: scale(1.2, 1.2); */
            /* transform: skew(-50deg,0deg) 倾斜 */
        }

transform.gif

        div{
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            background: black;
            margin: 20px auto;
            /* perspective: 300px; */
        }
        img{
            width: 100%;
            height: 100%;
            transform-origin: center bottom;
            /* transition: all 0.2s; */
        }
        div:hover img{
            transform: perspective(300px) rotateX(50deg)
        }

有perspective
无perspective

• transition
  translation-duration: 5s, 5s;
  transition-property: 颜色、数字、转换、阴影、渐变、visiblity、
  transition:all 5s;
  transition-delay: ns;
  transition-timing-function: ease 默认由慢>快，linear 匀速， ease-in 慢>加速，ease-out 快>减速，ease-in-out 慢>加速>减速

  div{
       width: 100px;
       height: 100px;
       background-color: orange;
       margin: 20px auto;

       transition-property: background-color,width;
       transition-duration: .2s;
       transition-timing-function: linear;
       transition-delay: 0s;
   }
   div:hover{
       background-color: yellowgreen;
       width: 150px;
   }

哪个元素需要变化效果就给那个元素添加transition

        ul{
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 20px auto;
            overflow: hidden;
            padding-left: 0;
        }
        li{
            width: 100px;
            height: 100%;
            list-style: none;
            float: left;
            left: 0;
            transition: width 0.4s;
        }
        ul:hover li{
            width: 80px;
        }
        ul li:hover{
            width: 200px;
        }

change.gif

• animation
  animation--name: 名称
  animation-duration: 3s
  animation-timing-function: easy / easy-in...
  animation-delay: ms

-- animation-iteration-count: unset不设置 / infinite无限次数
-- animation-direction: normal默认 / reverse逆向播放 / alternate 轮播(1,2,3,2,1)
-- animation-fill-mode: none 默认 / forwards 播完后显示最后一帧 / backwards播放完后显示播放第一帧
-- animation-play-state: 默认running / paused；设置动画是否处于播放还是暂停的状态上;

• animation: name duration ( timing-function delay iteration-count )；

    <style>
        div{
            height: 100px;
            border: 2px solid black;

            animation-name: entry;  /*初始加载entry动画*/
            animation-duration: 0.3s;

            width: 100px;           /*初始entry动画结束时达到结果, 如果不设置，默认会继承父级宽度100%了*/
            background: red;
            /* opacity: 1; */       /*所有元素默认是1,所以可以不用写*/
        }
        @keyframes entry{
            0%{
                width: 0px;
                opacity: 0.2;
                background: orange;
            }
            100%{
                width: 100px;
                opacity: 1;
                background: red;
            }
        }
        @keyframes leave{
            0%{
                width: 100px;
                opacity: 1;
                background: red;
            }
            100%{
                width: 0px;
                opacity: 0.2;
                background: orange;
            }
        }
    </style>

    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var isShown = true;

    btn.onclick = function(){
        isShown = !isShown;
        changeDiv();
    }

    function changeDiv(){
        if(isShown){
            box.style.animationName = 'entry';

            box.style.width = 100 + 'px';  
            box.style.opacity = 1;
            box.style.background = 'red';

            // 注意: js这里写的style样式 是动画结束后需要达到的结果
            // keyframes里的样式是动画进行的效果
        }else{
            box.style.animationName = 'leave';

            box.style.width = 0 + 'px';
            box.style.opacity = 0.2;
            box.style.background = 'orange';
        }
    }

animation.gif

水平垂直居中

 .center{   
    border: 1px solid orange;
    width: 300px;           
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }