浮动和定位

搬砖老金牛

已于 2022-03-26 10:38:50 修改

阅读量504

点赞数

分类专栏： html和css 文章标签： html5 css

于 2022-03-25 22:15:33 首次发布

本文链接：https://blog.csdn.net/qq_48968230/article/details/123722651

版权

html和css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、浮动

设置了浮动属性的元素会向左或者向右进行移动排布

练习：

test7.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动和定位</title>
		<link rel="stylesheet" type="text/css" href="css/test7.css"/>
	</head>
	<body>	
		<!-- 浮动：设置了浮动属性的元素会向左或者向右进行移动排布 -->
		<div class="box01">
			box01
		</div>
		
		<div class="box">
			<div class="demo01">盒子1</div>
			<div class="demo02">盒子2</div>
		</div>
				
		<div class="box02">
			box02
		</div>
	</body>
</html>

test7.css

*{
	padding:0; /* 内边距 */
	margin:0;  /* 外边距 */
}

/* 浮动 */
.demo01{
	width:200px;
	height:200px;
	background-color:#4a98ef;
	float:left;  /* 左浮动 */
}

.demo02{
	width:200px;
	height:200px;
	background-color:#008000;
	float:left;  /* 左浮动 */
}

.box{
	overflow:hidden;  /* 解决高度塌陷问题 */
}
/* 高度塌陷：由于元素浮动导致 */
/* 高度塌陷只对下面的元素产生影响 */
.box01{
	width:100%;
	height:50px;
	background-color:#00ffff;
}
.box02{
	width:100%;
	height:50px;
	background-color:#0000ff;
}

运行效果：

二、定位

1、相对定位：relative：是相对于自身原来的位置进行定位的

2、绝对定位：absolute：是根据有相对定位（绝对，固定）的父元素来进行定位的

3、固定定位：fixed：参考物是浏览器窗口

实操：

test8.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<link rel="stylesheet" type="text/css" href="css/test8.css"/>
	</head>
	<body>
		<!-- 三种定位（position) -->
		<!-- 1、相对定位：relative：是相对于自身原来的位置进行定位的 -->
		
		<div class="box"></div>
		
		<!-- 2、绝对定位：absolute：是根据有相对定位（绝对，固定）的父元素来进行定位的 -->
		<div class="box66">
			<div class="box67">
				67
			</div>
		</div>
		
		<!-- 练习 -->
		<div class="demo">
			<img src="img/鹅.jpg">
			<!-- 黑块 -->
			<div class="black"></div>
		</div>
		
		
		<!-- 3、固定定位：fixed：参考物是浏览器窗口 -->
		<div class="demo02">
			
		</div>
	</body>
</html>

test8.css

*{
	padding:0;
	margin:0;
}

.box{
	width:200px;
	height:200px;
	background-color: #4A98EF;
	
	/* 相对定位 */
	position: relative;
	/* top right bottom left */
	top:50px;
	left:100px;
}

.box66{
	width:600px;
	height:400px;
	border:5px solid #ccc;
	margin:0 auto;  /* 元素左右居中 */
	position:relative;   /* 父元素相对定位 */
}

.box67{
	width:200px;
	height:200px;
	background-color:#4A98EF;
	position:absolute;     /* 子元素绝对定位 */
	top:50px;
	left:100px;
}


/* 练习 */
/* 鼠标滑过图片，图片背景色发生改变 */
.demo{   
	/* 图片大小  268*342 */
	width:268px;
	height:342px;
	position: relative; /*父级 相对定位 */
}
.black{
	width:268px;
	height:342px;
	background-color:#000;
	position: absolute;  /* 子级  绝对定位 */
	top:0;
	left:0;
	/* 透明度 opacity:0-1 (0:表示完全透明，1：表示完全不透明) */
	opacity: 0.5;
}
.demo:hover  .black{
	opacity: 0;    /* 背景色全透明 */
}

.demo02{
	width:100px;
	height:300px;
	background-color:#4A98EF;
	position: fixed;   /* 固定定位 */
	right:0;
	bottom:100px;
}

运行效果：

练习：

exam.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<link rel="stylesheet" type="text/css" href="exam.css"/>
	</head>
	<body>
		<div class="qyyf_box">
			<div class="yftx_item">
				<h3>
					研发体系
				</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>
					巨星的核心竞争力之一就是创新能力。公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成形中心，检测和实验中心等。
				</p>
				<a href="#">查看更多</a>	
			</div>
			<div class="yftx_item">
				<h3>
					研发体系
				</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>
					巨星的核心竞争力之一就是创新能力。公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成形中心，检测和实验中心等。
				</p>
				<a href="#">查看更多</a>	
			</div>
			<div class="yftx_item">
				<h3>
					研发体系
				</h3>
				<img src="img/巨星科技_03.png" alt="">
				<p>
					巨星的核心竞争力之一就是创新能力。公司目前研发部门主要有：手工具开发部、电动工具开发部、产品造型部、模具中心、加工中心、产品快速成形中心，检测和实验中心等。
				</p>
				<a href="#">查看更多</a>	
			</div>
			
		</div>
	</body>
</html>

exam.css

*{
	padding:0;
	margin:0;
}

.yftx_item{
	width:300px;
	float:left;
}

运行效果：

搬砖老金牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动和定位

一、浮动二、定位
复制链接

扫一扫

专栏目录

浮动和定位

一、浮动

二、定位

“相关推荐”对你有帮助么？