html+css笔记11

最新推荐文章于 2024-11-15 16:31:12 发布

梦灬晨

最新推荐文章于 2024-11-15 16:31:12 发布

阅读量48

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_55439219/article/details/114872886

版权

浮动特性
浮动元素会脱离标准流（脱标）
浮动元素会一行内显示并且元素顶部对其
浮动的元素会具有行内块元素的类似特性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				width: 63.125rem;
				height: 3.25rem;
				border: #C0C0C0 0.0625rem solid;
				margin: auto;
			}
			.box div{
				width: 12.5rem;
				height: 3.125rem;
				float: left;
				border: #FFFFFF 1px solid;
				background-color: darkred;
				color: white;
				font-size: 1.5rem;
				text-align: center;
				line-height: 3.125rem;
				font-family: 华文行楷;
			}
			.box2{
				width: 63.125rem;
				height: 12.5rem;
				border: #C0C0C0 0.0625rem solid;
				margin: auto;
				margin-top: 0.625rem;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>我的音乐</div>
			<div>流行音乐</div>
			<div>网络歌曲</div>
			<div>欧美音乐</div>
			<div>华语经典</div>
		</div>
		<div class="box2"></div>
	</body>
</html>