简单布局：优先使用 Flexbox（一维）或 Grid（二维）。
复杂响应式布局：使用 Grid +媒体查询。
文本内容分栏：多列布局（column-count）
兼容旧浏览器：浮动布局 或 Flexbox 的降级方案。
CSS Grid 逐渐成为主流，支持更复杂的布局场景。

模式转换（display）

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

区块元素（block）

• 独占一行，宽度默认撑满父容器。
• 垂直方向排列，可设置宽高。
• 示例：div、p、h1等。

行内元素（inline）
水平方向依次排列，直到容器宽度不足则换行。

• 宽度和高度由内容决定，无法直接设置。
• 示例：span、img、strong等。

文档流方向

• 默认从上到下、从左到右排列。

display显示属性（display）转换
正常流中的所有内容都有一个display的属性，用作元素的默认行为方式
display属性允许我们更改默认的显示方式。
display: block;转换为区块元素（常用）
display: inline;转换为行内元素（罕见）
display: inline-block;转换为行内块元素（较少）
表单元素默认inline-block，其他元素想要转换可以：display: inline-block;

使用场景：

1. 让块级盒子一行显示。
2. 让行内盒子具备宽度高度。

注意：

1. 行内块元素中间会有空白缝隙。给父元素字号改为0可以去掉。
2. 实际开发适合于对间距要求不高的情况下可以转换。
3. 如果真的要精细布局，请使用 flex 或 grid 更合适。

浮动（float）

浮动（float）最早是做“文字环绕”效果的。可以让元素脱离文档流，向左或向右浮动，直到碰到父容器边缘或其他浮动元素。
脱离文档流：盒子上浮其他文档流（标准流）上，浮动的盒子不占位置。

浮动带来的影响：

1. 父盒子没有高度。（很多情况下不能给父亲指定高度）
2. 子元素浮动。
3. 影响其他盒子布局了。

清除浮动也可以理解为闭合浮动，简单来说，就是让浮动的元素尽量控制在父盒子内，不要影响其他盒子。
清除浮动主要有四种方式：

1. 额外标签法
   在浮动元素的最后面，新增一个块级标签，添加属性：clear: both;
2. 单伪元素清除浮动
   父元素添加伪元素，比如京东的做法

   .clearfix:after {
       visibility: hidden;
       clear: both;
       display: block;
       content: ".";
       height: 0
   }
   

3. 双伪元素清除浮动
   父元素添加双伪元素，比如小米的做法：

   .clearfix:after,.clearfix:before {
       content:" ";
       display: table
   }
   .clearfix:after {
         clear: both
   }
   

4. overflow 清除浮动，父元素添加overflow

flex布局（flex）

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

弹性盒子核心

• 父控子（亲父子）
  父盒子控制子盒子如何排列布局
  父盒子称为容器，子盒子称为项目
• 主轴和交叉轴（侧轴）
  主轴默认水平方向，交叉轴默认垂直方向，可以更改

容器（父盒子）属性

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

• 如果子元素有大小，则按照给定大小来显示。
• 如果子元素没有大小，则拉伸充满父容器。
• 若子元素总宽度超过容器宽度，默认会压缩子元素。
• 开发中发部分情况下，父容器设置display: flex;，子元素设定大小。

flex-direction定义主轴方向（改变主轴方向）

flex-wrap控制是否换行

justify-content定义主轴上的对齐方式

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

项目（子盒子）属性

子元素的属性用于控制自身的尺寸、顺序或对齐方式。
语法：flex: 1; 剩余空间占1份，并且可以伸缩盒子大小
数字表示剩余空间所占份数，正整数

gap间距
gap简写属性用于设置行与列之间的间隙（间距）
使用场景：让子元素之间保留间隙
语法：
gap: 20px; 行和列之间保持20像素间距。
gap: 20px 30px; 行间距是20像素，列间距是30像素。
注意：gap是写到父元素（容器身上）

垂直对齐-解决图片底部空白缝隙问题（vertical）
基线：浏览器行内元素（行内块元素）排版中存在用于对齐的基线（baseline）
图片默认和文字基线对齐

解决方案：

• 把图片转换为块级元素。
• 设置图片对齐方式不是基线对齐即可。

  img {
        vertical-aligh: top;
  }
  

grid布局（grid）

1.多行或响应式用grid

CSS Grid Layout 网格布局是一种二维布局模型，允许开发者通过定义行（rows）和列（columns）来精确控制网页元素的位置和尺寸。还可以实现响应式设计。
弹性布局 flex：一维布局，只能在单一方向（水平或垂直）上排列元素，适合线性排列的场景。
网格布局 grid：二维布局，可以同时控制行和列的排列，实现真正的二维布局。

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

1. Flexbox：适合快速实现一维布局、动态内容对齐。比如单行布局
2. Grid：适合构建复杂页面框架，提供更强大的二维控制能力。比如多列或者响应式等

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

2.网格容器

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

3.网格轨道（grid-template-columns、grid-template-rows）

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

绘制网格：（网格轨道）
grid-template-columns定义网格中的列
grid-template-rows定义网格中的行

属性值：

• 有几个属性值代表创建几列/行
• 长度单位 比如100px

/* 定义三列，每列宽度为 200px */
grid-template-columns: 200px 200px 200px;
/* 定义三行，每行高度为 200px */
grid-template-rows: 200px 200px 200px;

repeat函数
语法：repeat(次数, 轨道尺寸) 或 reapeat(自动填充, 轨道尺寸)
自动填充：适用于响应式布局中“列数随容器宽度变化”的场景。
auto-fill尽可能多地创建列
auto-fit尽可能拉伸列填满容器（会合并空白，列宽不小于 minmax 的最小值）

区别：当容器空间远远大于所有子元素大小

• auto-fill 留有空白空间
• auto-fit 会拉伸盒子，至占满父容器空间

minmax函数
语法：minmax(最小值, 最大值) 示例：minmax(200px, 1fr)

4.网格轨道-对齐方式（justify-content、align-content）

justify-content是控制列轨道（Column Tracks）在容器内水平分布
align-content是控制行轨道（Row Tracks）在容器内水平分布

5.网格间距（gap）

gap简写属性用于设置行与列之间的间隙（网格间距）
使用场景：让元素之间保留间隙
语法：
gap: 20px; 行和列之间保持20像素间距。
gap: 20px 30px; 行间距是20像素，列间距是30像素。

注意：gap是简写形式也可以分开写
column-gap: 30px;
row-gap: 20px;

6.网格线

网格线会在使用网格布局时被创建。
使用场景：实现元素跨越多个网格单元。如b站首页的视频分栏，首个视频占更大的网格位置
线编号从1开始计算，3列就会有4根线

如何实现元素跨越多个网格单元？

实现语法1：

1. 跨列：grid-column: 开始线编号/结束线编号;
2. 跨行：grid-row: 开始线编号/结束线编号;

实现语法2：

1. 跨列：grid-column: 开始线编号 / span 跨单元格数量;
2. 跨行：grid-row: 开始线编号 / span 跨单元格数量;

注意：该属性要加到项目（子元素）身上

7.网格填充方式（grid-auto-flow）

grid-auto-flow决定网格容器中子元素排列填充方式

语法：
grid-auto-flow: row;（默认）子元素按先行后列的顺序填充，优先填满一行后换行
grid-auto-flow: column;子元素按先列后行的顺序填充，优先填满一列后换列

8.项目对齐方式（justify-items、aligh-items）

在CSS Grid布局中，控制元素在网格内的对齐方式。
场景：元素在网格内对齐。
注意：给父容器添加。

语法：
justify-items: 水平对齐方式;水平方向（行轴）
aligh-items: 垂直对齐方式;垂直方向（列轴）
place-items: 水平+垂直方式;
为了提高可读性和兼容性，提倡使用前面两种方式。

9.网格布局-总结

1. 创建网格轨道
   创建网格：display: grid;
   创建列轨道：grid-template-columns: 200px 200px 200px;
   创建行轨道：grid-template-rows: 200px 200px 200px;
   列轨道两端对齐：justify-content: space-betwteen;
   行轨道两端对齐：aligh-content: space-betwteen;
2. 项目对齐方式
3. gap网格间隙
4. grid-auto-flow自动填充grid-auto-flow: row;（默认）
5. 响应式布局
   核心代码：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

定位布局（position）

CSS定位布局（position）是控制元素在页面中位置的核心技术之一。通过定位，可以实现元素脱离文档流、层叠、固定在特定位置布局效果（定位跟位置有关）

场景：

• 固定导航栏。页面滚动时导航栏始终固定在视口顶部。
• 吸顶效果。元素在滚动到某个位置后固定。
• 弹出菜单/下拉框。鼠标悬停时显示浮动菜单。
• 悬浮效果。元素悬浮在其他元素上方。

相对定位
CSS相对定位position: relative是布局中常用的定位方式，其核心在于元素相对于自身正常位置进行偏移。
场景：和绝对定位搭配使用。主要作用是给绝对定位当爹的。

语法：position: relavite;

• 相对于自身原来位置移动距离。
• 不脱离正常流，元素原位置仍被保留，其他元素按原布局排列。
• 可以通过top、bottom、left、right属性进行偏移。
• 优先级：若同时设置top和bottom，仅top生效；同理left覆盖right。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    /* 相对定位 */
    position: relative;
    /* 上移 50px */
    top: 50px;
    /* 左移 50px */
    left: 50px;
}

绝对定位
CSS绝对定位position: absolute核心是脱离正常流并基于定位基准进行偏移。

语法：position: absolute;

• 元素脱离正常流，不占据空间，其他元素按原布局排列
• 相对于最近的已定位祖先元素（position 非 static）移动位置。若都无定位则相对于视口来定位。
• 可以通过top、bottom、left、right属性进行偏移。
• 优先级：若同时设置top和bottom，仅top生效；同理left覆盖right。

定位-子绝父相

场景：

• 弹出菜单/下拉框。鼠标悬停时显示浮动菜单。
• 悬浮效果。元素悬浮在其他元素上方。

小技巧：

轮播图小圆片（带渐变或层次的效果）：

如果用边框，会比较麻烦：

• 边框要增大，需要修改盒子模型为box-sizing: content-box;
• 盒子变大，会影响后面小圆点的排列

如果用阴影，更简单：
阴影不占位置，所以不会增加盒子大小，从而不影响布局。

/* 鼠标经过利用阴影实现边框效果 */
.circle li:hover {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    background-color: #fff;
}

定位的盒子垂直居中：
轮播图左右按键，使用绝对定位：top: 50%;，往上走盒子自身高度的一半：margin-top: -?px;
添加滚动效果

/* 横向 */
overflow-x: scroll;
/* 隐藏滚动条 */
scrollbar-width: none;
/* 隐藏 WebKit 浏览器（Chrome/Safari）的滚动条 */
.scroll-container::-webkit-scrollbar {
    display: none;
}

固定定位
CSS固定定位position: fixed是一种将元素 脱离文档流并始终相对于浏览器视口定位的布局技术。

场景：

• 固定导航栏。页面滚动式导航栏始终固定在视口顶部。
• 页面广告。广告覆盖整个页面。

语法：position: fixed;

• 元素脱离正常流，不占据空间，其他元素按原布局排列
• 始终相对于浏览器窗口（视口）定位，滚动页面时位置不变
• 可以通过top、bottom、left、right属性进行偏移。
• 优先级：若同时设置top和bottom，仅top生效；同理left覆盖right。

粘性定位
CSS粘性定位position: sticky是一种混合定位模式，结合了相对定位和固定定位的特性。

场景：

• 吸顶效果。元素在滚动到某个位置后固定。
• 表格表头固定。长表格滚动时表头始终可见。

语法：position: sticky;

• 元素在滚动到指定位置（如：top: 10px）前为相对定位，之后转为固定定位
• 父容器的overflow需为visible，否则粘性定位失败
• 可以通过top、bottom、left、right属性进行偏移。
• 须指定top，right，bottom或left四个其中之一，才可使粘性定位生效

定位布局-层叠顺序
z-index属性用于控制元素在三维空间中的层叠顺序。当锁哥元素在同一个平面（如同一行或列）重叠时，z-index决定哪个元素显示在最上层。

场景：

1. 提高层级悬浮效果。
2. 实现图片层叠效果。

语法：z-index: 数值;

• 值类型：整数（正数、负数、零）或auto。数值越大，层级越高
• 默认值：auto（等同于未设置，后出现的元素覆盖前者）
• 生效条件：仅对定位元素有效

定位总结

定位属性：

• positon。（static/relative/absolute/fixed/sticky）
• 偏移属性。top/right/bottom/left 控制元素偏移量
• z-index。控制层叠顺序，数值越大层级越高

常见组合：

• 固定导航栏：position: fixed + z-index
• 弹窗：position: fixed + 居中技巧 + 高z-index
• 吸顶效果：position: sticky + top

多列布局（column）

多列布局用于将元素的内容 自动分割为指定数量的垂直列

场景：

• 长文章分栏。文章自动分列，中间有间隙，也可以做响应式。
• 图片瀑布流。

注意：

底部子元素被“切断”。

原因：column-count的本质是将内容按垂直方向自动分割到多列（类似报纸排版），内容会优先填满一列后再流入下一列

解决方案：
break-inside: avoid-column;强制元素不跨列分割（默认auto，允许跨列）给子元素添加。

CSS书写顺序

合理的属性顺序应遵循 布局 > 盒模型 > 视觉交互 > 其他 的逻辑，核心目标是让代码更易读、易维护。
实际开发中可根据项目需求微调，但保持团队一致性是关键！