HTMLCSS小白——盒子模型，绝对定位和相对定位

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.wrapper{
			width: 100px;
			height: 100px;
			background-color: red;
			border: 10px solid green;
			padding: 100px 150px;
			padding-top: 200px;
			/*一个值是正方形*/
			/*两个值 是 上下 左右*/
			/*三个值 上 左右 下*/
			/*四个值属性是上右下左*/
		}
		.content{
			width: 100px;
			height: 100px;
			background-color: black;
			border: 10px solid blue;
			padding: 10px;
		}
		#qaq{
			width: 100px;
			height: 100px;
			padding: 0 100px;
			margin: 10px 20px 30px 40px;
			border: 1px solid black;
			background-color: orange;
			padding: 0;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="content"></div>
	</div>
	<div id="qaq"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	/*.demo{
		position: relative;
		left: 100px;
		top: 100px;
		width: 100px;
		height: 100px;
		background-color: red;
		opacity: 0.5;
		透明度
	}
	.box{
		width:150px;
		height:150px;
		background-color: green;
	}*/
	.wrapper{
		/*position: relative;*/
		
		width: 200px;
		height: 200px;
		background-color: orange;
	}
	.content{
		/*position: relative;*/
		margin-left: 100px;
		width: 100px;
		height: 100px;
		background-color: black;
	}
	.box{
		position: relative;
		left: 50px;
		width: 50px;
		height: 50px;
		background-color: yellow;
	}
	span{
		position: fixed;
		top: 50%;
		left: 50%;
		display: block;
		width: 100px;
		height: 100px;
		background-color: yellow;
		color: red;
		font-family: arial;
		margin-left: -50px;
		margin-top: -50px;
	}


	</style>
</head>
<body>
	<!-- 绝对定位absolute 
		脱离原来位置进行定位
		别人可以踩你头上
		相对于最近的有定位的父级进行定位
		如果没有相对于文档定位
	-->
	<!-- 相对记忆 relative
		保留原来位置进行定位
		原来的位置就是不给你
	    相对于自己原来的位置定位

	 -->
	 <!-- 总结 参照物使用relative 因为他保证自己位置不变
	      移动的物体使用absolute
	  -->
	  <!-- fixed 广告定位 -->
<!-- 
	<div class="demo"></div>
	<div class="box"></div> -->


	<div class="wrapper">
		<div class="content">
			<div class="box"></div>
		</div>
	</div>
	<span>欢迎关注一张平台谢谢</span>

</body>
</html>

不会java不改名

发布了82 篇原创文章 · 获赞 21 · 访问量 2010

私信关注

HTMLCSS小白——盒子模型，绝对定位和相对定位

猜你喜欢