CSS学习（三）—— device-loop

学习地址：
https://github.com/hakimel/css/tree/master/device-loop
通过案例理解position:relative和position:absolute: https://segmentfault.com/a/1190000006924181#articleHeader3

---

1. 不管是块级元素还是行内元素，应用了position:absolute之后，display为block：可以设置width和height, 没有设置的话，width默认为auto。设置成 position:absolute;脱离文档流，所以是“不占位”的。
2. 设置了position:absolute;如果没有设置TRBL( top,left,bottom和left)，则默认浮动在父元素的content-box。紧接着，元素脱离文档流，由于没有设置width,所以width变成了auto
3. 同级的元素，如果都设置了 position:absolute, 则后面的 元素将会 覆盖 前面的元素，因为默认 代码越靠后的 z-index 越大
4. 不管是块级元素display:block还是内联元素display:inline, 应用position:absolute并且不设置TRBL，它都会默认在父级元素的content-box区浮动。原来的起点位置也是应用绝对定位后的起点位置，只不过如果应用了position:absolute的内联元素左边也有内联元素的话，它的起点位置会变得更靠前，直到紧挨左边内联元素的边界。
5. 父元素 position: relative或absolute, 此时 子元素 position:absolute;left:0;top:0; 子元素寻找 距离最近的一个使用了position:relative/absolute的 父元素（如果找不到，就使用 body的）

---

代码如下：
index.html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>device-loop</title>
        <meta name="description" content="">
        <meta name="author" content="Suwei">

        <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
    </head>
    <body>
        <!--通过data-animation-step来切换-->
        <div class="animation" data-animation-step="1">
            <div class="device">
                <div class="phone-home-button"></div>
                <div class="tablet-home-button"></div>
                <div class="screen-stand">
                    <div class="leg"></div>
                    <div class="foot"></div>
                </div>
                <div class="display">
                    <div class="slide1"><div>Works on <em>desktops</em></div></div>
                    <div class="slide2"><div>Works on <em>tablets</em></div></div>
                    <div class="slide3"><div>Works on <em>phones</em></div></div>
                </div>
            </div>
        </div>
        <script>
            var duration = 7000, steps = 3, step = 1;
            setInterval( function() {
                document.querySelector( '.animation' ).setAttribute( 'data-animation-step'
                                   , step = ++step > steps ? 1 : step );
            }, duration / steps );
        </script>
    </body>
</html>

style.css

html, body {
    margin: 10px;
    font-family: helvetica sans-serif; 
}
.animation {
  position: relative;
  display: inline-block;
  width: 460px;
  height: 377px;
  margin: 0 auto;
}
.animation .device {
  position: absolute;   
  width: 100%;
  height: 100%;
  background: #111;
  -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animation .device .display {
  position: relative;   
  width: 100%;
  height: 100%;
  /*隐藏溢出*/
  overflow: hidden;
}
.animation .device .display div {
  position: absolute;   
  width: 100%;
  height: 100%;
  /*这里初始设置为left:100%; 之后切换的时候变成 left: -100%; 就会有从右到左过渡的效果*/
  left: 100%;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.animation .device .display div div {
  position: absolute;
  width: 100%;
  color: #fff;
  top: 50%;
  /*文字还是要显示的*/
  left: 0;
  margin-top: -14px;
  /*1.1em表示当前字体的 1.1倍大小，例如当前字体如果为10px的话，1.1em就是 11px*/
  font-size: 1.1em;
  text-align: center;
}
.animation .device .display div div em {
  font-weight: bold; 
}

.animation[data-animation-step="1"] .device {
     width: 70%;
     height: 60%;
     padding: 24px;
     border-radius: 10px;
}
/*电视的支撑脚架*/
.animation[data-animation-step="1"] .device .screen-stand {
  opacity: 1;
  position: absolute;
  width: 100%;
  top: 100%;
}
.animation[data-animation-step="1"] .device .screen-stand .leg {
        position: absolute;
        width: 12px;
        height: 16px;
        left: 44%;
        margin-left: -6px;
        background: #111;
}
.animation[data-animation-step="1"] .device .screen-stand .foot {
        position: absolute;
        width: 120px;
        height: 4px;
        top: 15px;
        left: 27.5%;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        background: #111;   
}
.animation[data-animation-step="1"] .device .slide1 {
    /*移动*/
    left: 0%;
    background: #34495e;
}
.animation[data-animation-step="1"] .device .slide2 {
}
.animation[data-animation-step="1"] .device .slide3{
}





.animation[data-animation-step="2"] .device {
    width: 45%;
    height: 72%;
    padding: 24px;
    border-radius: 10px; 
}
.animation[data-animation-step="2"] .device .tablet-home-button {
    opacity: 1;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #444;
    left: 48%;
    bottom: 7px;
}
.animation[data-animation-step="2"] .device .slide1 {
    left: -100%;
}
.animation[data-animation-step="2"] .device .slide2 {
    left: 0%;
    background: #16a085;
}
.animation[data-animation-step="2"] .device .slide3{
}


.animation[data-animation-step="3"] .device {
    width: 54%;
    height: 38%;
    padding: 10px 36px;
    border-radius: 6px; }
.animation[data-animation-step="3"] .device .phone-home-button {
   opacity: 1;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #444;
   z-index: 1;
   right: 10px;
   top: 45%;
}
.animation[data-animation-step="3"] .device .slide1 {
    left: -100%;
}
.animation[data-animation-step="3"] .device .slide2 {
    left: -100%;
}
.animation[data-animation-step="3"] .device .slide3{
    left: 0%;
    background: #3498db;
}