HTML5 CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）

HTML5+CSS3学习笔记（九）

本系列更多文章，可以查看专栏 HTML+CSS学习笔记

文章目录

HTML5+CSS3学习笔记（九）
一、文档流布局
二、浮动布局
三、定位布局
四、表格布局
五、弹性布局
- 1. 弹性容器特点
- 2. 设置弹性容器属性值
- 3. 设置弹性子元素（弹性项）属性值
六、网格布局
- 1. 网格容器特点
- 2. 设置网格容器属性值
- 3. 设置网格子元素（网格项）属性值
- 4. 利用命名进行布局
结尾

一、文档流布局

块级元素自上至下垂直排列，行内元素自左至右水平排列
块级元素独占一行，行内元素不会另起一行
默认情况下，height和width决定内容区的大小；内容区、内边距和边框构成可见区域的大小；外边距决定元素的位置

更多内容可以参考本专栏博文HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】

二、浮动布局

通常，需要改变块级元素的水平方向的布局，如将多个块级元素置于同一行，可以设置float属性来实现。以下使用列表对浮动布局的用法进行说明：

<ol>
	<li>content1</li>
	<li>content2</li>
	<li>content3</li>
	<li>content4</li>
	<li>content5</li>
</ol>

在正常的文档流布局下，如下图所示:
在这里插入图片描述
设置float:left：所有列表项元素，从上至下依次向左浮动

设置float:right：所有列表项元素，从上至下依次向右浮动

三、定位布局

默认值，static
相对定位，relative
绝对定位，absolute
固定定位，fixed
粘滞定位，sticky

定位类型	脱离文档流	参照元素	层级	滚动	其它变化
相对定位（relative）	不脱离	元素 $\color{orange}{原来的位置}$	提高	跟随滚动条滚动	不会影响本身是行内元素，还是块级元素
绝对定位（absolute）	脱离	$\color{blue}{离它最近}$ 的 $\color{blue}{开启了定位}$ 的 $\color{blue}{祖先元素}$ ；若无，则默认为初始包含块	提高	跟随滚动条滚动	$\color{darkblue}{行内元素变块元素，宽度由内容撑开}$
固定定位（fixed）	脱离	$\color{green}{浏览器视口}$	提高	$\color{purple}{不会}$ 跟随滚动条滚动	$\color{darkblue}{行内元素变块元素，宽度由内容撑开}$
粘滞定位（sticky）	不脱离	$\color{red}{距离最近}$ 且 $\color{red}{可滚动}$ 的 $\color{red}{祖先元素}$ ；若无，则默认为浏览器视口	提高	跟随滚动条滚动， $\color{purple}{但会固定在指定位置}$	不会影响本身是行内元素，还是块级元素

更多内容可以参考本专栏博文HTML5+CSS3学习笔记（五）相对定位、绝对定位、固定定位、粘滞定位【附练习：轮播图】

四、表格布局

更多内容可以参考本专栏博文HTML5+CSS3学习笔记（六）字体、文本、背景、渐变、表格（含合并列、合并行表格）、表单【附练习：顶部导航条】

五、弹性布局

1. 弹性容器特点

（1）使用弹性布局，可以减少浮动的使用，避免高度塌陷的问题

display:flex 设置弹性容器，独占一行
display:inline-flex 设置行内弹性容器，不独占一行

（2）弹性容器内部的子元素都会变成弹性项（弹性子元素），并且沿着弹性容器的主轴方向排列
注：侧轴（辅轴）与主轴呈垂直关系
在这里插入图片描述

2. 设置弹性容器属性值

（1）flex-direction：设置弹性容器主轴方向

flex-deriction:row 在弹性容器中设置主轴方向：自左向右水平排列
flex-deriction:row-reverse 在弹性容器中设置主轴方向：自右向左水平排列
flex-deriction:column 在弹性容器中设置主轴方向：自上至下垂直排列
flex-deriction:column-reverse 在弹性容器中设置主轴方向：自下至上垂直排列

（2）flex-wrap：当弹性子元素沿主轴方向排列超出设置的宽度或高度时，设置是否换行

flex-wrap:nowrap 默认值，不换行
flex-wrap:wrap 沿侧轴方向换行
flex-wrap:wrap-reverse 沿侧轴相反方向换行

（3）flex-flow：同时设置 flex-direction 和 flex-wrap的简写属性，例如

flex-flow:row nowrap 默认值，主轴方向自左向右水平排序，且不换行

（4）justify-content：设置元素在弹性容器主轴（或者网格行轴）上的对齐方式

justify-content:flex-start 默认值，靠主轴起始位置对齐
justify-content:flex-end 靠主轴结束位置对齐
justify-content:center 沿主轴方向居中对齐
justify-content:space-between 将主轴方向的空白分配到两个子元素之间
justify-content:space-around 将主轴方向的空白分配到每个子元素两侧
justify-content:space-evenly 将主轴方向的空白分配到每个子元素一侧

在这里插入图片描述

更多属性值参考 Mdn justify-content

（5）align-items：设置元素在弹性容器侧轴（或者网格块轴）上的对齐方式

align-items:normal 默认值，具体效果取决于布局模式；弹性容器中，同 stretch
align-items:flex-start 弹性子元素向侧轴方向的行起点对齐
align-items:flex-end 弹性子元素向侧轴方向的行终点对齐
align-items:center 弹性子元素在侧轴方向行居中位置
align-items:stretch 弹性子元素含外边距的侧轴尺寸被拉升至行高

在这里插入图片描述
注意与 align-content 属性区分，更多属性值参考 Mdn align-items

（6）align-content：设置元素在弹性容器侧轴（或者网格块轴）上空白空间的分配

align-content:between 将侧轴方向的空白分配到两个子元素之间
align-content:around 将侧轴方向的空白分配到每个子元素两侧
align-content:evenly 将侧轴方向的空白分配到每个子元素一侧
align-content:center 将弹性子元素设置在侧轴中点

类似于 justify-content，更多属性值参考 Mdn align-content

3. 设置弹性子元素（弹性项）属性值

（1）flex-grow：规定了弹性子元素在弹性容器中分配剩余空间的相对比例

剩余空间，指弹性容器主轴方向尺寸减去所有弹性子元素主轴方向尺寸后的剩余大小
flex-grow:数值 负值无效，默认值为0，即弹性子元素不会增长来占据剩余空间

若每一个article均为默认值 flex-grow:0
若第一个article设置 flex-grow:1，第三个article设置 flex-grow:2

（2）flex-basis：指定弹性子元素在主轴方向上的初始大小，会覆盖指定的width或height属性值

主轴方向水平时，flex-basis 设置宽度
主轴方向垂直时，flex-basis 设置高度

（3）flex-shrink：当所有弹性子元素的默认宽度之和超过弹性容器尺寸，设置弹性子元素的缩放系数
在这里插入图片描述

更多关于flex-grow和flex-shrink的计算过程，可以参考文章详解flex-grow和flex-shrink

（4）flex：同时设置 flex-grow、 flex-shrink和flex-basis的简写属性
（5）align-self：设置弹性子元素在弹性容器侧轴（或者网格块轴）上的对齐方式，同 align-items

align-self:normal 默认值，具体效果取决于布局模式；弹性容器中，同 stretch
align-self:flex-start 弹性子元素向侧轴起点对齐
align-self:flex-end 弹性子元素向侧轴终点对齐
align-self:center 弹性子元素在侧轴居中
align-self:stretch 弹性子元素含外边距的侧轴尺寸被拉升至行高

（6）order：设置弹性子元素（弹性项）相对于同一弹性容器中其余弹性项目的顺序

值越小，顺序越靠前
默认值为0
仅在弹性容器中生效

六、网格布局

1. 网格容器特点

display:grid 设置网格容器，默认是单列的网格布局
display:inline-grid 设置行内网格容器，默认是单列的网格布局

2. 设置网格容器属性值

网格轨道指两条网格线之间的距离
（1）grid-template-columns：设置网格容器列轨道的个数及轨道宽度
（2）grid-template-rows：设置网格容器行轨道的个数及轨道高度

宽度或高度可以用 px、auto、fr等设置，1fr表示一份长度，总份数是所有fr数量之和
可以使用 repeat() 来重复设置，例如repeat(2,1fr 2fr)表示设置4列，列宽分别为1fr 2fr 1fr 2fr
注：总宽度若为600px，上述例子总和为6fr，则1fr代表100px

（3）grid--column-gap：设置网格列间距
（4）grid--row-gap：设置网格行间距
（5）grid-gap：是grid-row-gap和grid-column-gap的简写属性，属性值设置为grid-row-gap grid-column-gap
（6）justify-items： 设置网格容器中，网格项在行轨道中的对齐方式（水平方向）
（7）align-items： 设置网格容器中，网格项在列轨道中的对齐方式（垂直方向）
（8）justify-content： 设置网格容器中，网格项的整体对齐方式（水平方向）
（9）align-content： 设置网格容器中，网格项的整体对齐方式（垂直方向）
（10）grid-auto-flow： 设置网格容器中元素自动布局方式

row ：默认值，按行填充来排列元素
column：按列填充来排列元素
dense：若出现稍小的元素，会试图去填充前面留下的空白
属性值可以设置为row，column，dense，row dense，column dense

（11）grid-auto-rows： 指定自动行的大小

更多关于属性值的内容可以参考MDN文档

3. 设置网格子元素（网格项）属性值

（1）grid-column-start：设置网格列的起始位置
（2）grid-column-end：设置网格列的结束位置
（3）grid-column：是grid-column-start和grid-column-end的简写属性，属性值设置为grid-column-start/grid-column-end
（4）grid-row-start：设置网格行的起始位置
（5）grid-row-end：设置网格行的起始位置
（6）grid-row：是grid-row-start和grid-row-end的简写属性，属性值设置为grid-row-start/grid-row-end
（7）grid-area：是grid-column和grid-row的简写属性，属性值设置为grid-row-start/grid-column-start/grid-row-end/grid-column-end

值可以为非零整数，正整数从1开始，表示第一行上边或第一列左侧；负整数从-1开始，表示最后一行下边或最后一列右侧。
或使用span表示格数，span 3 表示3格。
（8）justify-self：单独设置某一个网格项在轨道中的对齐方式（水平方向）
（9）align-self：单独设置某一个网格项在轨道中的对齐方式（垂直方向）

4. 利用命名进行布局

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>利用命名进行布局</title>
		<style>
			.container {
				display: grid;
				border: 5px solid black;
				width: 900px;
				grid-template-columns: repeat(4, 200px);
				grid-template-rows: 100px 200px 200px 100px;
				/* 利用命名设置布局 */
				grid-template-areas:
					". hd hd ."
					"sd ma ma ma"
					"sd ma ma ma"
					"ft ft ft ft";
				/* 设置网格间隙 */
				grid-gap: 10px;
			}
			.container div {
				border: 5px solid red;
			}

			.box1 {
				grid-area: hd;
			}

			.box2 {
				grid-area: sd;
			}

			.box3 {
				grid-area: ma;
			}
			.box4 {
				grid-area: ft;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box1">头部</div>
			<div class="box2">侧边栏</div>
			<div class="box3">主要内容</div>
			<div class="box4">底部</div>
		</div>
	</body>
</html>

在这里插入图片描述

结尾

部分内容参考MDN 介绍CSS布局如有错误，欢迎评论区指正。