冯佳丽_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中的很多东西遗忘了，感觉很陌生，对属性也不是很熟悉，还是自己练习的太少。
评论留言