css部分知识点

最新推荐文章于 2024-09-03 11:11:53 发布

DOVE52155

最新推荐文章于 2024-09-03 11:11:53 发布

阅读量117

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_47221942/article/details/112605588

版权

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>

DOVE52155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css部分知识点

1、transition(过滤效果)四个属性：transition-property 指定CSS属性的name，transition效果transition-duration transition效果需要指定多少秒或毫秒才能完成transition-timing-function 指定transition效果的转速曲线注：常用的值：transition-delay 定义transition效果开始的时候语法:transition: property duration timing-fu
复制链接

扫一扫