html浮动

Y2076205436

于 2024-05-09 22:55:03 发布

阅读量117

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Y2076205436/article/details/138635409

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style>
			.box {
				border: 1px solid red;
				width: 200px;
				height: 300px;
				float: right;
				/* 浮动:让块元素在一行内显示: */
				/* float: right;(右浮动)/left(左浮动) */
				/* 浮动的特性:
				1.脱离标准流:脱标;
				2.一行内显示并且顶端对齐; */
			}
			.bigbox{
				border: 2px solid gainsboro;
			}
		</style>
	</head>
	<body>
		<!-- 传统的网页布局：标准流+浮动+定位 -->
		<!-- 快速创建多个标签：标签*个数
		快速创建多个类名的标签：标签名.类名*个数
		快速创建多个类名叫BOx的div：.box*个数+tab键 -->
		<div class="bigbox">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			<div class="box">4</div>
		</div>
		
	</body>
</html>