CSS定位

CSS 专栏收录该内容
12 篇文章 2 订阅

定位:

position属性说明
static默认值,没有定位
relative相对定位
absolute绝对定位
fixed固定定位

标准文档流

标准文档流是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

一般在HTML元素分为两种:块级元素行内元素
块级元素:

块级元素是从上到下一行一行的排列,默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列。
像div,p这些的元素属于块级元素。

行内元素:

行内元素是在一行中水平布置,从左到右的排列 。span,strong等属于行内元素

static定位

position:static

元素没有定位,以标准流方式显示
样例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>position属性</title>
	<style>
		div {
		    width: 300px;
		    margin:10px;
		    padding:5px;
		    font-size:12px;
		    line-height:25px;
		}
		#father {
		    width: 500px;
		    margin: 50px auto;
		    border:1px #666 solid;
		    padding:10px;
		}
		#first {
		    background-color:#FC9;
		    border:1px #B55A00 dashed;
		}
		#second {
		    background-color:#CCF;
		    border:1px #0000A8 dashed;
		}
		#third {
		    background-color:#C5DECC;
		    border:1px #395E4F dashed;
		}
	</style>
	</head>
	<body>
	<div id="father">
	  <div id="first">第一个盒子</div>
	  <div id="second">第二个盒子</div>
	  <div id="third">第三个盒子</div>
	</div>
	</body>
	</html>

效果截图:
在这里插入图片描述

相对定位

relative属性值

相对定位就是相对自身原来位置进行偏移

偏移设置:top、left、right、bottom。

可以用left来描述盒子向右移动
可以用right来描述盒子向左的移动
可以用top来描述盒子向下的移动
可以用bottom来描述 盒子的向上的移动
如果是负数就是相反的方向

例如:left:10px 就是距离左边10px(也就是往右移动10px)

相对定位的盒子,不脱离标准流,老家保留位置,其后的元素不能占用其原有位置。
相对定位的主要用途是作为其内部元素绝对定位时的参照标准,相对于“我”而言。

样例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>relative属性</title>
	<style>
		div {
		    width: 300px;
		    margin:10px;
		    padding:5px;
		    font-size:12px;
		    line-height:25px;
		}
		#father {
		    width: 500px;
		    margin: 50px auto;
		    border:1px #666 solid;
		    padding:10px;
		}
		#first {
		    background-color:#FC9;
		    border:1px #B55A00 dashed;
		    position:relative;
		    top:10px;
		    left:150px;
		}
		#second {
		    background-color:#CCF;
		    border:1px #0000A8 dashed;
		}
		#third {
		    background-color:#C5DECC;
		    border:1px #395E4F dashed;
		}
	</style>
	</head>
	<body>
	<div id="father">
	  <div id="first">第一个盒子</div>
	  <div id="second">第二个盒子</div>
	  <div id="third">第三个盒子</div>
	</div>
	</body>
	</html>

效果截图:
在这里插入图片描述

绝对定位

absolute属性值
偏移设置: left、right、top、bottom。

使用了绝对定位的元素以它最近的一个“已经定位”的“==祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。

样例代码1:

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>absolute属性</title>
	<style>
		div {
		    width: 300px;
		    margin:10px;
		    padding:5px;
		    font-size:12px;
		    line-height:25px;
		}
		#father {
		    width: 500px;
		    margin: 50px auto;
		    border:1px #666 solid;
		    padding:10px;
		}
		#first {
		    background-color:#FC9;
		    border:1px #B55A00 dashed;
		    position: absolute;
		    top:10px;
		    right: 10px;
		}
		#second {
		    background-color:#CCF;
		    border:1px #0000A8 dashed;
		}
		#third {
		    background-color:#C5DECC;
		    border:1px #395E4F dashed;
		}
	</style>
	</head>
	<body>
	<div id="father">
	  <div id="first">第一个盒子</div>
	  <div id="second">第二个盒子</div>
	  <div id="third">第三个盒子</div>
	</div>
	</body>
	</html>

效果截图1:
在这里插入图片描述
样例代码2:

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>absolute属性</title>
	<style>
		div {
		    width: 300px;
		    margin:10px;
		    padding:5px;
		    font-size:12px;
		    line-height:25px;
		}
		#father {
		    width: 500px;
		    margin: 50px auto;
		    border:1px #666 solid;
		    padding:10px;
		    position: relative;
		}
		#first {
		    background-color:#FC9;
		    border:1px #B55A00 dashed;
		    position: absolute;
		    top:10px;
		    right: 10px;
		}
		#second {
		    background-color:#CCF;
		    border:1px #0000A8 dashed;
		}
		#third {
		    background-color:#C5DECC;
		    border:1px #395E4F dashed;
		}

	</style>
	</head>
	<body>
	<div id="father">
	  <div id="first">第一个盒子</div>
	  <div id="second">第二个盒子</div>
	  <div id="third">第三个盒子</div>
	</div>
	</body>
	</html>

效果截图2:
在这里插入图片描述

固定定位

固定定位,就是始终让一个元素固定在一个位置,不管怎么滚动页面,那个固定的元素也不会改变位置。

position: fixed;

fixed属性值
偏移设置: left、right、top、bottom。

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.d1 {
				position: fixed;
				width: 100px;
				height: 100px;
				left: 50%;
				background-color: #666666;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="d1">这是个固定在中间位置的div块</div>
		<p>Keafmd</p>
		<p>这是一句话1</p>
		<p>这是一句话2</p>
		<p>这是一句话3</p>
		<p>这是一句话4</p>
		<p>这是一句话5</p>
		<p>这是一句话6</p>
		<p>这是一句话7</p>
		<p>这是一句话8</p>
		<p>这是一句话9</p>
		<p>这是一句话10</p>
		<p>这是一句话11</p>
		<p>这是一句话12</p>
		<p>这是一句话13</p>
		<p>这是一句话14</p>
		<p>这是一句话15</p>
		<p>这是一句话16</p>
		<p>这是一句话17</p>
		<p>这是一句话18</p>
		<p>这是一句话19</p>
		<p>这是一句话20</p>

	</body>
</html>

效果截图(动图):

在这里插入图片描述

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值:整数,默认值为0 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方。

在这里插入图片描述

网页元素透明度

CSS设置元素透明度 opacity:x
x值为0~1,值越小越透明

例:opacity:0.4;

filter:alpha(opacity=x)
x值为0~100,值越小越透明

例:filter:alpha(opacity=40);

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		    .container{
		        position: relative;
		    }
		    .container div{
		        position: absolute;
		    }
		</style>
		<title></title>
	</head>
	<body>
		<div class="container">
		    <div style="background-color: #008000;z-index: 100;opacity: 0.4;">牛哄哄的柯南</div>
		    <div style="background-color: #0000ff;left: 10px;top: 10px;z-index: 50">Keafmd</div>
		    <div style="background-color: #ffff00;left: 20px;top: 20px;z-index: 10">一起加油</div>
		</div>
	</body>
</html>

效果截图:
在这里插入图片描述

圆角边框

通过设置 border-radius 属性(边框圆半径)
↓这样设置就可以让正方形的div框成为圆。

border-radius:50% ;

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.d1{
				height: 100px; 
				width: 100px;
				background-color: #6495ED;
				line-height:100px ;
				text-align: center;
				border-radius:50% ;
			}
		</style>
		<title></title>
	</head>
	<body>
		  <div class="d1">Keafmd</div>
	</body>
</html>

效果截图:
在这里插入图片描述
写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

在这里插入图片描述

加油!

共同努力!

Keafmd

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值