冯佳丽_20210113冯佳丽

知识点总结

1、transition(过滤效果)

四个属性:

transition-property 指定CSS属性的name,transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

注:

常用的值:

transition-delay 定义transition效果开始的时候

语法:

transition: property duration timing-function delay; 

例如:

transition:all 3s linear infinite; //全部的动画  过渡时间为3s 匀速  无限次 

2、动画

1、定义动画:

@keyframes animationName{ 
   from {}
   to {} 
}

2、使用动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

例如:

/* 定义动画 */
@keyframes fjl{
              from{
                  transform:rotateY(0deg);
              }
              to{
                  transform:rotateY(360deg);
              }
          }

/*使用动画*/
animation: fjl 20s linear infinite;

3、定位

3.1、静态定位

静态定位是每个元素获取的默认值

3.2、相对定位

相对定位与静态定位非常相似,占据在正常的文档流中,除了你仍然可以修改它的最终位置,包括让它与页面上的其他元素重叠。

给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和 right属性。

3.3、绝对定位

position:absolute; 生成绝对定位的元素,相对static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。

3.4、固定定位

fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对<html> 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

3.5、z-index

提高样式层级

注:

z-index失效的情况:

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性。

解决失效方法:

1、position:relative改为position:absolute;

2、浮动元素添加position属性(如relative,absolute等);

3、去除浮动

4、浮动——高度坍塌问题

所谓高度坍塌:

​ 父元素的高度,默认被子元素撑开,此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素,导致父元素的高度丢失,就是我们说的高度塌陷问题。

问题:

​ 父元素一旦高度塌陷,则它下边的元素会向上移动,导致整个页面的布局混乱!

案例:

想要的图:

得到却是:

原理:

在w3c标准(非IE6以下版本采用的是W3C标准)中,每一个元素会有一个隐藏的属性,即BFC(块级格式化上下文),该属性在默认情况下是关闭的。

注:

当BFC开启的时候回获得以下特性:

   1.父级元素的内外边距不会与子元素重叠
   2.开启后不会被浮动元素所覆盖
   3.开启后可以包含浮动子元素

解决方法:

1、给父元素固定宽高

​ 弊端:高度固定则不能让元素高度自适应了,不灵活 。

.box{
              width:500px ;
              height: 200px;
              border:2px solid #000 ;
              background: #fcc;
  }        

2、给父元素设置浮动,让其也脱离标准文档流

​ 弊端:这种方法方便,但是对页面的布局不是很友好,不易维护。

.box{
               width:500px ;
              border:2px solid #000 ;
              background: #fcc;
              float:left;
   }

3、给父元素overflow属性设置为hidden

​ 弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏

.box{
              width:500px ;
              border:2px solid #000 ;
              background: #fcc;
              overflow: hidden;
  }

4、在浮动元素下方添加空div,并给该元素设置以下属性:

​ 弊端:会添加很多空标记,增加结构负担,产生代码冗余 。

.空div的类名{
               clear:both; 
               height:0; 
               overflow:hidden;
           }

5、给父元素添加display:table;

​ 弊端:会改变当前元素的元素类型;

.box{
              width:500px ;
              border:2px solid #000 ;
              background: #fcc;
              display: table;
  }

6、万能清除浮动法(推荐使用!!!)

​ 在父元素中内容的最后添加一个伪元素

.box:after{
              content:"";
              clear: both;
              display: block;
              height: 0;
              overflow: hidden;
              visibility: hidden;

          }

5、css3中的3D(照片墙效果)

重要属性:

/* 呈现3d 效果 */
transform-style: preserve-3d;

典型案例(照片墙效果):

            body{
                /* 视图距离 */
                perspective: 2000px;
            }
            /* 定义动画 */
            @keyframes fjl{
                from{
                    transform:rotateY(0deg);
                }
                to{
                    transform:rotateY(360deg);
                }
            }
            .box{
                margin:0 auto;
                width: 300px;
                height: 300px;
                /* border: 1px solid black ; */
                position: relative;
                /* 呈现3d 效果 */
                transform-style: preserve-3d;
                /* 使动画开始旋转 */
                animation: fjl 20s linear infinite;
                transform:rotateX(60deg);
            }
            .box:hover{
                /* 暂停动画 */
                animation-play-state: paused;
            }
            .box>div{
                margin:150px auto;
                /* border: red 1px solid; */
                width: 300px;
                height: 300px;
                background-image: url(img/9.jpg);
                /* 图片覆盖 */
                background-size: cover;
                position: absolute;
                top: 0%;
                left: 34%;
            }
            .box>div:nth-child(1){
                transform: translateZ(450px);
            }
            
            .box>div:nth-child(2){
                transform: rotateY(60deg) translateZ(450px) ;
            }
            .box>div:nth-child(3){
                transform: rotateY(120deg) translateZ(450px);
            }
            .box>div:nth-child(4){
                transform:rotateY(180deg) translateZ(450px);
            }
            .box>div:nth-child(5){
                transform:rotateY(240deg) translateZ(450px);
            }.box>div:nth-child(6){
                transform:rotateY(300deg) translateZ(450px);
            }
            <!-- 容器 -->
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

心得体会

今天收获很多,对css3中的很多东西遗忘了,感觉很陌生,对属性也不是很熟悉,还是自己练习的太少。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1