网页布局详解

2021-09-06

字数： 924字 | 阅读时长： 5min | 阅读量：次

前言

CSS 中 display 可配置的值可见 -> w3school。
这里主要介绍一下常见的几种布局设置。

flex 弹性布局

支持 ie10+;
以一个筛子为例，代码如下：

<!DOCTYPE html>
<html>

<head>
	<title>flex TEST</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		body {
			display: flex;
			align-items: center;
			justify-content: center;
			vertical-align: center;
			flex-wrap: wrap;
			align-content: center;
			font-family: 'Open Sans', sans-serif;

			background-color: wheat;
		}

		.box {
			margin: 16px;
			padding: 4px;

			background-color: #e7e7e7;
			width: 104px;
			height: 104px;
			object-fit: contain;

			box-shadow:
				inset 0 5px white,
				inset 0 -5px #bbb,
				inset 5px 0 #d7d7d7,
				inset -5px 0 #d7d7d7;

			border-radius: 10%;
		}

		.item {
			display: block;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			margin: 4px;

			color: #d7d7d7;
			text-align: center;
			background-color: #333;
			box-shadow: inset 0 3px #111, inset 0 -3px #555;
		}


		.box {
			display: flex;
		}

		.first {
			justify-content: center;
			align-items: center;
		}

		.second {
			justify-content: space-between;
			align-items: flex-start;
		}

		.second .item:nth-child(2) {
			align-self: flex-end;
		}

		.third {
			justify-content: space-between;
			align-items: flex-start;
		}

		.third .item:nth-child(2) {
			align-self: center;
		}

		.third .item:nth-child(3) {
			align-self: flex-end;
		}

		.fourth,
		.fifth,
		.sixth {
			flex-direction: column;
			justify-content: space-between;
		}

		.fourth .column,
		.fifth .column,
		.sixth .column {
			display: flex;
			flex-direction: row;
			align-content: space-between;
			justify-content: space-between;
		}

		.fifth .column:nth-child(2) {
			justify-content: center;
		}
	</style>
</head>

<body>
	<!-- 
		* * *
		* 1 *
		* * *
	 -->
	<div class="box first">
		<div class="item">1</div>
	</div>
	<!-- 
		1
		  *
		    2
	 -->
	<div class="box second">
		<div class="item">1</div>
		<div class="item">2</div>
	</div>
	<!-- 
		1
		  2
		    3
	 -->
	<div class="box third">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	<!-- 
		1 2
		3 4
		两层需要加div外层
	 -->
	<div class="box fourth">
		<div class="column">
			<div class="item">1</div>
			<div class="item">2</div>
		</div>
		<div class="column">
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
	</div>
	<!-- 
		1     2
		   3
		4     5
	 -->
	<div class="box fifth">
		<div class="column">
			<div class="item">1</div>
			<div class="item">2</div>
		</div>
		<div class="column">
			<div class="item">3</div>
		</div>
		<div class="column">
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</div>
	<!-- 
		1   2
		3   4
		5   6
	 -->
	<div class="box sixth">
		<div class="column">
			<div class="item">1</div>
			<div class="item">2</div>
		</div>
		<div class="column">
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		<div class="column">
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</div>
</body>

</html>

效果图如下：

flex 布局分为伸缩容器和伸缩项目。
外围的盒子【伸缩容器】设置 display: flex; , 指定 flex-direction: row | column; 来设置排列的横纵
通过 justify-content 、align-items 来设置内部项【伸缩项目】的属性
内部项【伸缩项目】设置 align-self 属性

grid 栅格化布局

grid 分为网格容器和网格布局。
本人还没搞清楚，请查看阮一峰的CSS Grid 网格布局教程和张鑫旭的写给自己看的display: grid布局教程

float & postion 定位

通过设置 float: left | right; 元素浮动，脱离文档流来设置布局
postion 的相对和绝对定位来设置元素的位置

table 表格布局

通过 table 标签布局