传统布局方式
首先介绍三种传统常见的布局方式
文档流布局
页面中元素默认是如何被方式的布局方式，主要包括两种主要的排列方式
块级布局
块级元素会占据父元素的整个宽度，默认情况下，每一个块级元素会从新的一行开始。
常见的块级元素有：
<div><p><h1>,<h2>,<h3>, etc.<ul>,<li><section>,<article>
行内布局
行内元素不会开始新的一行，只占据自身的宽度和高度，如果有多个行内元素，会并排显示，知道容器宽度不够时进行换行。
常见的行内元素有：
<span><a><strong><em><img>
行内块元素
结合了块级元素和行内元素的特性，可以像行内元素一样排列在同一行，但是可以设置宽度和高度。
<button><input>
浮动布局
float属性用于设置元素的浮动位置，可以把元素浮动到父元素左侧或右侧，让周围的内容（文本）环绕它。浮动元素脱离常规文档流，不占正常空间，其他内容围绕它。
清除浮动问题
由于会脱离文档流，会导致父容器高度塌陷的问题，采用清除浮动技术
常见的清除浮动方法
::after伪元素
css
.container::after {
content: "";
display: block;
clear: both;
}
- 使用
clear属性
在需要清除浮动的元素上使用 clear: both，通常是父元素的最后一个子元素。
html
<div class="container">
<div class="box left">Box 1</div>
<div class="box right">Box 2</div>
<div class="clear"></div>
</div>
css
.clear {
clear: both;
}
定位布局
-
static（默认值）：元素的默认定位，按文档流排列，无法使用top、right、bottom、left等属性进行调整。 -
relative：相对定位，元素相对于其正常位置进行移动。 -
absolute：绝对定位，元素相对于最近的已定位（position为relative、absolute或fixed）的祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的<html>元素进行定位。 -
fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素也保持在固定位置。 -
sticky：粘性定位，元素在正常文档流中表现为relative，当滚动到某个特定位置时，变为fixed，停留在页面的某个位置。
常见使用场景
口诀：子绝父相
sticky和fixed分别用于固定导航栏的使用，显示背景等特别的使用场景。
flex布局
Flex布局的核心是 容器（container） 和 项目（items） 。
- 容器（Flex Container） ：通过
display: flex;或display: inline-flex;定义一个Flex容器，容器内部的所有子元素都会成为Flex项目（flex items）。 - 项目（Flex Items） ：Flex容器中的直接子元素。
常见属性
display: flex; 和 display: inline-flex;
display: flex;：使元素成为Flex容器，容器内的元素将按照Flexbox布局规则进行排列。display: inline-flex;：与display: flex;类似，不同的是，它使容器变为内联元素，容器的行为像inline-block，即容器不会独占一行。
主轴（Main Axis）和交叉轴（Cross Axis）
- 主轴（Main Axis） ：是Flex容器中元素排列的主要方向。默认情况下，主轴是水平方向（从左到右），可以通过
flex-direction属性进行改变。 - 交叉轴（Cross Axis） ：与主轴垂直的方向，默认是垂直方向（从上到下）。
flex-direction
flex-direction 用于设置Flex容器的主轴方向，影响项目的排列方式。可选的值有：
row（默认值）：主轴为水平方向，元素按水平方向排列。row-reverse：主轴为水平方向，元素按水平方向反向排列。column：主轴为垂直方向，元素按垂直方向排列。column-reverse：主轴为垂直方向，元素按垂直方向反向排列。
justify-content
justify-content 用于设置主轴上（水平轴或垂直轴）项目的对齐方式，常用来设置元素在主轴上的分布。
flex-start（默认值）：元素向容器的起始位置对齐。flex-end：元素向容器的结束位置对齐。center：元素在容器中居中对齐。space-between：元素之间的间隔相等，且第一个元素和最后一个元素分别对齐到容器的起始和结束位置。space-around：元素之间的间隔相等，且每个元素的两侧间距相等。space-evenly：元素之间的间隔相等，包括容器的起始和结束位置。
align-items
align-items 用于设置交叉轴（垂直轴）上，所有项目的对齐方式。
stretch（默认值）：项目会伸展以填满容器（如果没有设置具体的高度）。flex-start：项目在交叉轴的起始位置对齐。flex-end：项目在交叉轴的结束位置对齐。center：项目在交叉轴上居中对齐。baseline：项目的基线对齐。
align-self
align-self 用于设置单个项目在交叉轴（垂直方向）上的对齐方式，覆盖 align-items 的设置。
auto（默认值）：继承父容器的align-items设置。flex-start：项目在交叉轴的起始位置对齐。flex-end：项目在交叉轴的结束位置对齐。center：项目在交叉轴上居中对齐。stretch：项目在交叉轴上拉伸以填满容器。
flex-wrap
flex-wrap 用于设置如果一行不能容纳所有项目，是否换行。
nowrap（默认值）：不换行，所有项目会排在一行内。wrap：如果有足够的空间，项目会换行排列。wrap-reverse：项目会换行并按反向顺序排列。
flex-grow, flex-shrink, flex-basis
这些属性用来控制单个Flex项目在容器中如何伸展、收缩和设置基础宽度。
flex-grow：定义项目在主轴方向上的扩展比例，默认为0（不扩展）。例如，flex-grow: 1;表示该项目会扩展，填充剩余空间。flex-shrink：定义项目在主轴方向上的收缩比例，默认为1（会收缩）。例如，flex-shrink: 0;表示该项目不会收缩。flex-basis：定义项目的初始大小（即在主轴方向上占据的空间），默认值为auto，即项目的内容大小。
flex（简写）
flex 是 flex-grow, flex-shrink 和 flex-basis 的简写。常用来快速设置这些属性。
grid布局
常见属性
display: grid;
该属性将一个元素设为网格容器，开始启用Grid布局。
grid-template-columns 和 grid-template-rows
grid-template-columns 和 grid-template-rows 用来定义网格容器的列和行。你可以使用像素（px）、百分比（%）、fr（分数单位）等单位来设置。
grid-template-columns定义了网格的列（横向）。grid-template-rows定义了网格的行（纵向）。
grid-gap（或 gap）
grid-gap（现可简写为 gap）用于设置行和列之间的间距。可以设置 row-gap（行间距）和 column-gap（列间距）来分别调整行和列的间距。
grid-template-areas
grid-template-areas 允许你通过命名区域来定义网格布局，提供了一种更加直观的方式来描述网格的结构。
grid-column 和 grid-row
grid-column 和 grid-row 用于控制网格项（子元素）在网格中的位置。
grid-column控制元素在水平方向上的位置。grid-row控制元素在垂直方向上的位置。
auto 和 fr 单位
fr（fraction）：表示剩余空间的份额。例如，1fr表示占据一个单位的剩余空间，2fr占据2个单位的剩余空间。可以让所有列或行根据内容的比例分配空间。auto：表示根据元素的内容自动分配空间。
指定分配
网格项会自动放置到网格中，但如果想要精确控制可以使用一下两个方法。
使用 grid-column 和 grid-row
css
复制代码
.item1 {
grid-column: 1 / 3; /* 跨越第1列到第3列 */
grid-row: 1 / 2; /* 跨越第1行到第2行 */
}
使用 grid-area
css
复制代码
.container {
display: grid;
grid-template-areas:
"header header header"
}
.header {
grid-area: header;
}
适合响应式布局
css
复制代码
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 默认3列布局 */
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr; /* 屏幕宽度小于768px时，调整为2列布局 */
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr; /* 屏幕宽度小于480px时，调整为单列布局 */
}
}
