# css技巧汇总

// 下面这个就是设置  ideal viewport
 <meta name='viewport' content='width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scalable=no'>

/*
  1、基本选择器
    通配选择器    *
    元素选择器    p
    ID选择器      #id
    类选择器      .class
    群组选择器	  p,span(作用于每个元素)

  2、层次选择器
    上下级(不同层次)
        后代选择器（包含选择器）  E F (E包含F)
        子选择器                E>F  (F是E的子元素)
    同级(同层次)
        相邻兄弟选择器           E+F (E后面的第一个元素是F)
        通用选择器              E~F  (E后面的所有F元素)

  3、属性选择器语法
    以单词为整体
    E[attribute]          用于选取带有指定属性的E元素。
    E[attribute=value]    用于选取带有指定属性和值的E元素。只能有一个的情况 
    [attribute~=value]   用于选取属性值中包含指定词汇的元素。多个单词中的一个,整个单词
    [attribute|=value]	 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词(a1-12)指a1
    以字符串
    a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素
    a[src$=".pdf"]  选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
    a[src*="abc"]   选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

  4、伪元素(伪元素改变文档结构)
      E:before/E::before
      E:after/E::after
  
  伪类选择器（5个伪类）
    5、动态伪类
        a:link      未访问  
        a:visited   已访问
        a:hover     悬浮
        a:active    被激活
        (a标签顺序从上到下)
        a:focus     获取焦点
    6、状态伪类
        E:checked     匹配选中的复选按钮或者单选按钮表单元素
        E:enabled     匹配所有启用的表单元素 form表单中的非禁用
        E:disabled    匹配所有禁用的表单元素    禁用元素
    7、目标伪类
        E:target  E元素被相关URL指向,才选择E元素
        例子:当点击a链接，链接跳转到h1的时候，h1的文字会显示为红色
        #big-bam-boom1:target {
            color: red;
        }
        <h1 id="big-bam-boom1">Kaplow!</h1>
        <a href="#big-bam-boom1">Mission Control, we're a little parched up here.</a>
    8、否定伪类
        E:not(F)    匹配所有除元素F外的E元素(F一般是 多个类中的一个)
        div:not(.div){
          background: red;
          margin: 10px;
        }
        <div class="div">div1</div>
        <div class="div1">div2</div>
        <div class="div2">div3</div>
  
    9、结构伪类(一般都是选择父元素下的)
        E:first-child 父元素的第一个子元素 是E    与E:nth-child(1)等同
        E:last-child	父元素的最后一个子元素 是E  与E:nth-last-child(1)等同
        E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even偶数，odd基数）
                        、可以是公式（2n+1）,而且n值起始值为1，而不是0.(n不能用别的字母代替)
        E F:nth-last-child(n)  用法同上 取反 (odd是偶数)
        
        (上面是第n个元素是E，下面是第n个E类型的元素,一般带of就是找类型，带child就是找元素)
        E:nth-of-type(n)  选择父元素内具有指定类型的第n个E元素
        E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
        E:first-of-type   选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
        E:last-of-type     选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同

        :root  根元素
        E:empty           选择没有子元素的元素，而且该元素也不包含任何文本节点

        E:first-letter  选择 <p> 元素的首字母
        E:first-line    选择 <p> 元素的首行(只要是折行都不算首行,可缩小浏览器试试)

        E:only-child      选择父元素只包含一个子元素，且该子元素匹配E元素
        E:only-of-type    选择父元素只包含一个同类型子元素，且该子元素匹配E元素

*/ 

.clear::after{
  content:'';
  clear:both;
  display:block;
  visibility:hidden;
  height:0
}

.container{
    background:red;
    width:10px;
    height:10px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 200px 200px 0 5px green,
        230px 200px 0 5px green,
        215px 215px 0 -3px red;
}

.i{
  background:url('./xx.png') no-repeat;
  background-size:20px 40px;
  transition:background-position 0.4s
}
.i{
  background-position: 0 -20px
}

.container{
  width:400px;
  height:300px;
  backgroud:url(xxx.jpg);
  clip-path:circle(50px at 100px 100px);
  transition:clip-path 0.4s;
}
.container:hover{
  clip-path:circle(80px at 100px 100px);
}

  <div class="container">
      <div id="cube">
          <div class="front">1</div>
          <div class="back">2</div>
          <div class="right">3</div>
          <div class="left">4</div>
          <div class="top">5</div>
          <div class="bottom">6</div>
      </div>
  </div>
  .container{
      margin:50px;
      padding: 10px;
      border: 1px solid red;
      width: 200px;
      height: 200px;
      position: relative;
      perspective: 500px;
      // perspective的值代表 眼睛看的距离
  }
  #cube{
      width:200px;
      height:200px;
      transform-style: preserve-3d;
      transform: translateZ(-100px);
      transition:transform 4s;
  }
  #cube div{
      width: 200px;
      height:200px;
      position: absolute;
      line-height: 200px;
      font-size:50px;
      text-align: center;
  }
  #cube:hover{
      transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
  }
  .front{
      transform: translateZ(100px);
      background:rgba(255,0,0,.3);
  }
  .back{
      transform: translateZ(-100px) rotateY(180deg);
      background:rgba(0,255,0,.3);
  }
  .left{
      transform: translateX(-100px) rotateY(-90deg);
      background:rgba(0,0,255,.3);
  }
  .right{
      transform: translateX(100px) rotateY(90deg);
      background:rgba(255,255,0,.3);
  }
  .top{
      transform: translateY(-100px) rotateX(-90deg);
      background:rgba(255,0,255,.3);
  }
  .bottom{
      transform: translateY(100px) rotateX(90deg);
      background:rgba(0,255,255,.3);
  }

  .container{
      width: 100px;
      height: 100px;
      background: red;
      transition: all 1s;
  }
  .container:hover{
      width: 800px;
      background:green;
  }

  .container{
      width: 100px;
      height: 100px;
      background: red;
      animation: run 1s linear;
      /* animation-direction: reverse; */
      /* animation-fill-mode: forwards; */
      animation-iteration-count: infinite;
      /* animation-play-state: paused; */
  }
  // 定义
  @keyframes run{
      0%{
          width: 100px;
      }
      50%{
          width: 800px;
      }
      100%{
          width: 100px;
      }
  }
  <div class="container">
  </div>

  .container{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      background: url(./animal.png) no-repeat;
      animation: run 1s infinite;
      animation-timing-function: steps(1);
  }
  @keyframes run{
      0%{
          background-position: 0 0;
      }
      12.5%{
          background-position: -100px 0;
      }
      25%{
          background-position: -200px 0;
      }
      37.5%{
          background-position: -300px 0;
      }
      50%{
          background-position: 0 -100px;
      }
      62.5%{
          background-position: -100px -100px;
      }
      75%{
          background-position: -200px -100px;
      }
      87.5%{
          background-position: -300px -100px;
      }
      100%{
          background-position: 0 0;
      }
  }
  <div class="container">
  </div>

/*
  容器 
    flex-direction  row/column(row-reverse,column-reverse)
    flex-wrap       wrap/nowrap/wrap-reverse
    flex-flow       上面2个集合默认row nowrap
    justify-content flex-start/center/space-between/space-around
    align-items     flex-start/center/baseline/stretch
    aligin-content  flex-start/center/space-between/space-around

  项目(6个)
    常用 flex 1
    align-self 可以覆盖 align-items 
        flex-start/center/baseline/stretch/auto(默认)
*/

// grid
<style> 
  .one{
    display: grid;
    width: 100%;
    grid-template-columns:300px auto 300px; 
    grid-template-rows: 100px;
  }
  
</style>
<section class="one">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>

// table
<style> 
  .one{
    display: table;
    width: 100%;
    height: 100px;
  }
  .one div{
    display: table-cell;
  }
  .left{
    width: 100px;
    background: green;
  }
  .center{

  }
  .right{
    width: 100px;
    background: red;
  }
</style>
<section class="one">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>

// absolute
<style> absolute
  .one div{
    position: absolute;
  }
  .left{
    width: 100px;
    background: green;
    left: 0
  }
  .center{
    left: 100px;
    right: 100px;
  }
  .right{
    width: 100px;
    background: red;
    right: 0
  }
</style>
<section class="one">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>

// float
<style> 
  .right{
    float: right;
    width: 100px;
    background: red
  }
  .center{
    float: left;
  }
  .left{
    float: left;
    width: 100px;
    background: red
  }
</style>
<section class="one">
  <div class="right">右</div>
  <div class="left">左</div>
  <div class="center">中</div>
</section>

// flex
.one{
    display: flex;
  }
  .left,.right{
    width: 100px;
    background: red;
  }
  .center{
    background: green;
    flex: 1;
  }
  .one div{
    height: 100px
  }

  </style>
  <section class="one">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
  </section>

// meta 元数据信息
// charset 声明文档使用的字符编码
// http-equiv 客户端行为,如渲染模式,缓存等

@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
    color: @color;
    width: @width;
  }

.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}

  @background: {background:red;};
  #main{
      @background();
  }
  @Rules:{
      width: 200px;
      height: 200px;
      border: solid 1px red;
  };
  #con{
    @Rules();
  }

%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}