2021-09-07

最新推荐文章于 2021-12-20 21:15:28 发布

迪曼

最新推荐文章于 2021-12-20 21:15:28 发布

阅读量62

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/qq_54010557/article/details/120160492

版权

盒模型

<style>
			#div1{
				/*内容区*/
				width: 200px;
				height: 100px;
				background-color: #32CD32 ;
				/*内边距*/
				padding: 10px;
				/*边框*/
				border-style: solid;
				border-color: #0000FF;
				border-width: 20px;
				/*外边距*/
				margin: 20px;
				outline-width: 50px;
				outline-style: dotted;
				outline-color: red; 
		}
		#div2{
			/*内容区*/
			width: 200px;
			height: 100px;
			background-color: #32CD32 ;
			/*内边距*/
			padding: 10px;
			/*边框*/
			border-style: solid;
			border-color: #0000FF;
			border-width: 20px;
			/*外边距*/
			margin: 20px;
			/*轮廓*/
			outline-width: 25px;
			outline-style: dotted;
			outline-color: green; 
		</style>
		</head>

	<body>
		<div id="div1" >
			</div>
		<div id="div2" >
			
		</div>
	</body>

效果图：
在这里插入图片描述

定位

描述：
检索对象的定位方式。

语法：

position：static | relative | absolute | fixed

默认值：static
取值：
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 top,left:对象距离正常位置的偏移量；

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性以父容器进行绝对定位。而其层叠通过z-index属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值说明。
静态定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态定位</title>
		<style>
		#id1{
		width:100px;
		height:100px;
		
		background-color: red ;
		display:inline-block;
		
		position:static;
		}
		#id2{
		width:100px;
		height:100px;
		
		background-color: green ;
		display:inline-block;
		
		position:static;
		}
		#id3{
		width:100px;
		height:100px;
		
		background-color: blue ;
		display:inline-block;
		
		position:static;
		}
		</style>
	</head>
	<body>
	<div id="id1">
	div1
	</div>
	<div id="id2">
	div1
	</div>
	<div id="id3">
	div1
	</div>
	</body>
</html>

效果图
在这里插入图片描述
相对定位
将position:static;修改为position:relative; 并加上位置即可left:200px;top: 200px;

		#id2{
		width:100px;
		height:100px;
		
		background-color: blue ;
		display:inline-block;

		position:relative;
		
		left:200px;
		top: 200px;
		}

效果图
在这里插入图片描述
绝对定位
与相对定位类似，绝对定位以父容器进行绝对定位（左上角顶点位置）
将position:static;改为position:absolute; left:100px; top:100px;

		#id2{
		width:100px;
		height:100px;
		
		background-color: green ;
		display:inline-block;
		
		position:absolute;
		left:100px;
		top:100px;
		}

效果图：
在这里插入图片描述 固定定位
修改position:static;为position: fixed;

#id2{
   width: 100px;
   height: 100px;
   
   background-color: #00FFFF;
   display: inline-block;
   
   position: fixed;
   right: 100px;
   bottom: 100px;
  }

添加滚轮

  #content{
   width: 100px;
   height: 2000px;
   
   background-color: #0000FF;
  }
  
  </style>
  
 </head>
 <body>
  <div id="content">
   内容
  </div>

效果图：在这里插入图片描述

本次的学习结束了！！！

迪曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-09-07

盒模型<style> #div1{ /*内容区*/ width: 200px; height: 100px; background-color: #32CD32 ; /*内边距*/ padding: 10px; /*边框*/ border-style: solid; border-color: #0000FF; border-width: 20px; /*外边距*/ margin: 20px;
复制链接

扫一扫