页面布局往往会影响着整体的结构与项目的样式，通常我们用的布局方式有三种：float,flex,grid
1.float或position布局
1.1概念
首先对于一个页面来说，有浮动流，文档流，文本流这几种模式，而float布局则是脱离文档流而不脱离文本流，就是页面的元素会无视这个浮动的元素，正常布局的正常布局，只是浮动的元素会在正常的元素上方就像浮起来了。
浮动会激活元素的BFC（块级格式化上下文），使元素脱离文档流，它是一个独立的渲染区域，有自己的渲染规则，与这个区域外部的规则毫无关系
1.2实现
通过position或float来实现布局，首先使用float让其浮动，脱离文档流，就好比像有两层空间，一般写的元素的在一层，浮动的则是在另一层。position如果是绝对定位（absolute）,也会浮动起来，就需要设置left,right,top,bottom这四个属性去移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.float{
float: left;//靠左浮动
width: 100px;
height: 100px;
background-color: aqua;
}
.item{
background-color: bisque;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="float">float</div>
<div class="item"></div>
</div>
</body>
</html>
1.3优缺点
缺点：步骤繁琐，使用困难，同时浮动需要清除，不然会影响样式。同时对于布局构思能力要求很高，现在基本不会用，除非Ie浏览器。
优点：包容性强大
2.flex布局
2.1概念：
flex就是弹性盒子布局，Flex布局是CSS3新增的一种CSS布局模式，它能够让元素更加简便的布局，并支持响应式布局。它通过“容器”和“项目”两个元素进行布局，允许容器中的项目能够灵活地伸缩和排列，以适应不同的屏幕尺寸或设备。一般来说父容器，子项目，它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
1.2实现
flex布局是一维布局，所以需要设置横和竖的布局方式，用flex-direction去决定方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.container{
width: 100%;
height: 100px;
background-color: aqua;
//一般设置这三个属性就行了
display: flex;//定义为flex布局
flex-direction: row;//子元素（项目）排列方式，有row--正方向行，row-reverse--反方向行，column--正方向列，
//column-reverse--反方向列
justify-content: space-around;//有这些值： flex-start | flex-end | center |
// space-between | space-around;
}
.item{
width: 100px;
height: 100px;
border: black solid 2px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item" style="background-color: yellow;">yellow</div>
<div class="item" style="background-color: blue;">blue</div>
<div class="item" style="background-color: pink;">pink</div>
</div>
</body>
</html>
1.3相关属性
flex布局有些常用的属性：
flex-direction：定义主轴的方向（row、row-reverse、column、column-reverse）；
justify-content：定义元素在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）；
align-items：定义元素在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）；
flex-wrap：定义元素的换行方式（nowrap、wrap、wrap-reverse）；
align-content：定义多行元素在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、- >stretch）；
flex-grow：定义元素的放大比例；
flex-shrink：定义元素的缩小比例；
flex-basis：定义元素在分配多余空间之前的基准大小；
1.4优缺点
优点：
简单易用：Flex布局用起来比传统的布局方式更加方便和快捷。
布局灵活：能够实现各种方向和大小的布局，确保页面在不同设备和窗口大小下都能正常显示。
支持对齐和分布：Flex布局支持多种对齐和分布方式，可用于实现水平居中、垂直居中、顶部对齐、底部对齐等。
自适应：Flex布局可以根据不同的设备和屏幕大小来适应布局，使页面在各种不同的设备上都能正常显示。
支持动画和过渡效果：Flex布局支持动画和过渡效果，可用于实现各种动态效果。
缺点：
兼容性问题：由于Flex布局是CSS3的新特性，旧版本的浏览器可能不支持。
可读性问题：由于Flex布局使用的是大量的flex属性和值，使得代码相对较长，可读性较差
3.grid布局
3.1概念：
Grid布局是CSS中一种基于网格的布局方式，它将一个页面分成了一系列的行和列，并将网格中的内容放置在这些行和列中，可以实现更加灵活和高效的页面布局。Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，功能比flex强大，是一种二维的布局方式。
3.2实现：
和flex布局差不多，通过display:grid先实现，在根据grid-template-columns或者 grid-template-rows去设置行与列。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parallax Scrolling Demo</title>
<style>
.container{
width: 100%;
height: 100px;
display: grid;
grid-template-rows:100px 100px ;//设置每一行的宽度，其中每个数字代表这一行
grid-template-columns: 100px 100px;//设置每一列的宽度，其中每个数字代表这一列
}
.item{
border: black solid 2px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item" style="background-color: yellow;">yellow</div>
<div class="item" style="background-color: blue;">blue</div>
<div class="item" style="background-color: pink;">pink</div>
<div class="item" style="background-color: pink;">pink</div>
</div>
</body>
</html>
原本的效果和flex布局一样
3.3属性：
grid布局的属性很多，也很复杂
grid-template-columns/grid-template-rows：定义网格的列和行的数量和大小。
grid-template-areas：定义网格模板中的区域名称。
grid-template：以上两者的缩写形式。
grid-column-gap/grid-row-gap/grid-gap：定义列、行、以及列与行之间的间距。
grid-auto-columns/grid-auto-rows：定义没有列、行指定的网格单元格的大小。
grid-auto-flow：控制自动布局算法在什么方向上填充网格。
3.4 优缺点
优点：
精确的控制布局：可以通过列和行来精确控制每个子元素在布局中的位置和大小。
灵活性：可以使用媒体查询来针对不同的屏幕尺寸或方向添加或移除列或行。
可维护性：可以很容易地修改布局而不必担心其他元素的影响。
易于理解：与传统的 float、position 和 display 属性相比，Grid 布局的代码更容易理解和维护。
缺点：
兼容性：虽然 Grid 布局已成为现代浏览器的标准，但在旧版浏览器中并不支持。开发者需要使用其他方式来提供备用方案。
学习成本高：与传统的 float、position 和 display 属性相比，学习和理解 Grid 布局可能需要更长的时间和更高的学习成本。
可读性差：因为 Grid 布局使用了许多新的术语（如 grid-template-columns 和 grid-template-rows），因此初学者可能需要花更多的时间来理解和阅读代码
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
