CSS属性

CSS属性

一、 CSS定位区别

1. static:默认值，设置坐标无效

2. absolute：绝对定位（参考浏览器，html)；
   特征：
   1. 脱离文档流，不占位置
   2. 默认参考浏览器零点
   3. margin+left/top

3. relative：相对定位
   特征：
   1. 占据文档流，占位置
   2. 参考自身加载页面中的位置

4. fixed：固定
   特征：
   1. 脱离文档流，不占位置
   2. 默认参考浏览器零点
   3. 元素固定在页面中不随滚动条滚动

5. sticky：黏贴定位
   特征：
   1. 脱离文档流，页面达到一定高度
   2. 效果是吸附在浏览器的顶部
   二、浮动元素父元素高度自适应（高度塌陷）
   当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
   高度塌陷的解决方法##
   hack1：给父元素添加声明overflow:hidden;(触发一个BFC)

   hack2:在浮动元素下方添加空div,并给该元素添加
   声明：div{clear:both; height:0; overflow:hidden;}
   
   hack3:万能清除浮动法
   选择符:
   after{content: “";
   clear:both;
   display:block;
   height:0;
   overflow:hidden;
   visibility:hidden;
   }
   

三、css渐变

 background: -webkit-radial-gradient(circle,red ,yellow,blue);

background: linear-gradient( to left,pink 10%,plum 40%,lightgreen);

四、css过渡
综合写法 transition：过渡属性，过渡时间，延迟时间，运动类型

   transition-property: margin-left,background-color;
   //什么属性
   transition-duration: 0.5s;
   //过渡时间
   transition-delay: 1s; 
   //延迟时间
   transition-timing-function: linear;
   //运动类型

五、css中的2d

1. 变型属性
   位移 transform：translate（）；
   旋转transform：rotate（);
   缩放transform：scale（）；
   倾斜transform：skew（）；
   
   

案例思路：
1.通过定位相互堆叠
2.初始设置为0
3.鼠标移入放大为原来的一倍
4.加上过渡

.box{
				width: 500px;
				height: 500px;
				background-color: pink;
				border: 10px solid #fff;
				margin: 50px;
				position: relative;
				/*overflow: hidden;*/
				}
			.box img{
				display: block;
                width: 500px;
				height: 500px;
				transition: 1s;
			}
			.box:hover img{
				transform: scale(0.8);
				
			}
			.txt1{
				height: 400px;
				width: 300px;
				/*background-color: plum;*/
				border-left: 3px solid black;
				border-right: 3px solid black;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform: scaleY(0);
				transition: 1s;
			}
			.txt2{
				height: 300px;
				width: 400px;
				/*background-color: plum;*/
				border-top: 3px solid black;
				border-bottom: 3px solid black;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform: scaleX(0);
				transition: 1s;
			}
			.box:hover .txt1{
				transform: scaleY(1);
			
			}
			.box:hover .txt2{
				transform: scaleX(1);
			
			}

六、css中的3d

                /*形成3d空间*/
				transform-style: preserve-3d;
				/*景深近大远小*/
				perspective:1200px;
				/*设置观察点的位置*/
				perspective-origin:right bottom ;

七、css中的动画
*综合写法 animation：名字 运动时间 速度 延迟时间 次数 ; *

.all{
				width: 380px;
				height: 500px;
				background-color: pink;
				position: relative;
			}
			.box{
				width: 180px;
				height: 300px;
				background:url(../img/QQ图片20200314115404.png) no-repeat;
				margin: 100px auto;
				animation: cartoon 1.4s  infinite step-start;
			    position: absolute;
							}
			
		    .all:hover
			{
				animation: paused;
			}	
			@keyframes cartoon{
				0%{
					background-position: 0px 0px;
				}
				14%{
					background-position:  -180px 0px;
				}
				28%{
					background-position: -360px 0px;
				}
				42%{
					background-position: -540px 0px;
				}
				56%{
					background-position: -720px 0px;
				}
				70%{
					background-position: -900px 0px;
				}
				84%{
					background-position: -1080px 0px;
				}
				100%{
					background-position: 0px 0px;
				}
			}

八、Box Shadow

.box2{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 100px auto;
				box-shadow: 3px 4px 9px 10px plum;
			}

八、css圆角

border-radius: 1个值  四个角
               2个值  左上右下  右上坐下
               3个值  左上   右上左下   右下
               4个值  左上   右下   右下   左下