[css]通过网站实例学习以最简单的方式构造三元素布局

Also_easy

已于 2023-03-09 18:07:00 修改

阅读量612

点赞数

分类专栏： css理解文章标签： css float css布局三元素布局快速开发

于 2023-03-09 18:00:37 首次发布

本文链接：https://blog.csdn.net/yiself/article/details/129423488

版权

css理解专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

二元素布局
- 纵向布局
- 横向布局
三元素布局
后言

二元素布局

在学习三元素布局之前，让我们先简单了解一下只有两个元素的布局吧
两个元素的相对关系非常简单，不是上下就是左右

纵向布局

基于标准流和块级元素的基础布局，每个div独占一行。另外如图，如果子元素添加 “margin: 0 auto;” 属性可以实现水平居中(默认body为父容器)。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:root {
				background: gray;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				background: red;
				/*margin: 0 auto;*/
			}
			.second {
				background: blue;
				/*margin: 0 auto;*/
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
	</body>
</html>

横向布局

为了解决块级元素无法横向布局的问题，float属性出现了，它可以让你的块级元素脱离标准文档流，按行排列。下图将两个div都设置了 “float: left;” 属性。
注意：此时如果父容器没有设置高度的话会出现高度坍塌，详情知识请自行搜索 “css之bfc” 。
注意2：如果只设置一个div的 “float: left;” 会造成遮盖问题（因为两个div不在一个流里了）
在这里插入图片描述
当然也可以设置一个向左、一个向右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 100vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: left;
				background: red;
			}
			.second {
				float: left;
				/*向右漂流*/
				/*float: right;*/
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
	</body>
</html>

三元素布局

b站直播布局实例

这是B站直播网站实例，可以从中发现几个三元素布局呢？下面我们将以方向来命名进行研究学习，如：左上下。

请添加图片描述

左右-下布局

在这里插入图片描述
这个布局需要引入新的属性 “clean: both;” 它的意思是，该元素左右都不能有浮动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: left;
				background: red;
			}
			.second {
				float: right;
				background: blue;
			}
			.third {
				clear: both;
				margin: auto;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

因为first块和second块占领了第一行，所以third块自动另换了一行。
在这里插入图片描述
想要b站实例效果只用再给元素添上宽度就行了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: left;
				width: 50%;
				background: red;
			}
			.second {
				float: right;
				width: 50%;
				background: blue;
			}
			.third {
				clear: both;
				width: 100%;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

在这里插入图片描述

左-上下布局

在这里插入图片描述同样，灵活利用 “clean: right;” 属性，设置第三个div的右侧不能有浮动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: left;
				background: red;
				height: 200px;
			}
			.second {
				float: right;
				background: blue;
			}
			.third {
				clear: right;
				float: right;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

在这里插入图片描述

注意：变为浮动元素后，设置 "width: 100%"只会根据父元素变化；设置 "width: auto"失效
因此只能手动设置宽度为固定值或者放弃将右侧元素设为浮动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: left;
				background: red;
				height: 200px;
			}
			.second {
				background: blue;
				width: auto;
			}
			.third {
				background: yellow;
				width: auto;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

在这里插入图片描述

这里蓝块和黄块左侧都被红块遮挡了，真实布局中记得设置margin。

上下-右布局

在这里插入图片描述显然，这里出现了更加复杂的情况，我们不仅要将上一次中的红div放到右边，还需要将剩下的div右对齐。

方案一

利用float元素超过长度自动换行的特性，将前置元素长度设置大些：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: right;
				background: red;
				height: 200px;
			}
			.second {
				float: right;
				background: blue;
				width: 200px;
			}
			.third {
				float: right;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

在这里插入图片描述

这里黄色div放到第一行会超出父容器，因此自动换行了

方案二

给div容器设置足够长，让div容器内的元素向右排列，同样需要注意阻挡问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				background: gray;
				width: 40vw;
				height: 100vh;
			}
			div {
				width: 100px;
				height: 100px;
			}
			.first {
				float: right;
				background: red;
				height: 200px;
			}
			.second {
				background: blue;
				width: 100%;
			}
			.third {
				background: yellow;
				width: 100%;
			}
			/* 给div子元素设置右对齐 */
			/* .second > * , .third > * {
				float: right;
			} */
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

在这里插入图片描述

后言

无疑，三元素布局和二元素布局就是所有布局的基础(只用二元素布局会出现非常多的div嵌套，维护困难)。当然三元素布局的实现方法也不只有利用float一种，活用margin或者relative也能实现三元素布局，但是这样后期维护会非常的困难(牵一发而动全身)。因此float也不失为一种好的快速布局方法。

在大型项目中或许使用flex布局或者grid布局有更好的可读性和易维护性。可是对于小型项目的快速开发，无疑活用float属性能增加效率并使代码更加简洁（少套几个div）。

另外虽然文中提到标准流和浮动流，但实际这两种流还是在同一层级。因为虽然标准流排布会无视浮动流的存在，但浮动流却会考虑标准流而改变布局形式。所以摆放顺序是至关重要的。