欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css定位和浮动

程序员文章站 2022-03-30 08:02:05
...

本篇文章主要写的是css中的浮动和定位布局,让刚入前端不明白布局的刻印轻松掌握这两个方面的布局,并且还有简单的万花筒代码和淘宝商品展示布局代码演示


定位:

css中常见的定位有相对和绝对定位。说到定位,就从它的属性position说起。在css中属性position的值有6个,学好这6个值,对定位就会有基本的掌握。重点通过它的属性值来介绍定位的了解。

position属性值:

  • relative:1.  相对定位,元素框相对于正常文档流发生偏移,本元素的原来的位置就会被占掉。

                     2.  在布局中的最常使用,使一个元素变成父元素,然后给自己的子元素一个absolute绝对定位,就可以让子元素相 对于父元素任意排版

  • absolute:1.  绝对定位。设置这个属性值的元素其元素框不在占有文档流。但是原来的位置不能被其他元素占有。

                       2.  常见引用,和relative结合使用,使一个元素相变成一个元素的子元素,这让他进行定位,设置排版  

  realtive和absolute两个属性值结合使用是最常用的,让子元素相对于父元素进行布局。在立体旋转,万花筒就有这种使用 

这是一个简单的万花筒效果图的代码,直接复制就可以看到效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			body{
				background-color: grey;
			}
			#wai{
				width: 200px;
				height: 600px;
        		margin: 100px auto 0;
				position: relative;//让父元素相对定位
				transform-style: preserve-3d;
				transform: rotateX(-10deg);
				perspective: 2000px;
			}
			#top{
				width: 100px;
				height: 100px;
				position: absolute;//让元素定位后变成子元素,进行布局
				transform-style: preserve-3d;
				top: 50px;
				animation: xuanzhuan 6s linear infinite;
			}
			#mon{
				width: 100px;
				height: 100px;
				position: absolute;
				transform-style: preserve-3d;
				animation: xuanzhuan 6s linear infinite;
				top: 200px;
			}
			#bottom{
				width: 100px;
				height: 100px;
				position: absolute;
				transform-style: preserve-3d;	
				animation: xuanzhuan 6s linear infinite;
				top: 350px;
			}
			
			@keyframes xuanzhuan{
				from{
					transform: rotateY(0deg);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			
			#top div{
				width: 100px;
				height: 100px;
				position: absolute;
				background-size: 100% 100%;
				transform-style: preserve-3d;
				border-radius: 10px;
				
			}
			
		
			#a1{
				background-image: url(img/1.jpg);
				transform: rotateY(0deg) translateZ(300px);
			}
			#a2{
				background-image: url(img/2.jpg);
				transform: rotateY(45deg) translateZ(300px);
			}
			#a3{
				background-image: url(img/3.jpg);
				transform: rotateY(90deg) translateZ(300px);
			}
			#a4{
				background-image: url(img/4.jpg);
				transform: rotateY(135deg) translateZ(300px);
			}
			#a5{
				background-image: url(img/5.jpg);
				transform: rotateY(180deg) translateZ(300px);
			}
			#a6{
				background-image: url(img/6.jpg);
				transform: rotateY(225deg) translateZ(300px);
			}
			
			#a7{
				background-image: url(img/7.jpg);
				transform: rotateY(270deg) translateZ(300px);
			}
			#a8{
				background-image: url(img/8.jpg);
				transform: rotateY(315deg) translateZ(300px);
			}
			
			/*#wai:hover #top #a8{
				
				transform: rotateY(315deg) translateZ(400px);
			}*/
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="top">
				<div id="a1"></div>
				<div id="a2"></div>
				<div id="a3"></div>
				<div id="a4"></div>
				<div id="a5"></div>
				<div id="a6"></div>
				<div id="a7"></div>
				<div id="a8"></div>
			</div>
			
		</div>
	</body>
</html>

  • fixed:元素框不再占有文档流位置,并且相对于视窗进行定位

  • sticky:(这是css3新增的属性值)粘性定位。最初会被当作是relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。

浮动

    1. 浮动:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性:用float属性,它的属性值有两个,为right和left两个属性值。

  • left:左浮动
  • right:右浮动

    2.使用浮动常出现的问题:

           1) 对附近的元素布局造成改变,使得布局混乱

           2)因为元素脱离了文档流,会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的,当浮动之后,父容器的高度就会坍塌。

   3.消除浮动

         使用浮动,常常就会用到消除浮动。消除浮动可以解决坍塌现象,使元素充满块

  •  消除浮动常用的三种方法:

        1.在浮动的元素后面加一个空元素,设置属性为clear:both。

           缺点:成本太高,添加了一个元素,难维护

        2.通过设置css的样式: overflow:hidden

        3. after伪类:对子元素的after伪类进行设置。

   代码示例:通过浮动布局设计淘宝商品展示:

    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.nav{
				width:1200px;
				height: 200px;
				background-color: navajowhite;
				margin: 0 auto;
				margin-bottom: 20px;
			}
			.info{
				 width: 280px;
				 height: 400px;
				 float: left;//左浮动
				 background-color: red;
				 margin-right: 20px;
				 margin-top :20px
			}
			.info_img{
				width: 280px;
				height: 280px;
				background-color: ;
				overflow: hidden;/*超出部分隐藏*/
				
			}
			.info_pri{
				width: 280px;
				height: 50px;
				background-color: greenyellow;
			}
			.info_mes{
				width: 280px;
				height: 50px;
				background-color: goldenrod;
			}
			.info_img img{
				width: 100%;
				transition: all 1s; 
			}
			.info_img img:hover{
				transform: scale(1.1);
			}
			.info_pri .span1{
				font-size: 24px;
				line-height:50px ;
				color: red;
				font-weight: bold;
			}
			.info_pri .span2{
				font-size: 14px;
				line-height:50px ;
				color: white;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
				
				<div class="info_mes"></div>
			</div>
			
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
			</div>
			
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
			</div>
			
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
			</div>
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
			</div>
			<div class="info">
				<div class="info_img">
				<img src="img/5.jpg">
			 	</div>
				
				   <div class="info_pri">
					<span class="span1">¥46.00</span>
					<span class="span2">包邮</span>
				  </div>
			</div>
			
			</div>
		</div>
	</body>
</html>

部分效果图:

css定位和浮动


           

相关标签: 定位 浮动