现代网页布局

CSS布局

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

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

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

CSS正常布局流

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

display转换

diaplay属性允许我们更改默认的显示方式此属性。

表单元素默认inline-block，其他元素想要转换可以：display：inline-block；

使用场景：

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

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

注意：

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

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

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

浮动（已被废弃，但需了解）

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

浮动（float）可以让元素脱离文档流，影响周围元素的布局。

浮动带来的影响：

1.父盒子没有高度。（很多情况下不能给父亲指定高度）

2.子元素浮动。

3.影响其他盒子布局了。

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

弹性盒子-flex

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

弹性盒子核心：

1.父控子（亲父子）

• 父盒子控制子盒子如何排列布局
• 父盒子称为容器，子盒子称为项目

2.主轴和交叉轴（侧轴）

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

容器（父盒子）属性

display

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

• 如果子元素有大小，则按照给定大小来显示。
• 如果子元素没有大小，则拉伸充满父容器。
• 若子元素总宽度超过容器宽度，默认会压缩子元素。

开发中大部分情况下，父容器设置display：flex；，子元素设定大小。

justify-content

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

align-items

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

flex-direction

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

flex-wrap

flex-wrap控制是否换行。

align-content

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

开发中大部分情况下，该属性使用较少，大部分子元素顺序排列即可。

项目（子盒子）属性

子元素的属性用于控制自身的尺寸、顺序或对齐方式

flex

语法：

flex：1；剩余空间占1份，并且可以伸缩盒子大小。数字表示剩余空间所占份数。是正整数。（flex是将剩余空间平均分为几等份）

gap间距

gap简写属性用于设置行与列之间的间隙（间距）。

使用场景：

1.让子元素之间保留间隙

语法：

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

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

注意：gap是写到父元素（容器）身上的。

定位布局-position

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

使用场景：

1.固定导航栏。页面滚动时导航栏始终固定在视口顶部。

2.吸顶效果。元素在滚动到某个位置后固定。

3.弹出菜单/下拉框。鼠标悬停时显示浮动菜单。

4.悬浮效果。元素悬浮在其他元素上方。

……

定位分类：相对定位、绝对定位、固定定位、粘性定位

相对定位

CSS相对定位（position：relative）是布局中常用的定位方式，其核心在于元素相对于自身正常位置进行偏移。

使用场景：和绝对定位搭配使用，主要作用是给绝对定位当爹的。

语法：

position：relative； 设定元素为相对定位

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

绝对定位

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

使用场景：

1.弹出菜单/下拉框。鼠标悬停时显示浮动菜单。

2.悬浮效果。元素悬浮在其他元素上方。

语法：

position：absolute 设定元素为绝对定位

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

定位-子绝父相

固定定位

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

使用场景：

1.固定导航栏。页面滚动时导航栏始终固定在视口顶部。

2.页面广告。广告覆盖整个页面。

语法：

position：fixed； 设定元素为固定定位

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

粘性定位

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

使用场景：

1.吸顶效果。元素在滚动到某个位置后固定。

2.表格表头固定。长表格滚动时表头始终可见。

语法：

position：sticky； 设定元素为粘性定位

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

层叠顺序

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

使用场景：

1.提高层级悬浮效果。

2.实现图片层叠效果。

语法：

z-index：数值； 设定层级

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

网格布局-grid

网格布局是一种二维布局模型，允许开发者通过定义行（rows）和列（columns）来精确控制网页元素的位置和尺寸。还可以实现响应式设计。

网格容器

容器（父盒子）设置display：grid；（块级）或者display：inline-grid（行内）。

与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为display：grid的声明只创建了一个只有一列的网格。

网格轨道

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

（1）网格轨道的对齐方式

（2）绘制网格：（网格轨道）

grid-template-columns / grid-template-rows 属性值

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

使用场景：

1.让元素之间保留间隙。

语法：

gap：20px；行与列之间保持20像素间隙。

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

注意：gap是简写形式，也可以分开写

column-gap：30px；

row-gap：20px；

（4）repeat()函数

语法：repeat（次数，轨道尺寸）或repeat（自动填充，轨道尺寸）

1.固定次数：

grid-template-columns：repeat（3，1fr）；

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

• auto-fill：尽可能多地创建列。
• auto-fit：尽可能

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

1.auto-fill：留有空白空间。

2.auto-fit：会拉伸盒子占满父容器空间。

（5）minmax()函数

语法：

minmax（最小值，最大值） eg：minmax（200px，1fr）；

网格线

网格线会在使用网格布局时被创建。

使用场景：

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

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

（1）实现语法1：

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

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

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

（2）实现语法2：

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

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

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

网格填充方式

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

语法：

（1）grid-auto-flow：row；（默认）

子元素按先行后列顺序填充，优先填满一行后换行。

（2）grid-auto-flow：column；

子元素按先列后行顺序填充，优先填满一行后换行。

使用场景：

B站、蔚来布局中有些子元素是按照列方式显示。

object-fit是CSS中用于控制替换元素（如、