CSS

最新推荐文章于 2022-12-30 17:06:01 发布
最新推荐文章于 2022-12-30 17:06:01 发布
阅读量56 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/120495829
版权

十、3D&动画

1. 兔斯基


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#tsj{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				width: 48px;
				height: 48px;
				background: url(img/animation.png) no-repeat;
				background-position:0 0;
				animation: move 1s steps(12,end) infinite ;
			}
			
			@keyframes move{
				from{
					background-position: 0 0;
				}
				to{
					background-position:-576px 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="tsj">
			
		</div>
	</body>
</html>

2. 开机动画（2d）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				position: relative;
				background: gray;
			}
			#wrap > .inner{
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				white-space: nowrap;
			}
			#wrap > .inner >span{
				position: relative;
				/*animation: move 1s linear infinite alternate;*/
			}
			
			@keyframes move{
				from{
					top: 0px;
				}
				to{
					top: -10px;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<span>几</span>
				<span>百</span>
				<span>斤</span>
				<span>的</span>
				<span>S</span>
				<span>Y</span>
				<span>F</span>
				<span>了</span>
				<span>上</span>
				<span>课</span>
				<span>还</span>
				<span>要</span>
				<span>装</span>
				<span>可</span>
				<span>爱</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var spanNodes = document.querySelectorAll("#wrap > .inner >span");
			var colors=["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink","#1883BA"];
			for(var i=0;i<spanNodes.length;i++){
				spanNodes[i].style.animation="move .3s "+(i*50)+"ms linear infinite alternate";
				spanNodes[i].style.color=colors[i];
			}
		}
		
		
		
	</script>
</html>

3. 开机动画（3d）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				position: relative;
				background: pink;
				perspective: 200px;
			}
			#wrap > .inner{
				height: 100%;
				position: relative;
				transform-style: preserve-3d;
			}
			@keyframes move{
				from{
					transform: translate3d(-50%,-50%,0) rotateY(0deg);
				}
				to{
					transform: translate3d(-50%,-50%,0) rotateY(360deg);
				}
			}
			
			#wrap > .inner > img{
				width: 30%;
				margin-top: -38px;
				animation: move 2s linear infinite ;
			}
			#wrap > .inner > img,#wrap > .inner > p{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0) rotateY(0deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<img src="img/load/logo2.png"  />
				<p>已加载0%</p>
			</div>
		</div>
	</body>
	<script src="js/data.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var pNode = document.querySelector("#wrap > .inner > p");
			var flag = 0;
			var arr=[];
			for(item in imgData){
				arr=arr.concat(imgData[item]);
			}
			
			for(var i=0;i<arr.length;i++){
				var img = new Image();
				//ajax请求
				img.src=arr[i];
				img.onload=function(){
					flag++;
					pNode.innerHTML="已加载"+(Math.round(flag/arr.length*100))+"%";
				}
				img.onerror=function(){
					console.log("地址有问题")
				}
			}
			
		}
	</script>
</html>

十一、flex

1. new（对比）

（1）容器
① 容器的布局方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: column;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
② 容器的排列方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row-reverse;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
③ 富裕空间管理（主轴）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row-reverse;
				 /*
				 flex-start                  富裕空间在主轴的正方向
		         flex-end                    富裕空间在主轴的反方向
		         center  	                              富裕空间在主轴的两边
		         space-between               富裕空间在项目之间
		         space-around(box 没有的)    富裕空间在项目两边
		         */
		        justify-content: space-around;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
④ 富裕空间管理（侧轴）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row-reverse;
				 /*
				 flex-start                  富裕空间在主轴的正方向
		         flex-end                    富裕空间在主轴的反方向
		         center  	                              富裕空间在主轴的两边
		         space-between               富裕空间在项目之间
		         space-around(box 没有的)    富裕空间在项目两边
		         */
		        justify-content: space-around;
		         /*
		         flex-start: 富裕空间在侧轴的正方向;
		         flex-end: 富裕空间在侧轴的反方向;
		         content: 富裕空间在侧轴的两边;
		         
		         baseline(box 没有的) 按基线对齐
		         stretch(box 没有的)	  等高布局
		         */
		        align-items: stretch;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（2）项目
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row-reverse;
				 /*
				 flex-start                  富裕空间在主轴的正方向
		         flex-end                    富裕空间在主轴的反方向
		         center  	                              富裕空间在主轴的两边
		         space-between               富裕空间在项目之间
		         space-around(box 没有的)    富裕空间在项目两边
		         */
		        justify-content: space-around;
		         /*
		         flex-start: 富裕空间在侧轴的正方向;
		         flex-end: 富裕空间在侧轴的反方向;
		         content: 富裕空间在侧轴的两边;
		         
		         baseline(box 没有的) 按基线对齐
		         stretch(box 没有的)	  等高布局
		         */
		        align-items: stretch;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				flex-grow: 1;
			}
			
			#wrap > .item:nth-child(1){
				flex-grow: 4;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

2. old（对比）

（1）容器
① 容器的布局方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:-webkit-box;
				/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
				-webkit-box-orient:vertical;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
② 容器的排列方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:-webkit-box;
				/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
				-webkit-box-orient:horizontal;
				/*-webkit-box-direction控制主轴方向*/
				-webkit-box-direction: reverse;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
③ 富裕空间管理（主轴）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:-webkit-box;
				/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
				-webkit-box-orient:horizontal;
				/*-webkit-box-direction控制主轴方向*/
				-webkit-box-direction: reverse;
				 /* 
				  start  富裕空间在右边
		          end 	  富裕空间在左边
		          center  富裕空间在两边
		          justify 富裕空间在项目之间
		         */
				-webkit-box-pack: start;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
④ 富裕空间管理（侧轴）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:-webkit-box;
				/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
				-webkit-box-orient:vertical;
				/*-webkit-box-direction控制主轴方向*/
				-webkit-box-direction: reverse;
				 /* 
				  start  富裕空间在右边（x）  下边（y）
		          end 	  富裕空间在左边	（x） 上边（y）
		          center  富裕空间在两边
		          justify 富裕空间在项目之间
		         */
				-webkit-box-pack: justify;
				 /*
				 	start  富裕空间在右边（x）  下边（y）  
          		 	end 	  富裕空间在左边	（x） 上边（y）
           		 	center 	富裕空间在两边
           		 */ 
           		 -webkit-box-align:end;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（2）项目
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:-webkit-box;
				/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
				-webkit-box-orient:vertical;
				/*-webkit-box-direction控制主轴方向*/
				-webkit-box-direction: reverse;
				 /* 
				  start  富裕空间在右边（x）  下边（y）
		          end 	  富裕空间在左边	（x） 上边（y）
		          center  富裕空间在两边
		          justify 富裕空间在项目之间
		         */
				-webkit-box-pack: justify;
				 /*
				 	start  富裕空间在右边（x）  下边（y）  
          		 	end 	  富裕空间在左边	（x） 上边（y）
           		 	center 	富裕空间在两边
           		 */ 
           		 -webkit-box-align:end;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

3. new（add）

（1）容器新增
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 100px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				/*flex-direction: row;*/
		        justify-content: flex-start;
		        align-items: flex-start;
		        /*控制侧轴的方向*/
		        /*flex-wrap: wrap-reverse;*/
		        /*多行多列时,富裕空间的管理，会把所有行、列看成一个整体*/
		        /*align-content: flex-end;*/
		        flex-flow:row  wrap-reverse;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（2）order&align-self
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				/*flex-direction: row;*/
		        justify-content: flex-start;
		        align-items: flex-start;
		        /*控制侧轴的方向*/
		        /*flex-wrap: wrap-reverse;*/
		        /*多行多列时,富裕空间的管理，会把所有行、列看成一个整体*/
		        /*align-content: flex-end;*/
		        flex-flow:row  nowrap;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
			#wrap > .item:nth-child(1){
				order: 3;
				align-self:flex-end;
			}
			#wrap > .item:nth-child(2){
				order: 1;
			}
			#wrap > .item:nth-child(3){
				order: 5;
			}
			#wrap > .item:nth-child(4){
				order: 2;
			}
			#wrap > .item:nth-child(5){
				order: 4;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（3）flex-grow&flex-basis
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
				flex-grow
				box-flex 默认值都为0
				
				
				flex-grow： 
					   可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
					   				400 - 5*50 = 150
					   				400 - 5*0  = 400
					   可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
					   				150 / 8 = 18.75
					   				400 / 8 = 50
					   每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
					   				
									50 + 18.75*4 = 125
									50 + 18.75*1 = 68.75
									
									0 + 50*4 = 200
									0 + 50 = 50
				
			*/
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row;
		        justify-content: flex-start;
		        align-items: flex-start;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				flex-grow: 1;
				flex-basis: 0;
			}
			
			#wrap > .item:nth-child(1){
				flex-grow: 4;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（4）flex-shrink
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * flex-shrink 默认值为1 只有在 flex-wrap:nowrap时才有作用
			 * 
			 * 
			 * flex-shrink：
				   每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)-->并不是
				   
				   1.计算收缩因子与基准值乘的总和  
				   2.计算收缩因数
				              收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和    
				   3.移除空间的计算
				              移除空间= 项目收缩因数 x 负溢出的空间 
				
			*/
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 100px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;
				flex-direction: row;
		        justify-content: flex-start;
		        align-items: flex-start;
			}
			#wrap > .item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
			}
			
			#wrap > .item:nth-child(1){
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
（5）flex-shrink
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 100px;
				height: 400px;
				border: 1px solid;
				display:flex;
			}
			/*
			 * flex-shrink 默认值为1 只有在 flex-wrap:nowrap时才有作用
			 * 
			 * 
			 * flex-shrink：
				   每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)-->并不是
				   			
				   				1/5 * 300 = 60；
				   				
				   				200 - 60 = 140
				   				50 - 60 = -10
				   
				   
				   
				   
				   1.计算收缩因子与基准值乘的总和  
				   		200 + 50*4 = 400
				   2.计算收缩因数
				              收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
				              1*200 / 400 = 1/2
				              1*50 / 400 = 1/8 
				   3.移除空间的计算
				              移除空间= 项目收缩因数 x 负溢出的空间 
				              1/2*300 = 150
				              1/8*300 = 37.5
				              
				              200 - 150 =50；
				              50 - 37.5 = 12.5
				
			*/
			.item{
				width: 50px;
				height: 50px;
				background: pink;
				text-align: center;
				flex-shrink: 1;
			}
			.item:nth-child(1){
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>
weixin_56706590
关注
display：flex属性
SiReSo的博客
03-01 1073
添加到父容器上的语法 1.display:flex; 2.flex-direction:布局的排列方向（决定了主轴） 主轴水平（显示为行）： row（默认值）：默认从左往右排 row-reverse：默认从右往左排 主轴水平（显示为列）： column：默认从上往下排 column-reverse：默认从下往上排 ...
display:flex相关属性
A-Select °
12-22 225
css弹性布局 display:flex相关属性： 容器属性： 1.flex-direction:控制主轴是哪一根，控制主轴的方向。 属性值： row: 主轴是从左往右的x轴. row-reverse: 主轴是从右往左的x轴. column: 主轴是从上往下的y轴. column-reverse: 主轴是从下往上的y轴. ...
display:flex属性
weixin_46069849的博客
03-01 622
display:flex属性 1.flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse： 显示为行。但方向和row属性值是反的 column： 显示为列 column-reverse： 显示为列。但方向和column属性值是反的 2.flex-wrap : nowrap; ...
CSS弹性布局
weixin_45203607的博客
04-30 8208
title: CSS弹性布局 abbrlink: 31146 date: 2020-07-22 13:09:38 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 弹性布局概念,flex-direction,flex-wrap, justify-content,align-items,align-content tags: CSS CSS-弹性布局.
display:flex;Flex布局常用的属性
iceking66的博客
09-30 1083
display:flex;Flex布局常用的属性 html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-variables-prefixer:PostCSS 插件为所有 css 自定义属性添加前缀
08-04
postcss-变量-前缀 PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 ： 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer ： npm install postcss postcss-cli postcss-...
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
歌谣的博客
09-03 1669
目录 一、基本概念 二、容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 align-content: 结合justify-content和align-items，看看在flex-direction两个不同属性值的作用下，轴心有什么不同： 三、项目属性 3.1 order属性 3.2 flex-grow属性 3.3 flex-shrink...
弹性布局（display:flex；）属性详解
最新发布
m0_61044901的博客
12-30 1133
弹性布局（display:flex;）属性详解
day12-弹性盒子
qq_43361287的博客
11-07 173
弹性盒子flex（弹性盒子、伸缩盒子）弹性容器弹性元素弹性元素属性弹性容器上的样式flex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-self弹性元素上的样式flex-growflex-shinkflex-basisflexorder flex（弹性盒子、伸缩盒子） 是CSS中的又一个布局手段，主要用来代替浮动元素来完成页面的布局； flex可使元素只有弹性，让元素可以跟随页面的大小改变而改变； 弹性容器 要使用弹性元素必须先讲一
flex 布局常用属性整合
摸鱼小队
03-31 4816
语法： display：flex； 1、给父盒子添加属性，对父盒子进行描述，仅子盒子生效； 2、这个时候的盒子就是弹性盒子，有主轴和侧轴（） 3、有自己独立的布局方式 一、使用方法 父盒子添加：display：flex；（必须写） 父盒子进行布局描述即可：比如flex-wrap：wrap;，justify-content：space-around; 二、flex 布局常用属性 1.主轴方向： flex-direction 属性 取值（常用）： row： 从左到右 （默认） column： 从上到下 2. 开
css--弹性盒子
张默的博客
09-06 387
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex...
Flex弹性布局（一）——三个参数
qq_47200594的博客
10-19 4210
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。 在使用Flex布局时要先定义该盒子为Flex布局，有两种表现方式： 第一种（直接在div上设置样式） <div style="display:flex;margin: auto;width:400px;height:6rem;border: 0.1rem solid black"> <div style="flex: 3 0 200px
CSS编程完全参考手册
资源摘要信息:"CSS完全参考手册.chm是一个包含了大量关于CSS(层叠样式表)信息的电子文档。CSS是一种用于控制网页表现和布局的样式表语言。它由W3C制定标准，是网页设计和开发中不可或缺的一部分。CSS完全参考手册....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值