CSS学习（三）—— device-loop

最新推荐文章于 2024-04-02 22:46:07 发布

原创最新推荐文章于 2024-04-02 22:46:07 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文通过实例讲解了CSS中position:relative和position:absolute的用法，包括如何让元素脱离文档流、设置元素之间的层级关系以及如何实现元素相对于最近的已定位祖先元素进行定位。

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

这里写图片描述

不管是块级元素还是行内元素，应用了position:absolute之后，display为block：可以设置width和height, 没有设置的话，width默认为auto。设置成 position:absolute;脱离文档流，所以是“不占位”的。
设置了position:absolute;如果没有设置TRBL( top,left,bottom和left)，则默认浮动在父元素的content-box。紧接着，元素脱离文档流，由于没有设置width,所以width变成了auto
同级的元素，如果都设置了 position:absolute, 则后面的元素将会覆盖前面的元素，因为默认代码越靠后的 z-index 越大
不管是块级元素display:block还是内联元素display:inline, 应用position:absolute并且不设置TRBL，它都会默认在父级元素的content-box区浮动。原来的起点位置也是应用绝对定位后的起点位置，只不过如果应用了position:absolute的内联元素左边也有内联元素的话，它的起点位置会变得更靠前，直到紧挨左边内联元素的边界。
父元素 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;
}