2021.4.23css学习第三天

最新推荐文章于 2023-06-22 20:27:18 发布

景抓马

最新推荐文章于 2023-06-22 20:27:18 发布

阅读量71

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/JINGMaNong/article/details/116064320

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于定位的属性设置

position：设置 HTML 元素的定位方式relative

《一》 static：默认值。无特殊定位，html 元素遵循 HTML 定位规则。
语法： 选择器{position:static; }
1.静态定位按照标准流特性摆放位置，它没有边偏移。
2.静态定位在布局时很少用到。

《二》 absolute:绝对定位。脱离 HTML 默认的定位规则，使用 left ， right ， top ， bottom 等

属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。
语法：
选择器 {position: absolute ；}
特点：
1.如果没有父元素或者父元素没有定位则以浏览器为定位（Document文档）
2.如果父元素有定位（相对、绝对、固定定位）则以最近一级的有定位的父元素为参考点移动位置
3.绝对定位不再占有原来的位置（脱标）

《三》relative：相对定位。
相对定位是元素在移动位置的时候，是相对于他原来的位置来说的。不脱离 HTML 默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
语法：
选择器 {position : relative ;}
特点：
1.它是相对于自己原来的位置来移动的（移动的时候参照原来的位置）
2.当它移动后，原来的位置会继续保留，后面的盒子不会占有他原来的位置仍然以标准流的方式对待它因此，相对定位并没有脱标，它最典型的应用是给绝对定位当父级

left【左距】，right【右距】， top【上距】， bottom【下距】必须定义 position 属性值为 absolute 或者此取值方可生效。

HTML 默认的定位规则，html 元素在 HTML 文件中按照从左上角向右下角一次排列，遇见块级元素折行。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层叠设置</title>
		<style>
			#div1{
				width: 300px;
				height: 200px;
				background-color: aqua;
				position: absolute;
				left: 100px;
				top: 120px;
				z-index: 1;
			}
			#div2{
				width: 300px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				left: 150px;
				top: 160px;
				z-index: 2;
			}
			#div3{
				width: 300px;
				height: 200px;
				background-color: pink;
				position: absolute;
				left: 200px;
				top: 220px;
				z-index: 3;
			}
			#div4{
				width: 300px;
				height: 200px;
				background-color: green;
				position: absolute;
				left: 250px;
				top: 260px;
				z-index: 4;
			}
			div p{
				font-size: 20px;
			
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p align="right">1</p>
		</div >
		<div id="div2">
			<p align="right">2</p>
		</div >
		<div id="div3">
			<p align="right">3</p>
		</div>
		<div id="div4">
			<p align="right">4</p>
		</div>
	</body>
</html>

z-index：设置对象的层叠顺序较大 number 值的对象会覆盖在较小 number 值的对象之上
注意:z-index 属性的有效性与 position 属性有关。

在这里插入图片描述
**制作计算器页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算机制作</title>
		<style>
			table{
				width: 280px;
				height: 320px;
				background-color: pink;
				border: 5px solid red
			}
			span{
				
				float: right;
			}
			a{
				font-size: 15px;
				color: black;
				text-decoration: none;
			}
			#inp{
				width: 260px;
				height: 40px;
				font-size: 30px;
				text-align: right;
			}
			input[type=button]{
				width: 60px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="4">
					<img src="imgs/tubiao.PNG">
					计算器
					<span>
						<input type="button" value="-" />
						<input type="button" value="□" />
						<input type="button" value="x" />
					</span>
				</td>
			</tr>
			<tr>
				<td colspan="4">

					<a href="#">查看</a>
					<a href="#">编辑</a>
					<a href="#">帮助</a>
				</td>
			</tr>
			<tr>
				<td colspan="4"> <input  id="inp" type="text" value="0" readonly="readonly"/> </td>
			</tr>
			<tr>
				<td><input  type="button" value="1" /></td>
				<td><input  type="button" value="2" /></td>
				<td><input  type="button" value="3" /></td>
				<td><input  type="button" value="+" /></td>
			</tr>
			<tr>
				<td> <input  type="button" value="4" /> </td>
				<td> <input  type="button" value="5" /> </td>
				<td> <input  type="button" value="6" /> </td>
				<td> <input  type="button" value="-" /> </td>
			</tr>
			<tr>
				<td> <input  type="button" value="7" /> </td>
				<td> <input  type="button" value="8" /> </td>
				<td> <input  type="button" value="9" /> </td>
				<td> <input  type="button" value="*" /> </td>
			</tr>
			<tr>
				<td> <input  type="button" value="0" /> </td>
				<td> <input  type="button" value="C" /> </td>
				<td> <input  type="button" value="/" /> </td>
				<td> <input  type="button" value="=" /> </td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

景抓马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.4.23css学习第三天

关于定位的属性设置position：设置 HTML 元素的定位方式relativestatic：默认值。无特殊定位，html 元素遵循 HTML 定位规则absolute:绝对定位。脱离 HTML 默认的定位规则，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。relative：相对定位。不脱离 HTML 默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。lef
复制链接

扫一扫

专栏目录