css 02day（元素浮动布局和盒模型）

最新推荐文章于 2024-02-05 19:41:17 发布

pandaHe_Status

最新推荐文章于 2024-02-05 19:41:17 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_43321726/article/details/103784011

版权

前端专栏收录该内容

101 篇文章 2 订阅

订阅专栏

1.浮动元素会脱离网页文档，与其它元素发生重叠，但是不会与文字内容发生重叠,float标签
浮动元素重叠问题，如图：
在这里插入图片描述
1.1 盒模型方法

2. 元素浮动布局代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style type="text/css">
		.green{
			width: 100px;height: 100px;
			background-color: green;
			float: left;
		}
		.red{
			width: 200px;height: 150px;
			background-color: red;
		}
		.a{
			width: 200px;
			background-color: green;
		}
		.b{
			width: 700px;
			background-color: red;
		}
		.c{
			width: 300px;
			background-color: blue;
		}
		.a,.b,.c{
			float: left;
			height: 200px;
		}
		.hh{
			height: 360px;background: pink;
		}
		.outer{
			height: 200px;
		}
	</style>

	<body>
		<p>文字环绕效果</p>
		<div class="green"></div>
		<div class="red">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
		</div>
			
		<p>横向排版布局</p>
		<div class="outer">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
		</div>
		<div class="hh">
			
		</div>
			
	</body>
</html>

2.1 盒模型代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;/*将所有的元素边距都设置为0*/
			}
			#box{
				width: 750px;
				overflow: auto;
				margin: auto;/*居中效果*/
			}
			.item{
				width: 210px;height: 136px;
				float: left;
				margin: 20px;
			}
		</style>
	</head>
	
	<body>
		<div id="box">
			<div class="item" style="background: url(images/动漫.jpg);"></div>
			<div class="item" style="background: url(images/动漫1.jpg);"></div>
			<div class="item" style="background: url(images/竹子.jpg);"></div>
			
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;/*将所有的元素边距都设置为0*/
			}
			#box{
				width: 870px;
				overflow: auto;
				margin: auto;/*居中效果*/
			}
			.item{
				float: left;
				margin: 20px;
				border: 5px solid black;
				padding: 15px;
			}
			
		</style>
	</head>
	
	<body>
		<div id="box">
			<div class="item" >
				<img src="images/动漫.jpg" alt=""><br>
				1
			</div>
			<div class="item" >
				<img src="images/动漫1.jpg"><br>
				2
			</div>
			<div class="item">
				<img src="images/竹子.jpg"><br>
				3
			</div>
			
		</div>
	</body>
</html>