当前位置： 首页 > article >正文

CSS基础（盒子模型的组成、内容溢出、隐藏元素的方式、样式的继承、元素的默认样式、布局技巧、元素之间的空白问题、行内块元素的幽灵空白问题）

article 2026/4/8 23:32:41

文章目录

  • 1. 盒子模型的组成
    • 1.1 内容区
    • 1.2 默认宽度
    • 1.3 内边距
      • 1.3.1 内边距属性
      • 1.3.2 复合属性
      • 1.3.3 单位
      • 1.3.4 注意事项
    • 1.4 边框
      • 1.4.1 边框属性
      • 1.4.2 复合属性
      • 1.4.3 单方向边框
      • 1.4.4 边框样式
      • 1.4.5 注意事项
    • 1.5 外边距
      • 1.5.1 外边距属性
      • 1.5.2 复合属性
      • 1.5.3 注意事项
    • 1.6 外边距塌陷问题
      • 1.6.1 发生外边距塌陷的条件
      • 1.6.2 外边距塌陷的规则
      • 1.6.3 如何避免外边距塌陷
  • 2. 内容溢出
    • 2.1 内容溢出的情景
    • 2.2 处理内容溢出的CSS属性
      • 2.2.1 overflow
      • 2.2.2 overflow-x和overflow-y
    • 2.3 与内容溢出相关的其它属性
      • 2.3.1 text-overflow
      • 2.3.2 resize
  • 3. 隐藏元素的方式
    • 3.1 display: none;
    • 3.2 visibility: hidden;
    • 3.3 opacity: 0;
    • 3.4 height: 0; width: 0; overflow: hidden;
  • 4. 样式的继承
    • 4.1 继承的属性
    • 4.2 继承的规则
    • 4.3 控制继承
  • 5. 扩展：浏览器控制台中Elements栏目中各个区域的含义
  • 6. 元素的默认样式
  • 7. 布局技巧
    • 7.1 行内元素、行内块元素可以被父元素当作文本处理
    • 7.2 如何让子元素在父元素中水平居中
    • 7.3 如何让子元素在父元素中垂直居中
  • 8. 元素之间的空白问题
    • 8.1 空白产生的原因
    • 8.2 解决方案
  • 9. 行内块元素的幽灵空白问题
    • 9.1 问题呈现
    • 9.2 问题产生的原因
    • 9.3 解决方案

视频教程： 117_CSS_盒子模型的组成部分

1. 盒子模型的组成

在这里插入图片描述

在CSS中，盒子模型是理解布局的关键概念，它描述了如何计算一个元素的总宽度和高度。一个盒子的组成部分包括：

  1. 内容（Content）：
    • 这是盒子模型的中心部分，包括元素的内容，如文本、图片等
    • width 和 height 属性设置内容区域的宽度和高度
  2. 内边距（Padding）：
    • 内边距是内容周围的空白区域，位于内容和边框之间
    • 可以使用 padding 属性来设置，该属性可以接受一到四个值（上、右、下、左）
    • 也可以单独设置 padding-top、padding-right、padding-bottom、padding-left
  3. 边框（Border）：
    • 边框位于内边距的外围，它包裹着内边距和内容
    • 可以使用 border 属性来设置边框的宽度、样式和颜色
    • 也可以单独设置 border-width、border-style、border-color，或者更具体地设置 border-top、border-right、border-bottom、border-left
  4. 外边距（Margin）：
    • 外边距是盒子与其他元素之间的空白区域
    • 可以使用 margin 属性来设置，与内边距类似，可以接受一到四个值
    • 也可以单独设置 margin-top、margin-right、margin-bottom、margin-left

1.1 内容区

在CSS盒子模型中，内容区（Content Area）是指盒子模型的核心部分，它包含了元素的实际内容，例如文本、图像或视频。以下是关于内容区的几个关键点：

  1. 尺寸：
    • 内容区的宽度（Width）和高度（Height）可以通过CSS的 width 和 height 属性来设置
    • 如果没有显式设置这些属性，内容区的大小将根据其内容的自然大小来决定
  2. 定位：
    • 内容区位于内边距（Padding）内部，如果有设置的话
    • 它被内边距、边框（Border）和外边距（Margin）所包围
  3. 背景：
    • 内容区的背景可以通过 background-color、background-image、background-repeat、background-position 和 background-size 等属性来设置
    • 默认情况下，背景延伸到内容区，但可以通过 background-clip 属性来改变这一行为
  4. 溢出：
    • 如果内容超出了内容区所设定的尺寸，可以使用 overflow 属性来控制如何处理溢出的内容。可用的值包括 visible（默认值，内容不会被裁剪，呈现在盒子外）、hidden（溢出的内容会被裁剪，不显示）、scroll（提供滚动条以便查看所有内容）和 auto（根据需要提供滚动条）
  5. 盒子大小：
    • 在标准盒模型中，width 和 height 属性只定义内容区的尺寸，不包括内边距、边框或外边距
    • 使用 box-sizing 属性可以改变这种行为。例如，box-sizing: border-box; 会使得 width 和 height 属性包括了内容区、内边距和边框的尺寸

1.2 默认宽度

  • 默认宽度指的是不设置 width 属性时，元素所呈现出来的宽度
  • 总宽度 = 父元素的 content - 自身的左右 margin
  • 内容区的宽度 = 父元素的 content - 自身的左右margin - 自身的左右 border - 自身的左右 padding

在CSS中，大多数元素的默认宽度并不是固定的，而是由其内容的大小决定的。这意味着如果没有显式设置宽度（width）属性，元素的宽度将根据以下因素自动调整：

  1. 内容的宽度：元素的宽度会扩展到足以容纳其所有内容。如果内容是一行文本，那么元素的宽度将至少与这行文本一样宽
  2. 内边距（Padding）：如果设置了内边距，元素的宽度将包括内容的宽度加上左右内边距
  3. 边框（Border）：如果设置了边框，元素的宽度还将包括边框的宽度
  4. 外边距（Margin）：外边距不计算在元素的宽度内，但它会影响元素在页面上的布局

对于块级元素（如<div>、<p>、<h1>-<h6>等），如果没有设置宽度，它们通常会扩展到填满其父元素的宽度（减去任何内边距、边框和外边距）。这就是为什么块级元素默认会占据整个可用水平空间，除非它们被设置了宽度或者被浮动、定位等

1.3 内边距

在CSS盒子模型中，内边距（Padding）是指盒子内容区与盒子边框之间的空间。内边距用于增加内容与边框之间的距离，从而提高内容的可读性和美观性。以下是关于内边距的一些关键点：

1.3.1 内边距属性

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

1.3.2 复合属性

内边距属性可以单独设置，也可以使用复合属性 padding 一次性设置所有四个方向的内边距

padding 可以接受以下几种值：

  • 一个值：同时设置上、右、下、左四个方向的内边距
  • 两个值：第一个值设置上下内边距，第二个值设置左右内边距
  • 三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距
  • 四个值：按照顺时针顺序分别设置上、右、下、左四个方向的内边距

1.3.3 单位

内边距可以使用多种长度单位来设置，如像素（px）、百分比（%）、em、rem 等

1.3.4 注意事项

  • 内边距是透明的，并且会显示元素的背景颜色或背景图像
  • 内边距会影响元素的总宽度和高度。在标准盒模型中，元素的 width 和 height 属性只包括内容区，不包括内边距和边框。但在 box-sizing: border-box; 模式下，width 和 height 属性包括了内容区、内边距和边框
  • 内边距不能为负值

1.4 边框

在CSS盒子模型中，边框（Border）是围绕在元素内容和内边距外围的线条。边框可以用来分隔不同的元素，增加视觉效果，或者强调某个元素。以下是关于边框的一些关键点：

1.4.1 边框属性

  • border-width：设置边框的宽度
  • border-style：设置边框的样式（如实线、虚线、点线等）
  • border-color：设置边框的颜色

1.4.2 复合属性

边框属性可以单独设置，也可以使用简写属性 border 一次性设置所有四个边框的宽度、样式和颜色

border 可以接受以下几种值：

  • 一个值：同时设置所有四个边框的样式和颜色，宽度默认为中等（medium）
  • 两个值：第一个值设置宽度，第二个值设置样式和颜色
  • 三个值：第一个值设置宽度，第二个值设置样式，第三个值设置颜色

1.4.3 单方向边框

也可以单独设置每个方向的边框：

  • border-top
  • border-right
  • border-bottom
  • border-left

这些属性同样可以接受一个、两个或三个值

1.4.4 边框样式

边框样式可以设置为以下几种值：

  • none：无边框
  • hidden：与 none 相同，但在表格中可能有所不同
  • dotted：点线边框
  • dashed：虚线边框
  • solid：实线边框
  • double：双线边框

1.4.5 注意事项

  • 边框的宽度会影响元素的总宽度和高度。在标准盒模型中，边框宽度加上元素的 width 和 height 以及内边距和外边距，共同决定了元素在页面上的实际大小
  • 边框的颜色默认与元素文本颜色相同，除非另外指定
  • 边框样式不能继承，必须显式设置

1.5 外边距

在CSS盒子模型中，外边距（Margin）是围绕在元素边框边缘的空白区域。外边距用于控制元素之间的空间，以及元素与包含块（如父元素或页面边缘）之间的空间。以下是关于外边距的一些关键点：

1.5.1 外边距属性

  • margin-top：设置元素顶部的外边距
  • margin-right：设置元素右侧的外边距
  • margin-bottom：设置元素底部的外边距
  • margin-left：设置元素左侧的外边距

1.5.2 复合属性

外边距属性可以单独设置，也可以使用复合属性 margin 一次性设置所有四个方向的外边距

margin 可以接受以下几种值：

  • 一个值：同时设置所有四个方向的外边距。
  • 两个值：第一个值设置顶部和底部的外边距，第二个值设置右侧和左侧的外边距
  • 三个值：第一个值设置顶部的外边距，第二个值设置左右两侧的外边距，第三个值设置底部的外边距
  • 四个值：按照顺时针顺序分别设置顶部、右侧、底部和左侧的外边距

1.5.3 注意事项

  • 外边距可以是负值，这会导致元素重叠
  • 外边距的单位可以是像素（px）、百分比（%）或其他CSS长度单位
  • 上下方向的外边距对于行内元素（inline elements）不起作用，除非将其设置为 display: inline-block; 或 `display: block;
  • 外边距不会影响元素的内部空间，只影响元素与其他元素之间的空间
  • 在某些情况下使用 margin: auto; 可以实现水平居中布局

1.6 外边距塌陷问题

在CSS中，外边距塌陷（Margin Collapse）是指相邻的垂直外边距（margin）会合并为一个外边距，这个合并后的外边距等于两个相邻外边距中的较大者。这种现象只会发生在垂直方向上，即 margin-top 与 margin-bottom 之间。以下是关于外边距塌陷的一些详细说明：

1.6.1 发生外边距塌陷的条件

  1. 常规流中的块级盒子：只有处于常规文档流中的块级盒子（不包括浮动和绝对定位的元素）才会发生外边距塌陷
  2. 相邻元素：垂直方向上相邻的元素之间会发生外边距塌陷。这里的“相邻”可以是兄弟元素之间，也可以是父子元素之间
  3. 没有内容分隔：如果两个元素之间没有内容、边框或内边距分隔，它们的外边距会塌陷

1.6.2 外边距塌陷的规则

  1. 正边距：如果两个相邻的外边距都是正数，那么塌陷后的外边距等于两个外边距中的较大者
  2. 一正一负：如果两个相邻的外边距一正一负，塌陷后的外边距是两个外边距的和
  3. 都是负边距：如果两个相邻的外边距都是负数，塌陷后的外边距等于两个外边距中的较小者（绝对值较大者）

1.6.3 如何避免外边距塌陷

  1. 使用边框或内边距：在元素之间添加边框（border）或内边距（padding）可以阻止外边距塌陷
  2. 创建BFC：通过创建块级格式化上下文（BFC），可以阻止外边距塌陷。例如，设置元素的 overflow 属性为非 visible 值（如 hidden、scroll 或 auto）可以创建一个新的BFC
  3. 浮动和定位：浮动元素（float）和绝对定位元素（position: absolute 或 position: fixed）不会与其他元素发生外边距塌陷

2. 内容溢出

在CSS中，内容溢出（Content Overflow）是指当元素的内容超出了为其分配的尺寸（宽度或高度）时发生的情况。以下是一些关于内容溢出的关键点以及如何处理它：

2.1 内容溢出的情景

  1. 宽度溢出：当元素的宽度不足以容纳其所有内容时，内容会从元素的右侧溢出
  2. 高度溢出：当元素的高度不足以容纳其所有内容时，内容会从元素的底部溢出

2.2 处理内容溢出的CSS属性

2.2.1 overflow

overflow 属性定义了如果内容溢出元素框时应该发生的事情，有以下几个值：

  • visible：默认值，内容会溢出元素框，不剪切也不添加滚动条
  • hidden：内容会被剪切，并且不会显示溢出的部分
  • scroll：内容会被剪切，但浏览器会添加滚动条以便查看溢出的内容
  • auto：如果内容溢出，浏览器会添加滚动条；如果没有溢出，则不添加滚动条

2.2.2 overflow-x和overflow-y

overflow-x 和 overflow-y 属性分别控制元素在水平方向和垂直方向上的内容溢出行为

2.3 与内容溢出相关的其它属性

2.3.1 text-overflow

当文本溢出包含元素时，这个属性可以指定如何显示省略符号（…）。通常与 white-space: nowrap; 和 overflow: hidden; 一起使用

.element {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

2.3.2 resize

resize 属性允许用户通过拖动来调整元素的尺寸，但仅在 overflow 属性不为 visible 时有效

.element {overflow: auto;resize: both; /* 或者 horizontal, vertical */
}

3. 隐藏元素的方式

在CSS中，有多种方法可以用来隐藏元素，每种方法都有其特定的用途和效果。以下是一些常用的方法：

3.1 display: none;

元素会被完全从文档流中移除，不占据任何空间，也不会响应任何事件

.hidden {display: none;
}

3.2 visibility: hidden;

元素会保持其空间，但不会显示，也不会响应任何事件

.hidden {visibility: hidden;
}

3.3 opacity: 0;

元素会变得完全透明，但仍然占据空间，并且可以响应事件

.hidden {opacity: 0;
}

3.4 height: 0; width: 0; overflow: hidden;

将元素的高度和宽度设置为0，并隐藏溢出的内容

.hidden {height: 0;width: 0;overflow: hidden;
}

4. 样式的继承

能继承的属性一般都是不影响布局的，也就是和盒子模型无关的属性

在CSS中，样式继承是指某些CSS属性值可以从父元素传递到子元素。继承是CSS的一个基本特性，它允许开发者避免重复编写相同的样式规则

4.1 继承的属性

不是所有的CSS属性都是可继承的。以下是一些常见的可继承属性：

  • 字体相关的属性：font-family, font-size, font-style, font-variant, font-weight, font, line-height
  • 文本相关的属性：color, text-align, text-indent, text-transform, white-space, word-spacing
  • 列表相关的属性：list-style, list-style-type, list-style-position, list-style-image
  • 表格相关的属性：border-collapse, border-spacing
  • 其他属性：visibility, cursor

4.2 继承的规则

  • 直接继承：子元素直接继承父元素的样式
  • 无继承的属性：有些属性默认是不可继承的，例如border, margin, padding, background等
  • 继承的覆盖：如果子元素有自己的样式规则，它会覆盖继承来的样式

4.3 控制继承

inherit：可以将不可继承的属性设置为继承自父元素

.child {color: inherit; /* 强制继承父元素的color属性 */
}

initial：可以将属性设置为它的初始值，忽略继承

.child {color: initial; /* 使用color属性的默认值 */
}

unset：如果属性是可继承的，则unset等同于inherit；如果属性是不可继承的，则unset等同于initial

.child {color: unset; /* 如果color可继承，则继承父元素；否则使用默认值 */
}

revert：将属性重置为浏览器的默认样式，而不是CSS规范定义的默认值

5. 扩展：浏览器控制台中Elements栏目中各个区域的含义

视频教程：128_CSS_样式的继承

打开浏览器的控制台时，在 Elements 栏目中可以看到几个区域，各个区域的含义如下：

  • element.style：元素的内联样式，也就是直接在元素上写的样式，例如<div style="background-color: white"></div>
  • #d3-index.css：通过外部 CSS 文件引入的样式
  • #d3-html：在源 HTML 文件中书写的样式
  • user agent stylesheet：浏览器为元素赋予的默认样式
  • inherited from div#2：从祖先元素继承下来的样式

在这里插入图片描述

6. 元素的默认样式

  • 优先级：元素的默认样式 > 继承的样式
  • 如果要重置元素的默认样式，选择器需要直接选择器到该元素

浏览器为不同的HTML标签提供了一套基础的样式规则，例如：

  • body 标签通常会有一定的外边距（margin），这使得页面内容不会紧贴浏览器窗口的边缘
  • p 标签（段落）通常会有一些上下外边距（margin-top 和 margin-bottom），以便段落之间有一定的间距
  • 列表项（如 ul, ol）会有项目符号或编号，并且列表项本身也会有内边距（padding）和外边距（margin）
  • 表格元素（如 table, th, td）会有一定的边框、填充以及可能的间距设置
  • h1 到 h6 标题标签会有较大的字体大小以及额外的外边距

7. 布局技巧

视频教程：130_CSS_布局小技巧

7.1 行内元素、行内块元素可以被父元素当作文本处理

可以像处理文本对齐一样，去处理行内元素、行内块在父元素中的对齐

例如 text-align、line-height、text-indent 等

7.2 如何让子元素在父元素中水平居中

  • 若子元素为块元素，给子元素加上：margin:0 auto;
  • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center

7.3 如何让子元素在父元素中垂直居中

  • 若子元素为块元素，给子元素加上: margin-top，具体的值为：(父元素 content - 子元素盒子总高）/ 2
  • 若子元素为行内元素、行内块元素
    • 让父元素的 height = line-height，每个子元素都加上：vertical-align:middle;
    • 若想绝对垂直居中，设置父元素的 font-size 属性为 0

8. 元素之间的空白问题

在HTML和CSS中，元素之间的空白问题通常指的是元素之间出现的额外空间，这可能是由于HTML源代码中的空白字符（如空格、制表符、换行符）造成的。以下是一些关于CSS元素之间空白问题的常见情况和解决方案：

8.1 空白产生的原因

在 HTML 中将几个行内元素（如<span>、<a>、<img>）写在一起，并在它们之间或周围放置空格或换行时，浏览器会在这些元素之间渲染出空白间隙

8.2 解决方案

将父元素的font-size设置为0，然后在子元素中重新设置字体大小。这会消除内联元素之间的空白，因为空白字符的宽度会变成0

9. 行内块元素的幽灵空白问题

视频教程：132_CSS_行内块的幽灵空白问题

9.1 问题呈现

图片底部和容器底部之间有空白

在这里插入图片描述

9.2 问题产生的原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间有一定距离

9.3 解决方案

  1. 给行内块元素设置 vertical-align ，值不为 baseline 即可，设置为 middle、bottom、top 均可
  2. 若父元素中只有一张图片，设置图片为 display:block
  3. 给父元素设置 font-size:0，如果该行内块内部还有文本，需要针对文本设置 font-size 属性

相关文章：

CSS基础（盒子模型的组成、内容溢出、隐藏元素的方式、样式的继承、元素的默认样式、布局技巧、元素之间的空白问题、行内块元素的幽灵空白问题）

文章目录 1. 盒子模型的组成1.1 内容区1.2 默认宽度1.3 内边距1.3.1 内边距属性1.3.2 复合属性1.3.3 单位1.3.4 注意事项 1.4 边框1.4.1 边框属性1.4.2 复合属性1.4.3 单方向边框1.4.4 边框样式1.4.5 注意事项 1.5 外边距1.5.1 外边距属性1.5.2 复合属性1.5.3 注意事项 1.6 外边…...

编程日记 2026/4/6 5:10:49

【第二节】C++设计模式(创建型模式)-抽象工厂模式

目录 引言 一、抽象工厂模式概述 二、抽象工厂模式的应用 三、抽象工厂模式的适用场景 四、抽象工厂模式的优缺点 五、总结 引言 抽象工厂设计模式是一种创建型设计模式&#xff0c;旨在解决一系列相互依赖对象的创建问题。它与工厂方法模式密切相关&#xff0c;但在应用…...

编程日记 2026/4/1 11:39:48

[Linux高性能服务器编程] 多线程编程

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。’ 线程与进程 线程是轻量级的进程, 想要理解线程的关键, 首先要理解线程和进程之间的区别. 一个进程在创建之初其实就可以看作是一个主线程, 其创建出的线程其实和其本质无很大差别, 其实就多了一个线程共享资源罢了…...

编程日记 2026/2/15 15:16:04

【开关电源】汽车前端电源保护电路设计

前言&#xff1a; 汽车电池端子在启动或者保养过程中被反接&#xff0c;如果对这些故障不能及时处理&#xff0c;就可能导致ECU或供电设备被损坏&#xff1b;此外在供电过程中电压也存在不稳定的情况。在EMC测试中ISO16750和ISO7637也会有负电压的情况。 肖特基二极管和 P 沟道…...

编程日记 2026/4/8 21:30:46

网络运维学习笔记 017 HCIA-Datacom综合实验01

文章目录 综合实验1实验需求总部特性 分支8分支9 配置一、 基本配置&#xff08;IP二层VLAN链路聚合&#xff09;ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、 单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

编程日记 2026/4/8 9:42:39

Leetcode350：两个数组的交集 II

题目描述&#xff1a; 给你两个整数数组 nums1 和 nums2 &#xff0c;请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数&#xff0c;应与元素在两个数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取较小值&#xff09;。可以不考虑输…...

编程日记 2026/2/11 21:14:21

Ubuntu20.04.2安装Vmware tools

软件版本&#xff1a;Vmware Workstation Pro 17.6.2 操作系统镜像文件&#xff1a;ubuntu-20.04.2-desktop-amd64 方式1&#xff1a;用iso镜像安装 没用这种方法&#xff0c;太麻烦 方式2&#xff1a;用apt安装Open VM Tools 如果你使用的是较新的Ubuntu版本&#xff08;如…...

编程日记 2026/3/25 22:23:17

C++单例模板类，继承及使用

前言&#xff1a; 单例模式可以参考如下文章&#xff1a; 我的设计模式&#xff0c;单例模式的设计和实现 c 单例模式的模板类 - 川野散人 - 博客园 1.为什么需要单例模板类&#xff1f; 场景问题&#xff1a; 如果需要100个单例类就需要设计100个单例模式&#xff0c;代…...

编程日记 2026/4/6 5:33:59

JavaScript函数-函数的返回值

在JavaScript编程语言中&#xff0c;函数是构建复杂逻辑和实现代码复用的关键组件。而函数的返回值则是这些功能的重要组成部分&#xff0c;它允许我们将数据从一个函数传递到另一个地方&#xff0c;从而使得函数更加通用和灵活。本文将深入探讨JavaScript函数返回值的各种特性…...

编程日记 2025/6/29 13:55:27

nodejs：vue 3 + vite 作为前端，将 html 填入＜iframe＞，在线查询英汉词典

向 doubao.com/chat/ 提问&#xff1a; node.js js-mdict 作为后端&#xff0c;vue 3 vite 作为前端&#xff0c;编写在线查询英汉词典 后端部分&#xff08;express js-mdict &#xff09; 详见上一篇&#xff1a;nodejs&#xff1a;express js-mdict 作为后端&#xff…...

编程日记 2026/4/8 10:03:31

现场可以通过手机或者pad实时拍照上传到大屏幕的照片墙现场大屏电子照片墙功能

现场可以通过手机或者pad实时拍照上传到大屏幕的照片墙现场大屏电子照片墙功能&#xff0c;每个人都可以通过手机实时拍照上传到大屏幕上,同时还可以发布留言内容&#xff0c;屏幕上会同步滚动播放展示所有人的照片和留言。相比校传统的照片直播功能更加灵活方便&#xff0c;而…...

编程日记 2026/4/8 21:23:33

《FFTformer：基于频域的高效Transformer用于高质量图像去模糊》

paper&#xff1a;2211.12250 GitHub&#xff1a;kkkls/FFTformer: [CVPR 2023] Effcient Frequence Domain-based Transformer for High-Quality Image Deblurring CVPR 2023 目录 摘要 1、介绍 2、相关工作 2.1 基于深度CNN的图像去模糊方法 2.2 Transformer及其在图…...

编程日记 2026/3/27 14:09:01

ChātGPT赋能的“SolidWorks工具箱”：重塑3D设计效率新标杆

ChātGPT精心打造的“SolidWorks工具箱”正逐步成为3D设计领域中的一颗璀璨新星&#xff0c;其集高效、便捷与创新于一身&#xff0c;为用户带来了前所未有的设计体验。以下是对这一革命性工具箱的深度剖析与美化呈现&#xff1a; 一、核心功能&#xff1a;重塑设计流程&#x…...

编程日记 2026/4/2 12:40:22

Pytorch使用手册-音频数据增强（专题二十）

音频数据增强 torchaudio 提供了多种方式来增强音频数据。 在本教程中，我们将介绍一种应用效果、滤波器、RIR（房间脉冲响应）和编解码器的方法。 最后，我们将从干净的语音合成带噪声的电话语音。 import torch import torchaudio import torchaudio.functional as Fprin…...

编程日记 2026/3/20 22:45:27

基于CNN的FashionMNIST数据集识别3——模型验证

源码 import torch import torch.utils.data as Data from torchvision import transforms from torchvision.datasets import FashionMNIST from model import LeNetdef test_data_process():test_data FashionMNIST(root./data,trainFalse,transformtransforms.Compose([tr…...

编程日记 2026/4/8 0:29:54

Python爬虫处理网页中的动态内容

文章目录 前言一、Python环境搭建1.Python安装2.选择Python开发环境 二、Python爬虫处理网页中的动态内容1. 使用 Selenium 库2. 使用 Pyppeteer 库3. 分析 API 请求 前言 在网页中&#xff0c;动态内容通常是指那些通过 JavaScript 在页面加载后动态生成或更新的内容&#xf…...

编程日记 2026/3/14 1:17:30

洛谷P1135多题解

解法1&#xff1a;BFS&#xff0c;有n个节点每个节点最多被访问一次&#xff0c;所以BFS时间复杂度为O(n)。注意ab的特判。 #include<iostream> #include<cstring> #include<queue> using namespace std; const int N 205; int n, a, b; int k[N], s[N]; b…...

编程日记 2026/4/6 6:10:05

用AI写游戏3——deepseek实现kotlin android studio greedy snake game 贪吃蛇游戏

项目下载 https://download.csdn.net/download/AnalogElectronic/90421306 项目结构 就是通过android studio 建空项目&#xff0c;改下MainActivity.kt的内容就完事了 ctrlshiftalts 看项目结构如下 核心代码 MainActivity.kt package com.example.snakegame1// MainA…...

编程日记 2026/4/6 6:59:26

Python 错误和异常处理

目录 try-except块 例子&#xff1a; 输出&#xff1a; 捕获多种异常 例子&#xff1a; else和finally 例子&#xff1a; 输出&#xff1a; 自定义异常 例子&#xff1a; 输出&#xff1a; 好的&#xff0c;简单来说&#xff0c;错误和异常处理是编程中用来处理程序…...

编程日记 2026/4/7 0:01:01

论文解读 | AAAI'25 Cobra：多模态扩展的大型语言模型，以实现高效推理

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 个人信息 作者&#xff1a;赵晗&#xff0c;浙江大学-西湖大学联合培养博士生 内容简介 近年来&#xff0c;在各个领域应用多模态大语言模型&#xff08;MLLMs&…...

编程日记 2026/4/6 20:39:59

DPVS-3: 双臂负载均衡测试

测试拓扑 双臂模式&#xff0c; 使用两个网卡&#xff0c;一个对外&#xff0c;一个对内。 Client host是物理机&#xff0c; RS host都是虚拟机。 LB host是物理机&#xff0c;两个CX5网卡分别在两个子网。 配置文件 用dpvs.conf.sample作为双臂配置文件&#xff0c;其中…...

编程日记 2026/4/5 23:02:41

Qt 中集成mqtt协议

一&#xff0c;引入qmqtt 库 我是将整个头文件/源文件都添加到了工程中进行编译&#xff0c;这样 跨平台时 方便&#xff0c;直接编译就行了。 原始仓库路径&#xff1a;https://github.com/emqx/qmqtt/tree/master 二&#xff0c;使用 声明一个单例类&#xff0c;将订阅到…...

编程日记 2026/2/20 18:10:00

C语言图结构学习笔记

1. 图的定义 图&#xff08;Graph&#xff09;是一种数据结构&#xff0c;由顶点&#xff08;Vertex&#xff09;和边&#xff08;Edge&#xff09;组成&#xff0c;用于表示对象及其相互关系。图可以是有向图&#xff08;Directed Graph&#xff09;或无向图&#xff08;Undi…...

编程日记 2026/3/17 1:26:40

记一次复杂分页查询的优化历程：从临时表到普通表的架构演进

1. 问题背景 在项目开发中&#xff0c;我们需要实现一个复杂的分页查询功能&#xff0c;涉及大量 IP 地址数据的处理和多表关联。在我接手这个项目的时候,代码是这样的 要知道代码里面的 ipsList 数据可能几万条甚至更多,这样拼接的sql,必然是要内存溢出的,一味地扩大jvm参数不…...

编程日记 2026/4/4 5:07:46

架构师面试（六）：熔断和降级

问题 在千万日活的电商系统中&#xff0c;商品列表页服务通过 RPC 调用广告服务&#xff1b;经过统计发现&#xff0c;在最近10秒的时间里&#xff0c;商品列表页服务在对广告服务的调用中有 98% 的调用是超时的&#xff1b; 针对这个场景&#xff0c;下面哪几项的说法是正确的…...

编程日记 2026/4/8 14:30:38

细说 Java 引用（强、软、弱、虚）和 GC 流程（二）

一、前文回顾 在 细说Java 引用&#xff08;强、软、弱、虚&#xff09;和 GC 流程&#xff08;一&#xff09; 我们对Java 引用有了总体的认识&#xff0c;本文将继续深入分析 Java 引用在 GC 时的一些细节。 还是从我们在前文中提到的引用流程图里说起&#xff0c;这里不清…...

编程日记 2026/4/5 12:01:32

【深度学习】Unet的基础介绍

U-Net是一种用于图像分割的深度学习模型&#xff0c;特别适合医学影像和其他需要分割细节的任务。如图&#xff1a; Unet论文原文 为什么叫U-Net&#xff1f; U-Net的结构像字母“U”&#xff0c;所以得名。它的结构由两个主要部分组成&#xff1a; 下采样&#xff08;编码…...

编程日记 2026/4/6 7:07:32

Python--函数进阶（下）

3. 返回值与print​的辨析 3.1 返回值的作用 ​return​&#xff1a;将结果传递给调用者&#xff0c;可后续处理。​print​&#xff1a;仅输出到控制台&#xff0c;不保留数据。 def add(a, b):return a bresult add(3, 4) # 结果存储在result中 print(result) # …...

编程日记 2026/2/25 20:02:30

ROS2机器人开发--服务通信与参数通信

服务通信与参数通信 在 ROS 2 中&#xff0c;服务&#xff08;Services&#xff09;通信和参数&#xff08;Parameters&#xff09;通信是两种重要的通信机制。服务是基于请求和响应的双向通信机制。参数用于管理节点的设置&#xff0c;并且参数通信是基于服务通信实现的。 1 …...

编程日记 2026/4/5 12:31:40

DeepSeek写贪吃蛇手机小游戏

DeepSeek写贪吃蛇手机小游戏 提问 根据提的要求&#xff0c;让DeepSeek整理的需求&#xff0c;进行提问&#xff0c;内容如下&#xff1a; 请生成一个包含以下功能的可运行移动端贪吃蛇H5文件&#xff1a; 要求 蛇和食物红点要清晰&#xff0c;不超过屏幕外 下方有暂停和重新…...

编程日记 2026/2/24 8:46:36