css的简单使用思想

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

设计模式

设计模式OOCSS（面向对象CSS思想）

一个对象，具有很多方法，想要扩展这个对象的方法，并且不修改，那就是用继承方式，扩展，用到CSS上面就可以，menu为父类，然后不修改父类的情况扩展第一个menu的样式。

  

<div class="App">
        <div class="menu fix"></div>
        <div class="menu"></div>
        <div class="menu"></div>
</div>

容器与内容分离，content样式和container1，contianer2分开写，因为content里面的内容很可能是一致的

    <div class="container1">
      <div class="content"></div>
          
    </div>
        
    <div class="container2">
            
      <div class="content"></div>
          
    </div>

结构（基础对象）与皮肤（另一个对象）分离，menu是结构，fix是皮肤

    <div class="App">
          
      <div class="menu fix"></div>
          
      <div class="menu"></div>
          
      <div class="menu"></div>
        
    </div>

BEM

B(Block块) E（element）M(modified)

        <div class="menu">
        <div class="menu-tab menu-tab--style1"></div>       
        <div class="menu-tab menu-tab--style1"></div>       
        <div class="menu-tab menu-tab--style2"></div>       
        <div class="menu-tab menu-tab--style2"></div>     
    </div>

SMACSS

分类：Base（基本类型）,Layout,Modules(公共复用的模块),State（模块的不同状态效果）,Theme

好处：一

动画

transition

transition: property duration timing-function delay;

transition-property(默认为all)

transition-property: none|all|property;

transition-duration(过渡效果所需时间)

transition-duration: time;

transition-timing-function(过渡的速度，默认为ease慢慢加快)

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数

transition-delay(延迟所需要的时间)

transition-delay: time;

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

Animation

animation: name duration timing-function delay iteration-count direction;

animation-name

animation-name: keyframename|none;

animation-duration

animation-duration: time;

animation-timing-function

同transition一致。

animation-iteration-count(播放的次数)

animation-iteration-count: n|infinite（无限播放）;

animation-direction，如果把动画设置为只播放一次，则该属性没有效果。

animation-direction: normal|alternate（反向轮流播放）;