mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6
欢迎
感谢你的到来,欢迎在评论区留下你的足迹
8008 字
21 分钟
现代网页布局
2026-06-03
前端
笔记
/
CSS
/
现代网页布局
统计加载中...

现代网页布局#

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

常见布局技术#

布局技术英文名称核心特点
正常布局normal遵循浏览器默认的文档流规则
模式转换布局display通过 display 属性改变元素显示模式
弹性布局flexbox一维布局，适合灵活排列子元素
定位布局position通过定位属性精确控制元素位置
网格布局grid二维布局，适合复杂的行列结构
多列布局column实现文本或元素的多列排版

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

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

一.CSS 正常布局流#

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

区块元素（block）#

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

行内元素（inline）#

  • 水平方向依次排列，直到容器宽度不足则换行。
  • 宽度和高度由内容决定，无法直接设置。
  • 示例：span、img、strong 等。

文档流方向#

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

二.display转换#

正常流中的所有内容都有一个display的属性，用作指定元素的显示模式。
但是开发的时候，我们需要一个块级盒子一行排列，或者行内元素需要设置大小，怎么办？
display属性允许我们更改元素默认的显示模式

  • display: block;：转换为区块元素，独占一行，可设置宽高，默认宽度撑满父容器
  • display: inline;：转换为行内元素，不独占一行，不可设置宽高，默认宽度由内容决定
  • display: inline-block;：转换为行内块元素，不独占一行，可设置宽高，默认宽度由内容决定
属性值是否独占一行能否设置宽高默认宽度
block是能撑满父容器
inline否不能内容决定
inline-block否能内容决定

表单元素默认inline-block,其他元素想要转换可以: display: inline-block;

使用场景#

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

注意#

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

三.被放弃的浮动#

浮动(float)最早是做“文字环绕”效果的

浮动(float)可以让元素脱离文档流，向左或向右浮动，知道碰到父容器边缘或其他浮动元素

属性值说明
float: left;向左浮动
float: right;向右浮动

浮动带来的影响：

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

清除浮动#

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

清楚浮动主要有四种方式：

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

2.单伪元素清除浮动：父元素添加伪元素

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

3.双伪元素清除浮动：父元素添加双伪元素

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

4.overflow属性清除浮动：父元素添加overflow属性

.clearfix{
  overflow: auto;
}

四.弹性盒子#

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

弹性盒布局-display#

弹性盒子核心：

  1. 父控子（亲父子）
  • 父盒子控制子盒子如何排列布局
  • 父盒子称为容器，子盒子称为项目
  1. 主轴和交叉轴（侧轴）
  • 主轴（main axis）：默认水平方向，项目沿主轴排列
  • 交叉轴（cross axis）：默认垂直方向，项目沿交叉轴排列

alt text

容器（父盒子）属性：

属性作用示例
display定义元素为 Flex 容器.container { display: flex; }
flex-direction定义主轴方向（项目排列方向）.container { flex-direction: row; }
flex-wrap控制是否换行.container { flex-wrap: wrap; }
justify-content定义主轴上的对齐方式（整体分布）.container { justify-content: center; }
align-items定义交叉轴上的对齐方式（单行时整体对齐）.container { align-items: center; }
align-content定义多行时交叉轴上的对齐方式（仅当 flex-wrap: wrap 且内容换行时生效）.container { align-content: space-between; }

项目（子盒子）属性：

属性作用示例
order定义项目的排列顺序（默认 0，数值越小越靠前）.item { order: -1; }
flex-grow定义项目的放大比例（默认 0，即不放大）.item { flex-grow: 1; }
flex-shrink定义项目的缩小比例（默认 1，空间不足时等比缩小）.item { flex-shrink: 0; }
flex-basis定义项目在主轴方向上的初始大小（优先级高于 width/height）.item { flex-basis: 200px; }
flexflex-grow、flex-shrink、flex-basis 的简写.item { flex: 1; }
align-self覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式.item { align-self: center; }

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

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

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

弹性盒布局-主轴和交叉轴对齐#

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

属性值效果示例
flex-start左对齐（默认）子元素靠左排列
flex-end右对齐子元素靠右排列
center居中对齐子元素居中
space-between两端对齐首个子元素放置于起点，末尾元素放置于终点
space-around项目两侧间隔相等每个子元素周围分配相同的空间
space-evenly项目间隔均匀分布每个子元素之间的间隔相等

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

属性值作用描述
flex-start项目在交叉轴起点对齐（默认值）
flex-end项目在交叉轴终点对齐
center项目在交叉轴居中对齐
stretch项目拉伸填充整个容器高度（需子项目无固定高度）

弹性盒布局-改变主轴方向flex-direction#

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

属性值描述示例效果代码示例
row主轴为水平方向，项目从左至右排列（默认值）A B C.container { flex-direction: row; }
row-reverse主轴为水平方向，项目从右至左排列C B A.container { flex-direction: row-reverse; }
column主轴为垂直方向，项目从上至下排列ABC.container { flex-direction: column; }
column-reverse主轴为垂直方向，项目从下至上排列CBA.container { flex-direction: column-reverse; }

弹性盒布局-换行wrap以及多行交叉轴对齐#

flex-wrap控制是否换行

属性值排列效果
nowrap不换行，所有项目横向排列（可能会被压缩）
wrap换行，第一行在上方，第二行在下方
wrap-reverse换行，第一行在下方，第二行在上方（顺序翻转）

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

属性值效果说明
flex-start上对齐子元素在容器头部（顶部）对齐，默认排列方式
flex-end下对齐子元素在容器尾部（底部）对齐
center居中对齐子元素在容器垂直方向居中排列
space-between两端对齐子元素平均分布在容器内，首尾子元素分别贴紧容器两端（中间无空隙）
space-around两侧间隔相等每个子元素两侧的间距相等，整体间距均匀分布
space-evenly间隔均匀分布子元素及容器两端的间距完全一致，分布最均匀

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

弹性盒布局-子项目flex伸缩以及gap间隙#

子项目flex伸缩#

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

语法： flex: 1;

  • 表示该子元素占据1份剩余空间，并且可以伸缩盒子大小。
  • 数字为正整数，代表子元素在剩余空间中所占的份数。
属性作用示例
flex-grow定义子元素剩余空间分配放大比例（默认0，即不放大）.item { flex-grow: 1; }
flex-shrink定义子元素剩余空间分配缩小比例（默认1，空间不足时等比缩小，0为不缩小）.item { flex-shrink: 0; }
flex-basis定义项目在主轴方向上的初始大小（默认auto，优先级高于width/height）.item { flex-basis: 200px; }
flexflex-grow、flex-shrink、flex-basis的简写flex: 1 → 1 1 0%（等比放大/收缩，初始无基准尺寸）flex: 2 → 2 1 0%（等比放大/收缩，初始无基准尺寸）.item { flex: 1; }
align-self覆盖容器的align-items，单独定义某个项目的交叉轴对齐方式.item { align-self: center; }
order定义项目的排列顺序（默认0，数值越小越靠前）.item { order: -1; }

gap间距#

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

小总结#

容器属性（作用于父元素）#

属性取值示例（含注释）中文说明
displayflex —— 启用弹性盒布局将元素设为 Flex 容器，子元素变为 Flex 项目
flex-directionrow —— 水平从左到右（默认）row-reverse —— 水平从右到左column —— 垂直从上到下column-reverse —— 垂直从下到上定义主轴方向（即项目排列方向）
flex-wrapnowrap —— 不换行（默认）wrap —— 换行，新行在下方wrap-reverse —— 换行，新行在上方控制项目是否换行及堆叠方向
justify-contentflex-start —— 主轴起点对齐（默认）flex-end —— 主轴终点对齐center —— 主轴居中对齐space-between —— 两端对齐，中间等间距space-around —— 每个项目两侧等间距space-evenly —— 所有间距（包括边缘）完全相等定义项目在主轴上的对齐与分布方式
align-itemsstretch —— 拉伸填满交叉轴（默认，高度/宽度未设时生效）flex-start —— 交叉轴起点对齐flex-end —— 交叉轴终点对齐center —— 交叉轴居中对齐baseline —— 按文字基线对齐定义单行项目在交叉轴上的对齐方式
align-contentstretch —— 行拉伸填满剩余空间（默认）flex-start —— 多行交叉轴起点对齐flex-end —— 多行交叉轴终点对齐center —— 多行居中对齐space-between —— 行两端对齐，中间空隙均等space-around —— 行之间均匀环绕定义多行项目在交叉轴上的分布方式（仅当 flex-wrap: wrap 且有多行时生效）

项目属性（作用于子元素）#

属性取值示例（含注释）中文说明
flex-grow0 —— 不放大（默认）1、2 —— 按比例放大（如两个项目都为1，则平分剩余空间）空间有剩余时，项目的放大比例
flex-shrink1 —— 可缩小（默认）0 —— 禁止缩小2 —— 缩小比例更高空间不足时，项目的缩小比例
flex-basisauto —— 根据内容或 width/height 决定（默认）100px —— 初始主轴尺寸为100px20% —— 占主轴20%分配多余空间前，项目在主轴上的基准尺寸
flex0 1 auto —— 默认值（不放大、不缩小、基准为auto）1 —— 常用：等价于 1 1 0%（自动占满剩余空间，自适应大小）none —— 等价于 0 0 auto（固定大小，不伸缩）flex-grow、flex-shrink、flex-basis 的简写形式
align-selfauto —— 继承容器的 align-items（默认）flex-start / center / stretch 等 —— 覆盖容器设置单个项目在交叉轴上的对齐方式（可单独设置）
order0 —— 默认顺序-1 —— 排在前面2 —— 排在后面控制项目显示顺序（数值越小越靠前，可为负数）

弹性盒布局-淘宝京东多行伸缩布局#

淘宝：

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒布局-子项目flex伸缩以及gap间隙</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .w {
        width: 80%;
        margin: 20px auto;


      }
      .box {
        display: flex;
        flex-wrap: wrap;


        margin-left: -8px;
        margin-right: -8px;
      }
      .box .item {
        flex: 0 0 16.666666%;
        height: 120px;
        margin-bottom: 16px;
        /* margin-right: 16px; */
        padding: 0 8px;
      }
      .item .content{
        width: 100%;
        height: 100%;
        background-color: lightblue;
      }
      .footer{
        width: 80%;
        height: 120px;
        background-color: black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="w">
      <div class="box">
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      </div>
    </div>
    <div class="footer">
      <div class="content"></div>
    </div>
  </body>
</html>

京东：

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒布局-子项目flex伸缩以及gap间隙</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }


      .box {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        margin: 0 auto;
        border: 1px solid red;
      }
      .box .item {
        flex: 1;
        width: 80px;
        height: 120px;
        background-color: pink;


        min-width: calc(16.666666666666664% - 16px);
        max-width: calc(16.666666666666664% - 16px);


        margin: 0 8px 16px;
      }
      .footer{
        width: 80%;
        height: 120px;
        background-color: black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
      <div class="item">15</div>
      <div class="item">16</div>
    </div>


    <div class="footer">
    </div>
  </body>
</html>

这种多行多列这种布局，不是flex布局的强项， 所以我们一般会使用grid布局来实现。

弹性盒布局-瀑布流百度图片综合案例#

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" href="./瀑布流.css">
  </head>
  <body>
    <div class="box">
      <div class="column">
        <div class="a">
          <img src="./1.jpg" alt="">
        </div>
        <div class="a">
          <img src="./2.jpg" alt="">
        </div>
        <div class="a">
          <img src="./3.jpg" alt="">
        </div>
        <div class="a">
          <img src="./4.png" alt="">
        </div>
        <div class="a">
          <img src="./5.jpg" alt="">
        </div>
        <div class="a">
          <img src="./6.jpg" alt="">
        </div>
        <div class="a">
          <img src="./7.jpg" alt="">
        </div>
        <div class="a">
          <img src="./8.jpg" alt="">
        </div>
      </div>
      <div class="column">
        <div class="a">
          <img src="./9.jpg" alt="">
        </div>
        <div class="a">
          <img src="./10.jpg" alt="">
        </div>
        <div class="a">
          <img src="./11.jpg" alt="">
        </div>
        <div class="a">
          <img src="./12.jpg" alt="">
        </div>
        <div class="a">
          <img src="./13.jpg" alt="">
        </div>
        <div class="a">
          <img src="./14.webp" alt="">
        </div>
        <div class="a">
          <img src="./15.png" alt="">
        </div>
        <div class="a">
          <img src="./16.png" alt="">
        </div>
      </div>
      <div class="column">
        <div class="a">
          <img src="./17.png" alt="">
        </div>
        <div class="a">
          <img src="./18.webp" alt="">
        </div>
        <div class="a">
          <img src="./19.webp" alt="">
        </div>
        <div class="a">
          <img src="./20.jpg" alt="">
        </div>
        <div class="a">
          <img src="./21.webp" alt="">
        </div>
        <div class="a">
          <img src="./22.webp" alt="">
        </div>
        <div class="a">
          <img src="./23.webp" alt="">
        </div>
        <div class="a">
          <img src="./24.webp" alt="">
        </div>
      </div>
      <div class="column">
        <div class="a">
          <img src="./25.webp" alt="">
        </div>
        <div class="a">
          <img src="./26.webp" alt="">
        </div>
        <div class="a">
          <img src="./27.webp" alt="">
        </div>
        <div class="a">
          <img src="./28.webp" alt="">
        </div>
        <div class="a">
          <img src="./29.png" alt="">
        </div>
        <div class="a">
          <img src="./30.png" alt="">
        </div>
        <div class="a">
          <img src="./31.jpg" alt="">
        </div>
        <div class="a">
          <img src="./32.jpg" alt="">
        </div>
      </div>
      <div class="column">
        <div class="a">
          <img src="./33.webp" alt="">
        </div>
        <div class="a">
          <img src="./34.webp" alt="">
        </div>
        <div class="a">
          <img src="./35.jpg" alt="">
        </div>
        <div class="a">
          <img src="./36.jpg" alt="">
        </div>
        <div class="a">
          <img src="./37.jpg" alt="">
        </div>
        <div class="a">
          <img src="./38.jpg" alt="">
        </div>
        <div class="a">
          <img src="./39.jpg" alt="">
        </div>
        <div class="a">
          <img src="./40.jpg" alt="">
        </div>
      </div>
    </div>


  </body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.box {
  gap: 16px;
  display: flex;
  width: 80%;
  margin: 10px auto;
}


.box .column {
  flex: 1;
}


.box .column .a {
  overflow: hidden;
  display: block;
  border-radius: 20px;
  width: 100%;
  margin-bottom: 16px;
}


.box .column .a img {
  width: 100%;
}

垂直对齐-解决底部空白缝隙的问题#

基线：浏览器**行内元素（行内块元素）**排版中存在用于对齐的基线（baseline）

![alt text](image-1.png null)

图片默认和文字基线对齐

解决方法

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

vertical-align属性值

值描述
baseline默认值。元素的基线对齐
top把元素的垂直对齐位置设置为顶部
middle把元素的垂直对齐位置设置为中间
bottom把元素的垂直对齐位置设置为底部
img {
  <!-- 防止浏览器默认给图片添加边框 -->
  border: 0;
  <!-- 垂直居中对齐 -->
  vertical-align: middle;
}

五.定位布局#

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

场景：

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

定位分类：

  • 相对定位
  • 绝对定位
  • 固定定位
  • 粘性定位

相对定位#

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

场景：

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

语法：

/* 设定元素为相对定位 */
.relative {
  position: relative;
}
  • 相对于自身原来位置移动距离
  • 不脱离正常流，元素原位置仍被保留，其他元素按布局排列
  • 可以通过top、right、bottom、left属性进行偏移，也可以通过inset属性，同时设置四个方向的偏移距离
  • 优先级：若同时设置top和bottom，仅生效top，同理left覆盖right

示例：

/* 相对定位 */
.relative {
  position: relative;
  /* 相对自身顶部向下移动10px */
  top: 10px;
  /* 相对自身左侧向右移动10px */
  left: 10px;
}

绝对定位#

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

场景：

  1. 弹出菜单/下拉框：鼠标悬停是显示浮动菜单
  2. 悬浮效果：元素悬浮在其他元素上方

alt text
alt text

语法:

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

示例：

/* 绝对定位 */
/* 父元素 */
.father {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: pink;
}


/* 子元素 */
.son {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  /* 相对父元素顶部向下移动10px */
  top: 10px;
  /* 相对父元素左侧向右移动10px */
  left: 10px;
}

定位-子绝父相#

为什么是子绝父相？

  1. 子元素可以悬浮其他元素上方，就不能占有位置，影响其他元素布局，所以绝对定位
  2. 但是子元素不能随便乱跑，要配合父元素移动位置，此时父元素需要加定位
  3. 父元素需要站原来的位置，不能影响其他元素布局，此时相对定位最合适

小技巧1-圆点变化#

alt text

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

alt text

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

如果用阴影更简单：

alt text
阴影不占位置，所以不会增加盒子大小，从而不影响布局

/* 阴影 */
.shadow {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5);
}

小技巧2-定位的盒子垂直居中#

alt text

/* 定位的盒子垂直居中 */
.vertical-center {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  /* 往下走父盒子自身高度的一半 */
  top: 50%;
  /* 往上走自身高度的一半 */
  margin-top: -50px;
}

固定定位#

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

场景：

  1. 固定导航栏：页面滚动时导航栏始终固定在视口顶部
  2. 页面广告：广告覆盖整个页面

语法：

/* 设定元素为固定定位 */
.fixed {
  position: fixed;
}
  • 元素脱离正常流，不占据空间，其他元素按原布局排列
  • 相对于浏览器窗口定位位置，滚动页面时位置不变
  • 可以通过top、right、bottom、left属性进行偏移
  • 优先级：若同时设置top和bottom，仅生效top，同理left覆盖right

示例：

/* 固定定位 */
.fixed {
  /* 固定定位 */
  position: fixed;
  width: 600px;
  height: 120px;
  border-radius: 15px;
  /* 偏移调整 */
  left: 50%;
  margin-left: -300px;
  bottom: 20px;
  /* 背景颜色 */
  background-color: pink;
  /* 文字对齐 */
  text-align: center;
  line-height: 60px;
}

效果：

alt text

粘性定位#

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

场景：

  1. 吸顶效果：元素在滚动到某个位置后固定
  2. 变革表头固定：长表格滚动时表头始终可见

语法：

/* 设定元素为粘性定位 */
.sticky {
  position: sticky;
}
  • 元素在滚动到指定位置（如top: 10px），相对于最近的已定位祖先元素前为相对定位，之后转为固定定位
  • 父容器的overdlow需为visible,否则粘性定位无效
  • 可以通过top、right、bottom、left属性进行偏移
  • 需指定top,right,bottom,left中之一，才可使粘性定位生效

示例（滑动表格，表头固定）：

/* 粘性定位 */
.sticky {
  position: sticky;
  top: 0px;
}

定位布局-层叠顺序#

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

场景：

  1. 提高层级悬浮效果（如导航栏）
  2. 实现图片层叠效果
    alt text

语法：

/* 设定元素为层叠顺序 */
.z-index {
  z-index: 数值;
}
  • 值类型：整数（整数，负数，零）或auto，数值越大，层级越高
  • 默认值：auto（等同于未设置，后出现的元素覆盖前者）
  • 生效条件：仅对定位元素（position值为relative、absolute、fixed、sticky）有效

定位总结#

定位类型脱离文档流定位基准层叠控制典型场景
static否默认文档流无普通元素布局
relative否自身正常位置支持微调元素、子绝父相
absolute是最近定位祖先 / 视口支持弹窗、下拉菜单、悬浮元素
fixed是视口支持固定导航栏、返回顶部按钮
sticky否视口或滚动祖先支持吸顶导航栏、侧边栏固定

定位属性：

  • position: （static/relative/absolute/fixed/sticky）
  • 偏移属性：（top、right、bottom、left）
  • z-index：（控制层叠顺序，数值越大层级越高）

常见组合：

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

六.网格布局#

1.基本概念#

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

alt text

网格布局的核心：创建好网格并放入各类元素
开发常见：单行布局用flex，多行或者响应式用grid

2.网格容器#

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

3.网格轨道#

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

绘制网格：（网格轨道） grid-template-columns定义网格中的列，每个值代表一列的宽度 grid-template-rows定义网格中的行，每个值代表一行的高度

grid-template: grid-template-columns / grid-template-rows; 同时定义列和行

属性值：

  • 几个属性值代表创建几列/行
  • 长度单位 （px、fr等）
属性值说明示例应用场景
固定长度使用 px、em 等固定单位定义列宽grid-template-columns: 100px 200px;需要精确控制列宽的固定布局
百分比按容器宽度百分比分配列宽grid-template-columns: 30% 70%;响应式布局中按比例划分列
fr 单位分配轨道剩余空间的比例（1fr 表示一份，总和为容器剩余空间，fr 是 fraction 缩写，意为分数）grid-template-columns: 1fr 2fr;需要自适应比例分配的布局
auto列宽由内容自动撑开grid-template-columns: auto 100px;内容宽度不确定时的灵活布局
repeat() 函数简化重复的列定义grid-template-columns: repeat(3, 1fr);（等效于 1fr 1fr 1fr）多列等宽布局
minmax() 函数定义列宽的最小值和最大值grid-template-columns: minmax(100px, 1fr);响应式布局中限制列宽范围

示例：

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

技巧：如果想不限制行数，可以不设置grid-template-rows，给子盒子定义高度即可，父盒子会自动调整行数以适应子盒子的高度

repeat() 函数#

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

自动填充：适用于响应式布局中“列数随容器宽度变化”的场景 auto-fill：尽可能多地创建列 auto-fit：尽可能拉伸列填满容器（会合并空白，列宽不小于minmax的最小值）

区别：

  • auto-fill：会创建 as many columns as possible（尽可能多地创建列），直到容器宽度不足，留有空白空间
    alt text

空白空间的地方也是被创建的列，只是没有内容，总共不止4列

  • auto-fit：会创建 as many columns as possible（尽可能多地伸展列），直到容器宽度不足，填满空白空间
    alt text

空白的地方被拉伸填满，总共只有4列

minmax() 函数#

语法： minmax(最小值，最大值)

最小值：定义轨道的最小尺寸 最大值：定义轨道的最大尺寸

响应式布局示例：

.grid {
  display: grid;
  /* 响应式布局，列数随容器宽度变化，列宽在100px到1fr之间 */
  grid-template-columns: minmax(auto-fill, minmax(100px, 1fr));
}

4.网格轨道-对齐方式#

justify-content是控制列轨道（Columns Tracks）在容器内水平分布 align-content是控制行轨道（Rows Tracks）在容器内垂直分布

属性值水平方向效果垂直方向效果
start（默认值）左对齐顶部对齐
end右对齐底部对齐
center水平居中对齐垂直居中对齐
space-around两侧留出相等的空白，项目周围空间均匀分布上下留出相等的空白，项目周围空间均匀分布
space-between首尾项目贴边上下项目贴边
space-evenly项目间、首尾与边界的空白相等项目间、首尾与边界的空白相等

5.网格间距#

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

语法： gap: 20px; 行和列之间的保持20像素间隙 gap: 20px 40px; 行之间的保持20像素间隙，列之间的保持40像素间隙

注意：gap是简写形式也可以分开写 column-gap: 20px; 行之间的保持20像素间隙 row-gap: 40px; 列之间的保持40像素间隙

6.网格线#

网格线会在使用网格布局时被创建，线编号从1开始计算，3列就会有4根线

alt text

使用场景：

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

alt text

实现语法1：

  1. 跨列：grid-column: 开始线编号/结束线编号;
  2. 跨行：grid-row: 开始线编号/结束线编号;
注意：该属性要加到**项目**（子元素）上

示例：

.grid .item:first-child {
  /* ... */
  /* 跨列 */
  grid-column: 1 / 3;
  /* 跨行 */
  grid-row: 1 / 3;
}

效果：

alt text

实现语法2：

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

示例：

.grid .item:first-child {
  /* ... */
  /* 跨列 1到3列 */
  grid-column: 1 / span 2;
  /* 跨行 1到3行 */
  grid-row: 1 / span 2;
}

效果同上

7.网格填充方式#

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

语法：

  1. grid-auto-flow: column; 子元素按先行后列顺序填充，优先填满一列后换列
    alt text
  2. grid-auto-flow: row; 子元素按先列后行顺序填充，优先填满一行后换行
    alt text

场景： b站布局中有些子元素是按照列方式显示

alt text

object-fit#

object-fit是css中用于控制替换元素（如<img>、<video>、<iframe>等加载外部资源的元素）内容如何适应其容器尺寸的属性

值描述
fill默认值。拉伸内容以完全填充容器，不保持宽高比，可能导致内容变形（最常用但需谨慎）
contain保持内容固有宽高比，缩放至完全适应容器内部（内容全部可见），容器可能有空白（类似“适应”模式）
cover保持内容固有宽高比，缩放至覆盖容器（内容可能部分被裁剪），容器无空白（类似“填充”模式）

配合object-position：

object-position 用于控制替换元素内容在容器内的对齐位置，配合 object-fit 使用可以精确控制内容的显示区域。

语法：

object-position: <x-position> <y-position>;

常用值：

值类型示例描述
关键字left / center / right / top / bottom基本方向对齐
百分比50% 50%水平和垂直位置百分比（默认值，居中）
长度值10px 20px具体像素或其他长度单位
混合值left 50%关键字与百分比/长度混合使用

使用示例：

/* 左对齐 */
img {
  object-fit: cover;
  object-position: left;
}


/* 左上角对齐 */
img {
  object-fit: cover;
  object-position: 0 0;
}


/* 向左移动10%，垂直居中 */
img {
  object-fit: cover;
  object-position: 10% center;
}


/* 向右移动20px，向下移动30px */
img {
  object-fit: cover;
  object-position: 20px 30px;
}

应用场景：

  • 图片裁剪时需要显示特定区域（如人物照片只显示面部）
  • 响应式布局中保持图片的重要内容可见
  • 视频播放器中控制视频画面的显示位置

注意事项：

  • 仅对替换元素有效（img、video、canvas等）
  • 需要与 object-fit 配合使用才能发挥最大效果
  • 百分比值的参考系是容器的尺寸，而非内容本身的尺寸

8.项目对齐方式#

在css grid布局中，控制单元格里的子元素的对齐方式

场景：

  1. 元素在网格内对齐
    alt text

语法：

  1. justfy-items: 水平对齐方式; 水平方向（行轴）
  2. align-items: 垂直对齐方式; 垂直方向（列轴）
  3. place-items: 水平对齐方式 垂直对齐方式; 同时设置水平和垂直对齐方式

为了提高可读性和兼容性，体长使用前面两种方式

注意：

该属性要加到网格容器上，而不是项目上
不要和align-content，justify-content混淆
点我跳转轨道对齐方式

属性值：

属性值水平方向效果垂直方向效果代码示例
start对齐单元格起始边缘（左对齐）对齐单元格起始边缘（顶部对齐）.container { justify-items: start; }
end对齐单元格结束边缘（右对齐）对齐单元格结束边缘（底部对齐）.container { justify-items: end; }
center水平居中对齐垂直居中对齐.container { justify-items: center; }
stretch拉伸填满单元格宽度（默认值）拉伸填满单元格高度（默认值）.container { justify-items: stretch; }

七.多列布局#

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

场景：

  1. 长文章分栏：文章自动分列，中间有间隙，也可以做响应式
  2. 图片瀑布流
    alt text

优势：自动分列，无需额外准备列盒子

alt text

实现语法：

属性作用示例值
column-count根据容器宽度和 column-count 值，自动分配列宽column-count: 3; 分为 3 列
column-gap列之间的间距20px、normal（默认 1em）
column-rule列间的分隔线样式（颜色、宽度、样式）column-rule: 1px solid #ccc;

注意：

  1. 底部子元素被“切断”。
    原因：column-count的本质是将内容按垂直方向自动分割到多列（类似报纸排版）
    内容会优先填满一列后再流入下一列

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

该属性给子元素添加，而不是容器

八.鼠标样式#

在css中，cursor属性用于控制鼠标指针在元素上的显示样式，通过改变光标形态可以向用户传递交互提示（如“可点击”、“不可选中”等），从而提升界面交互体验。

alt text

值描述
default默认箭头（通常是系统默认的箭头光标）
pointer手型（指尖朝上的小手），常用于可点击元素（如链接 <a>、按钮 <button>）
textI 型竖线（类似文本输入光标），用于可编辑文本区域（如 <textarea>、contenteditable 元素）
wait等待（旋转圆圈或沙漏），表示操作进行中（如加载、提交时）
help帮助（带问号的箭头），提示用户需要帮助（如提示信息区域）
not-allowed禁止（圆圈带斜线），表示操作不可用（如禁用的按钮）
grab抓取（手型带抓取动作），表示可拖动（如可拖拽的元素）
grabbing抓取中（手型收紧），表示正在拖动（配合 grab 使用）
zoom-in放大（+号），表示放大操作（如图片预览时）
zoom-out缩小（-号），表示缩小操作（如图片预览时）

示例：

/* 鼠标悬停时显示手型 */
.item:hover {
  cursor: pointer;
}

九.CSS书写顺序#

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

顺序常见属性列表
布局相关display（显示类型）、visibility（可见性）、position（定位方式）、top/right/bottom/left（定位偏移）、float（浮动）、clear（清除浮动）、overflow（溢出处理）、z-index（层叠顺序）、clip（裁剪）
盒模型box-sizing（盒模型计算方式）、width/min-width/max-width（宽度）、height/min-height/max-height（高度）、margin（外边距）、padding（内边距）、border（边框）、outline（轮廓，可选）
视觉样式color（文本颜色）、background（背景，含 background-color/background-image 等）、font（字体合写）、font-size（字号）、font-family（字体系列）、line-height（行高）、text-align（文本对齐）、text-indent（首行缩进）、letter-spacing（字间距）、white-space（空白处理）
交互与动画cursor（鼠标指针）、opacity（透明度）、transition（过渡）、animation（动画）、transform（变换，如旋转、缩放）
其他（特殊/低频）filter（滤镜）、clip-path（裁剪路径）、backdrop-filter（背景滤镜）、will-change（优化提示）、touch-action（触摸行为）、scroll-behavior（滚动行为）
分享

如果这篇文章对你有帮助，欢迎分享给更多人！

现代网页布局
https://fairycrane.website/posts/page_layouts/
作者
仙鹤
发布于
2026-06-03
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

交互动效设计
CSS基础知识入门
湘ICP备2026001802号-1
© 2026 仙鹤. All Rights Reserved. / RSS / Atom / Sitemap
Powered by Astro & Mizuki  Version 8.1
封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00