CSS

最新推荐文章于 2024-06-12 12:52:53 发布
最新推荐文章于 2024-06-12 12:52:53 发布
阅读量48 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性布局（display:flex；）属性详解
m0_61044901的博客
12-30 1060
弹性布局（display:flex;）属性详解
flex 布局常用属性整合
摸鱼小队
03-31 4625
语法： display：flex； 1、给父盒子添加属性，对父盒子进行描述，仅子盒子生效； 2、这个时候的盒子就是弹性盒子，有主轴和侧轴（） 3、有自己独立的布局方式 一、使用方法 父盒子添加：display：flex；（必须写） 父盒子进行布局描述即可：比如flex-wrap：wrap;，justify-content：space-around; 二、flex 布局常用属性 1.主轴方向： flex-direction 属性 取值（常用）： row： 从左到右 （默认） column： 从上到下 2. 开
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
歌谣的博客
09-03 1603
目录 一、基本概念 二、容器属性 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相关属性
A-Select °
12-22 178
css弹性布局 display:flex相关属性： 容器属性： 1.flex-direction:控制主轴是哪一根，控制主轴的方向。 属性值： row: 主轴是从左往右的x轴. row-reverse: 主轴是从右往左的x轴. column: 主轴是从上往下的y轴. column-reverse: 主轴是从下往上的y轴. ...
display:flex属性
weixin_46069849的博客
03-01 586
display:flex属性 1.flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse： 显示为行。但方向和row属性值是反的 column： 显示为列 column-reverse： 显示为列。但方向和column属性值是反的 2.flex-wrap : nowrap; ...
bootstrap.css
01-27
bootstrap的css文件
cssgrid
03-30
cssgrid
CSS钢琴
03-02
CSS钢琴
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
css--弹性盒子
张默的博客
09-06 336
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex...
Flex弹性布局（一）——三个参数
qq_47200594的博客
10-19 4003
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
display：flex属性
SiReSo的博客
03-01 1021
添加到父容器上的语法 1.display:flex; 2.flex-direction:布局的排列方向（决定了主轴） 主轴水平（显示为行）： row（默认值）：默认从左往右排 row-reverse：默认从右往左排 主轴水平（显示为列）： column：默认从上往下排 column-reverse：默认从下往上排 ...
css display：flex详解
热门推荐
weixin_42836226的博客
10-29 2万+
页面布局的时候经常需要给块级子元素居中，目前发现最方便直接的是父级元素使用display：flex属性， css display:flex 属性 6 2018.09.04 16:03:53 字数 902 阅读 151492 一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实...
day12-弹性盒子
qq_43361287的博客
11-07 145
弹性盒子flex（弹性盒子、伸缩盒子）弹性容器弹性元素弹性元素属性弹性容器上的样式flex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-self弹性元素上的样式flex-growflex-shinkflex-basisflexorder flex（弹性盒子、伸缩盒子） 是CSS中的又一个布局手段，主要用来代替浮动元素来完成页面的布局； flex可使元素只有弹性，让元素可以跟随页面的大小改变而改变； 弹性容器 要使用弹性元素必须先讲一
CSS中，设置 0.5px 会生效吗
最新发布
Keep trying, keep going
06-12 339
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值