Web前端基础（04）

###定位方式4+1
###position定位

静态定位(文档流定位):是元素的默认定位方式

格式:position:static
元素显示特点: 块级元素从上到下排列,行内或行内块元素从左向右排列,元素不易实现层叠效果
如何控制元素的位置: 通过外边距.

相对定位

格式:position:relative
元素显示特点: 元素不脱离文档流(元素不管显示到什么位置仍然占着原来的位置)
如何控制元素的位置: 通过top/left/right/bottom控制元素的显示位置,坐标相对于初始位置
应用场景: 当需要移动某个元素,但移动该元素时不影响其它元素的显示效果,这时使用相对定位,如果做位置微调使用相对定位

绝对定位

格式: position:absolute
元素显示特点: 元素脱离文档流(当元素设置为绝对定位时会让出自己所占的位置)
如何控制元素的位置: 通过top/left/right/bottom控制元素位置,坐标相对于窗口(默认)或某一个上级元素(添加相对定位)
应用场景:如果移动到的位置是某个上级元素的角落使用绝对定位,如果需要往页面中添加一个元素而且不希望影响现有的显示效果(也就是不在文档流里面)使用绝对定位

固定定位

格式: position:fixed;
元素显示特点: 元素脱离文档流
如何控制位置: 通过top/left/rigth/bottom控制元素位置,坐标相对于窗口.
应用场景: 需要将元素固定在窗口的某个位置,并且不随着内容位置改变而改变

####浮动定位

格式: float:left/right;
显示特点: 元素脱离文档流,元素从当前行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
如何控制元素位置: 通过外边距
如果元素的所有子元素全部浮动,则元素自动识别的高度为0,通过给元素添加overflow:hidden解决.
应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位
###行内元素的对齐方式vertical-align
top 顶部对齐
bottom 底部对齐
middle 中间对齐
baseline 基线对齐(默认)
####布局练习步骤:

给big设置宽度1000 并通过外边距0 auto居中
第一行里的div设置宽高一个左边浮动一个右边浮动
第一行和第二行div都设置overflow:hidde
第二行里面的div设置宽高,一个左边浮动,剩下3个
右边浮动

练习

1.相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
    
    
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			div:hover{
    
    
				/* 如果是默认的静态定位,元素通过外边距
				移动其它元素会受影响 */
				/* margin: 20px 0 0 20px*/
				/* 修改成相对定位 */
				position: relative;
				top: 20px;
				left: 20px;
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>

显示效果:
在这里插入图片描述
2.绝对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
    
    
			width: 100px;
			height: 100px;
			border: 1px solid red;
			}
			#d1{
    
    
			/*设置绝对定位脱离文档流让出所占位置*/
			position: absolute;
			/* 坐标相对于窗口而非自身位置 */
			right: 0;
			bottom: 0;
			}
			#big{
    
    
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;/* 做位置参考 */
			}
			#middle{
    
    
			width: 100px;
			height: 100px;
			background-color: green;
			margin: 50px 0 0 50px;
			}
			#small{
    
    
			width: 50px;
			height: 50px;
			background-color: blue;|
			position: absolute;
			right: 0;
			top: 0;

		</style>
	</head>
	<body>
		<div id="big">
			<div id="middle">
				<div id="small">
					
				</div>
			</div>
		</div>
		<div id="d1">
		div1
		</div>
		<div id="d2">
		div2
		</div>
		<div id="d3">
		div3
		</div>
	</body>
</html>

显示效果:
在这里插入图片描述
3.绝对定位练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#i1{
    
    
				width: 100%;
			}
			#i2{
    
    
				width: 100px;
				/* 绝对定位,相对于上级div */
				position: absolute;
				right: 0;
				top: 0;
			}
			#d1{
    
    
				border: 1px solid red;
				position: relative;/* 参照物 */
			}
		</style>
	</head>
	<body>
		<h1>测试绝对定位</h1>
		<div id="d1">
			<img id="i1" src="../晚课/web01/images/back.jpg" >
			<img id="i2" src="../day01/abc/3.png" >
		</div>
	</body>
</html>

测试结果:
在这里插入图片描述
4.定位练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
    
    
				background-color: rgba(0,0,0,0.3);
				width: 280px;
				padding: 10px;
				position: relative;
			}
			input{
    
    
				/* 因为添加了内边距
				 宽度280-20*2*/
				width: 240px;
				/* 去掉自带边框 */
				border: 0;
				padding: 10px 20px;
			}
			img{
    
    
				position: absolute;
				top: 14px;
				right: 25px;
			}
			p{
    
    
				font-size:12px ;
				color: red;
				margin: 0;
			}
				
		</style>
	</head>
	<body>
		<div>
			<input type="text" placeholder="请输入您的用户名" />
			<img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" >
			<p>用户名不能为空!</p>
		</div>
	</body>
</html>

测试效果:
在这里插入图片描述
5.固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
    
    
				position: fixed;
				background-color: white;
				width: 100%;
			}
			#i1{
    
    
				margin-top:100px ;
			}
			#d2{
    
    
				width: 80px;
				height: 158px ;
				background-color: blue;
				position: fixed;
				right: 20px;
				bottom: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<h1>页面顶部内容</h1>
		</div>
		<div id="d2">	
		</div>
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
		<img src="../2.jpg" >
	</body>
</html>

显示效果:
在这里插入图片描述
滚动页面时红色框中内容不动

6.浮动定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body>div{
    
    
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			#d1{
    
    
				width: 80px;
				height: 55px;
				background-color: red;
				float: left;
			}
			#d2{
    
    
				width: 80px;
				height: 50px;
				background-color: green;
				float: left;
			}
			#d3{
    
    
				width: 80px;
				height: 50px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
		<div>
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	<body>
	</body>
</html>

显示效果:
在这里插入图片描述
7.学子商城练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
    
    
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #666;
			}
			body>div{
    
    
				width: 366px;
				height: 233px;
				background-color: #e8e8e8;
			}
			#top_div{
    
    
				height: 35px;
				background-color: #0AA1ED;
				border-radius: 2px;
			}
			#top_div>img{
    
    
				margin: 8px 0 0 10px;
			}
			#top_div>span{
    
    
				color: white;
				font-size: 16px;
				/* 位置微调使用相对定位 */
				position: relative;
				bottom: 3px;
			}
			.c1{
    
    
				/* 让div里面的内容缩进10个像素 */
				padding-left: 10px;
			}
			ul{
    
    
				list-style-type: none;
				/* 去掉无序列表自带缩进 */
				padding: 0;
				/* 因为ul里面的所有li全部浮动了,此时因为高度识别为0 会出现显示异常 
				添加以下代码解决*/
				overflow: hidden;
				margin-top: 8px;
				margin-bottom: 25px;
			}
			li{
    
    
				float: left;
				margin-right: 10px;
			}
			.c1>p{
    
    
				color: #62B5EC;
				margin-bottom: 8px;
			}
			li>a{
    
    
				color: #0AA1ED;
				text-decoration: none;
			}
			a:hover{
    
    
				color: #0a7eb8;
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<div id="top_div">
				<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png"/>
				<span>电脑,办公/1F</span>
			</div>
			<div class="c1">
				<p>电脑整机</p>
				<ul>
					<li><a href="#">笔记本</a></li>
					<li><a href="#">游戏机</a></li>
					<li><a href="#">台式机</a></li>
					<li><a href="#">一体机</a></li>
					<li><a href="#">服务器</a></li>
					<li><a href="#">联想</a></li>
				</ul>
			</div>
			<div class="c1">
				<p>电脑配件</p>
				<ul>
					<li><a href="#">CPU</a></li>
					<li><a href="#">SSD硬盘</a></li>
					<li><a href="#">显示器</a></li>
					<li><a href="#">显卡</a></li>
					<li><a href="#">组装电脑</a></li>
					<li><a href="#">机箱</a></li>
				</ul>
			</div>
			<div class="c1">
				<p>外设/游戏</p>
				<ul>
					<li><a href="#">键盘</a></li>
					<li><a href="#">鼠标</a></li>
					<li><a href="#">U盘</a></li>
					<li><a href="#">移动硬盘</a></li>
					<li><a href="#">游戏设备</a></li>
					<li><a href="#">智能单车</a></li>
				</ul>
			</div>
		 
		</div>
	</body>
</html>

显示效果:
在这里插入图片描述
8.行内对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
    
    
				width: 50px;
				/* 行内元素的水平对齐方式:top/bottom/middle/baseline(默认) */
				vertical-align: baseline;
			}
		</style>
	</head>
	<body>
		<img src="../imgs/2.jpg" />
		<input type="text" />
	</body>
</html>

显示效果:
在这里插入图片描述
9.布局练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body>div{
    
    
				width: 1000px;
				margin: 0 auto;
				background-color: #0A7EB8;
			}
			#t_left_div{
    
    
				width: 611px;
				height: 376px;
				float: left;
			}
			#t_right_div{
    
    
				width: 375px;
				height: 376px;
				float: right;
			}
			body>div>div{
    
    
				overflow: hidden;/* 解决高度为0的问题 */
				margin-bottom: 10px;/* 两行之间的间距 */
			}
			
			body>div>div>div{
    
    /* 给所有第3层的div添加背景颜色 */
				background-color: #e8e8e8;
			}
			#b_left_div{
    
    
				width: 366px;
				height: 233px;
				float: left;
			}
			.b_right_div{
    
    
					width: 198px;
					height: 233px;
					float: right;
					margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div>
			<div >
				<div id="t_left_div"></div>
				<div id="t_right_div"></div>
			</div>
			<div >
				<div id="b_left_div"></div>
				<div class="b_right_div"></div>
				<div class="b_right_div"></div>
				<div class="b_right_div"></div>
			</div>
		</div>
	</body>
</html>

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

本节所有代码:
https://download.csdn.net/download/qq_44273429/12729675
注:代码中的图片路径为我本地路径,可自行上传图片,更改图片所在路径即可,有疑惑可以问我
未完待续，，，
下一节：Web前端基础（05）

Web前端基础（04）

练习

猜你喜欢