一、CSS布局

CSS布局是网页设计的核心技术之一，用于控制元素在页面中的排列方式。

每种技术都有它们的用途，各有优缺点，相互辅助。

l 简单布局：优先使用Flexbox(一维)或Grid(二维)。

l 复杂响应式布局：使用Grid+媒体查询。

l 文本内容分栏：多列布局(column-count)

l 兼容旧浏览器：浮动布局或Flexbox的降级方案。

l CSS Grid逐渐成为主流，支持更复杂的布局场景。

1. 正常布局流

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。也称为标准流。正常布局流是CSS布局的基石，页面大的布局基本就是利用区块元素上下罗列而成.

2. 模式转换display

模式转换 display：正常流中所有内容都有一个display的属性，用作元素默认行为方式。

display属性允许我们更改默认的显示方式

l display：block； 转换为区块元素   独占一行，可以设置宽高，默认撑满父容器

l display：inline； 转换为行内元素（罕见）   不独占一行，不可以设置宽高，默认宽度由内容决定

l display：inline-block； 转换为行内块元素（较少）     不独占一行，可以设置宽高，默认撑满父容器

使用场景：

1.让块级盒子一行显示。

2.让行内盒子具备宽度高度。 

注意： 

1.行内块元素中间会有空白缝隙。给父元素字号改为0可以去掉。

2.实际开发适合于对间距要求不高的情况下可以转换。 

3.如果真的要精细布局，请用flex或者grid更合适。 

3. 浮动float（不太重要）

浮动（float）可以让元素脱离文档流，向左或向右浮动，直到碰到父容器边缘或其他浮动元素

l float：left

l float：right

l float：none （默认不浮动）

浮动可以让元素脱离文档流，影响其他元素的布局

脱离文档流：盒子上浮其他文档流的上方，浮动的盒子不占位置   

清除浮动（闭合浮动），简单来说，就是让浮动的元素尽量控制在父盒子内，不要影响其他盒子

l 额外标签法，在浮动元素的最后面，新增一个块级标签。添加属性：clear:both;

l 单伪元素清除浮动  父元素添加伪元素

l 双伪元素清除浮动   父元素添加双伪元素

l overflow 清除浮动  父元素添加overflow：hidden；

二、flex布局

Flexbox是CSS弹性盒子布局模块（FLexible Box Layout Module）的缩写，可以快速实现元素的对齐，分布和空间分配

核心：

父控子（亲父子）

l 父盒子控制子盒子如何排列布局

l 父盒子称为容器，子盒子称为项目

主轴和交叉轴（侧轴） 

主轴默认水平方向，交叉轴默认垂直方向，可以更改

1. 父盒子属性 

（1）display 定义元素为Flex容器

容器·（父盒子）设置display：flex可以让子盒子按照主轴方式排列

l 如果子元素有大小，则按照给定大小来显示

l 如果子元素没有大小，则高度拉伸至充满父容器，宽度按内容

l 若子元素总宽度超过容器宽度，默认会压缩子元素

（2）justify-content 定义主轴上的对齐方式（整体分布）

l justify-content：flex-start；左对齐（默认）

l justify-content：flex-end；右对齐

l justify-content：center；居中对齐

l justify-content：space-between；两端对齐   A--B--C

l justify-content：space-around；项目两层间隔相等  每个盒子左右有一个相等的距离          -A--B--C-

l justify-content：space-evenly；项目间隔均匀分布  盒子最左边和最右边以及盒子之间的距离都是一样的       --A--B--C--

（3）align-items 定义交叉轴上的对齐方式（单行时整体对齐）     

l align-items：center； 居中对齐

l align-items：flex-start；交叉轴起点对齐

l align-items：flex-end；终点对齐

l align-items：stretch；项目拉伸填充整个容器高度（需要子项目无固定高度）

（4）flex-direction 定义主轴方向（项目排列方向） 

l flex-direction：row；默认子元素沿水平主轴排列

l flex-direction：row-reverse；沿水平反向

l flex-direction：column；沿垂直主轴排列

l flex-direction：column-reverse；沿垂直主轴反向排列

（5）flex-warp 控制是否换行 

l flex-warp：nowarp；默认不换行，可能被压缩

l flex-warp：warp； 换行

l flex-warp：warp-reverse；翻转（第一行上方，第二行下方）

（6）align-content 定义多行时交叉轴上的对齐方式（仅当flex-warp：warp；且内容换行时生效）

l align-content：start；

l align-content：end；

l align-content ：space-between；两端对齐

l align-content：space-around；

l align-content：space-evenly； 

（7）gap间距

用于设置行和列之前的间隙，写在父元素身上。

l gap：20px；行和列保持20px像素间隙

l gap：20px 30px；行间距20像素。列间距30像素 

2. 子盒子属性        

控制自身的尺寸，顺序或对齐方式

l flex-grow 定义子元素剩余空间分配的放大比例

l flex-shirk 定义子元素剩余空间分配缩小比例

l flex-basis 定义项目在主轴方向的初始大小

l flex 前面三个的缩写    flex 1；=flex 1 1 0%（等比放大/收缩，初始无基准尺寸）每个小盒子占一份

l align-self 覆盖容器的align-items，单独定义某个项目交叉轴对齐方式

l order 定义项目排列顺序（数值约小约靠前） 

3. 垂直对齐

解决图片底部空白缝隙的问题

l 图片转换为块级元素

l 设置图片对齐方式不是基线对齐    vertical-align：top；

三、grid布局

网格布局是一种二维布局模型，允许开发者通过定义行和列来精确控制网页元素的位置和尺寸。

网格布局的核心： 创建好网格并放入各类元素

容器（父盒子）设置display：grid；（块级）或者display：inline-grid（行类），与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化，因为display：grid的申明只创建了一个只有一列的网格

实际开发大部分是两者混用的：

1.Flexbox:适合快速实现一维布局、动态内容对齐。比如单行布局

2.Grid:适合构建复杂页面框架，提供更强大的二维控制能力。比如多列或者响应式等

1. 网格轨道（Grid Tracks）决定了网格容器的基础布局结构，为子元素提供放置的位置 

l grid-template-columns：200px 200px 200px；定义网格中的列

l grid-template-rows：200px 200px 200px；定义网格中的行

有几个属性值代表创建几行几列，属性值可以为

l 固定长度em，px

l 百分比，容器宽度百分比

l fr单位。分配轨道剩余空间的比例

l auto由内容自动撑开

l repeat（3，1fr）函数，简化重复定义的列

l minmax（最小值，最大值）函数，定义列宽最大值和最小值

repeat()函数

语法：

repeat(次数，轨道尺寸)或repeat(自动填充，轨道尺寸)

自动填充：适用于响应式布局中“列数随容器宽度变化”的场景。

auto-fill:尽可能多地创建列。

auto-fit:尽可能拉伸列填满容器(会合并空白，列宽不小于minmax的最小值)

2. 网格轨道-对齐方式

l justify-content控制列轨道在容器内水平分布

l align-content控制行轨道在容器类水平分布

l start  end center space-around space-between space-evenly

3. gap属性用于设置行与列之间的间隙（网格间距） 

l 也可以分开写column-gap和row-gap

4. 网格线grid line 

使用网格布局时被创建，该属性加到子元素身上

使用场景：

1.实现元素跨越多个网格单元。 

实现语法1：

l 跨列：grid-column：开始线编号/结束线编号；

l 跨行：grid-row：开始线编号/结束线编号；

实现语法2：

l 跨列：grid-column：开始线编号/span跨单元格数量；

l 跨行：grid-row：开始线编号/span跨单元格数量；

5. 网格填充方式grid-auto-flow

&l