几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？

news2024/9/23 23:29:37

几种常见的CSS三栏布局

流体布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流体布局</title>
  <style>
    .left {
      float: left;
      width: 100px;
      height: 200px;
      background: lightcoral;
    }

    .right {
      float: right;
      width: 200px;
      height: 200px;
      background: lightblue;
    }

    .main {
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background: lightgreen;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>

</html>

圣杯布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    .container {
      margin-left: 120px;
      margin-right: 220px;
    }

    .main {
      float: left;
      width: 100%;
      height: 300px;
      background: lightgreen;
    }

    .left {
      position: relative;
      left: -120px;
      float: left;
      height: 300px;
      width: 100px;
      margin-left: -100%;
      background: lightcoral;
    }

    .right {
      position: relative;
      right: -220px;
      float: right;
      height: 300px;
      width: 200px;
      margin-left: -200px;
      background: lightblue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

</html>

双飞翼布局

效果：
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    .content {
      float: left;
      width: 100%;
    }

    .main {
      height: 200px;
      margin-left: 110px;
      margin-right: 220px;
      background: lightgreen;
    }

    .main::after {
      content: '';
      display: block;
      font-size: 0;
      height: 0;
      zoom: 1;
      clear: both;
    }

    .left {
      float: left;
      height: 200px;
      width: 100px;
      margin-left: -100%;
      background: lightcoral;
    }

    .right {
      float: right;
      height: 200px;
      width: 200px;
      margin-left: -200px;
      background: lightblue;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>

</html>

灵活布局（Flexbox）

效果：
请添加图片描述
代码参考：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>灵活布局（Flexbox）</title>
  <style>
    .container {
      display: flex;
    }
    .left, .right {
      flex: 0 0 200px; /* 不放大，不缩小，初始宽度 200px */
    }
    .left {
      background-color: lightblue;
    }
    .right {
      background-color: lightcoral;
    }
    .center {
      flex: 1; /* 自适应宽度 */
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>
  </div>
</body>
</html>

灵活布局：使用flex布局，设置display: flex，左右两栏flex: 0 0 200px，中间自适应。

定位布局

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位布局 </title>
  <style>
    .container {
      position: relative;
      width: 100%;
    }
    .left, .right {
      position: absolute;
      width: 200px;
      top: 0;
      bottom: 0;
    }
    .left {
      left: 0;
      background-color: lightblue;
    }
    .right {
      right: 0;
      background-color: lightcoral;
    }
    .center {
      margin: 0 200px; /* 左右两栏宽度之和 */
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="center">Center</div>
  </div>
</body>
</html>

定位布局：使用position属性，左右两栏设置为position: absolute，中间自适应。

Grid 布局

效果：
请添加图片描述
代码参考：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px auto 200px;
    }
    .left {
      background-color: lightblue;
    }
    .right {
      background-color: lightcoral;
    }
    .center {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>
  </div>
</body>
</html>

使用 CSS Grid 属性，定义网格布局，可以轻松实现三栏布局。

介绍下粘性布局（sticky）

粘性布局（sticky）是 CSS3 中新增的一种定位方式。当一个元素被设置为 sticky 时，它会在页面滚动时保持在特定位置，直到滚动到指定的偏移值之后，此时元素将变成固定定位（fixed），并保持在屏幕上的位置。这样可以确保用户在浏览网页时能够轻松访问重要的导航或其他相关信息，提供更好的用户体验。

这里有几个要点需要注意：

  1. 文档流和定位影响：与 fixed 定位不同，sticky 元素并不脱离文档流，仍然保留元素原本在文档中的位置。

  2. 相对偏移计算：元素的固定位置是相对于离它最近的具有滚动功能的祖先元素计算的。如果没有滚动的祖先元素，那么偏移量将相对于视口（viewport）进行计算。

  3. 滚动过程中的行为：当页面滚动时，sticky 元素会固定在特定位置，直到滚动到指定的偏移值，然后它将变成固定定位。

自适应布局

自适应布局是指网页能够根据不同设备的屏幕尺寸和分辨率进行自动调整，以确保页面内容完整显示，而不会因为屏幕尺寸过小而导致出现滚动条。

在两栏布局中，常见的一种做法是将左侧栏设置为固定宽度，而右侧栏则会自动填充剩余空间。这可以通过以下方式实现：

  1. 将左侧栏使用浮动或者绝对定位固定在左侧，然后给右侧栏添加边距使其自动填充空间。
  2. 使用一个包裹性的 <div> 标签将两栏包裹起来，然后给右侧栏添加负边距来创建块级格式化上下文（BFC），从而实现两栏自动排列。
  3. 使用 CSS 弹性盒子布局（Flexbox），可以简单地实现一栏固定宽度，一栏自动填充的两栏布局。

以上是一些常见的自适应布局方法，但具体实现还需根据实际情况选择合适的技术方案。总的来说，自适应布局可以让网页内容能够自动适应不同屏幕，从而给用户带来更好的阅读体验。

左边宽度固定，右边自适应

左边固定宽度，右边自适应的布局可以通过使用 float 或者 Flexbox 来实现。左侧元素设置固定宽度，而右侧元素则会根据剩余空间自动调整宽度。

HTML结构如下：

<div class="outer">
  <div class="left">固定宽度</div>
  <div class="right">自适应宽度</div>
</div>

在外层 div（类名为 outer）中，有两个子 div，类名分别为 left 和 right。其中 left 为固定宽度，而 right 为自适应宽度。

以下是几种常见的实现方法：

方法1: 使用浮动

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outer {
      width: 100%;
      height: 200px;
      background-color: yellow;
    }
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    .right {
      height: 200px;
      background-color: blue;
      overflow: hidden; /* 清除浮动 */
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
  </div>
</body>
</html>

方法2: 使用绝对定位

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outer {
      width: 100%;
      height: 200px;
      background-color: yellow;
      position: relative;
    }
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
    }
    .right {
      height: 200px;
      background-color: blue;
      margin-left: 200px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
  </div>
</body>
</html>

方法3: 使用绝对定位和 margin

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outer {
      width: 100%;
      height: 200px;
      background-color: yellow;
      position: relative;
    }
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
    }
    .right {
      height: 200px;
      background-color: blue;
      margin-left: 200px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
  </div>
</body>
</html>

方法4: 使用Flexbox布局

效果：
请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outer {
      width: 100%;
      height: 200px;
      background-color: yellow;
      display: flex;
    }
    .left {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .right {
      height: 200px;
      background-color: blue;
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">固定宽度</div>
    <div class="right">自适应宽度</div>
  </div>
</body>
</html>

这四种方法的优缺点：

方法1: 使用浮动

  • 优点： 浏览器兼容性较好，适用于较为古老的浏览器。
  • 缺点： 需要清除浮动以避免影响其他元素布局，可能导致一些意外的显示问题。

方法2: 使用绝对定位

  • 优点： 可以精确地控制元素的位置，适合一些特定的布局需求。
  • 缺点： 如果页面结构发生变化，需要手动调整绝对定位元素的位置，不够灵活。

方法3: 使用绝对定位和 margin

  • 优点： 具有一定的灵活性，可以在保持左侧固定宽度的同时让右侧自适应。
  • 缺点： 当页面结构复杂时，可能需要更多的调整来确保布局的稳定性。

方法4: 使用Flexbox布局

  • 优点： 简单、直观，能够轻松实现左右布局，且支持响应式设计。
  • 缺点： 对于一些较老版本的浏览器支持不够完善，需要额外处理兼容问题。

两种以上方式实现已知或者未知宽度的垂直水平居中

已知宽度的垂直水平居中、未知宽度的垂直水平居中（使用 Flexbox 布局）和未知宽度的垂直水平居中（使用表格布局）

效果：
请添加图片描述

以下HTML 文件，包括已知宽度和未知宽度的垂直水平居中效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 已知宽度的垂直水平居中 */
    .wrapper {
      position: relative;
      width: 200px; /* 假设容器宽度为 200px */
      height: 200px; /* 假设容器高度为 200px */
      background-color: #f0f0f0;
    }

    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      margin-top: -50px; /* 将上边距设为自身高度的一半 */
      margin-left: -50px; /* 将左边距设为自身宽度的一半 */
      background-color: #ff0000;
      text-align: center;
      line-height: 100px;
    }

    /* 未知宽度的垂直水平居中 - Flexbox 布局 */
    .wrapper-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px; /* 假设容器宽度为 300px */
      height: 200px; /* 假设容器高度为 200px */
      background-color: #f0f0f0;
    }

    .box-flex {
      background-color: #00ff00;
      padding: 10px;
    }

    /* 未知宽度的垂直水平居中 - 表格布局 */
    .wrapper-table {
      display: table;
      width: 100%;
      height: 200px; /* 假设容器高度为 200px */
      background-color: #f0f0f0;
    }

    .box-table {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      background-color: #0000ff;
    }
  </style>
  <title>垂直水平居中示例</title>
</head>
<body>
  <h2>已知宽度的垂直水平居中</h2>
  <div class="wrapper">
    <div class="box">已知宽度</div>
  </div>

  <h2>未知宽度的垂直水平居中 - Flexbox 布局</h2>
  <div class="wrapper-flex">
    <div class="box-flex">未知宽度 - Flexbox</div>
  </div>

  <h2>未知宽度的垂直水平居中 - 表格布局</h2>
  <div class="wrapper-table">
    <div class="box-table">未知宽度 - 表格布局</div>
  </div>
</body>
</html>

说出 space-between 和 space-around 的区别？

space-between 和 space-around 是 Flexbox 布局中的两种对齐方式，它们的区别在于间距的分配方式。

space-between：这个值会使得项目沿着主轴均匀分布，并且首个元素位于起始位置，末尾元素位于结束位置，中间的元素则平均分布在主轴上，没有额外的空白间隔。

space-around：该值会使得项目沿着主轴均匀分布，并且在每个项目周围均匀留有相等的空白空间，使得项目之间和项目与容器边界之间的空白空间大小相等。

这两种对齐方式的主要区别在于 space-around 在每个项目周围均匀留有空白空间，而 space-between 则只在首尾没有额外的空白空间。

持续学习总结记录中，回顾一下上面的内容：
几种常见的CSS三栏布局？介绍下粘性布局（sticky）？自适应布局？左边宽度固定，右边自适应？两种以上方式实现已知或者未知宽度的垂直水平居中？

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1360425.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【elfboard linux 开发板】9. 虚拟机扩容和内核编译

【elfboard linux 开发板】9. 虚拟机扩容和内核编译

1. 虚拟机扩容 需要将虚拟机的快照全都删除&#xff0c;并且将运行的系统关机点击扩展&#xff0c;改为需要的磁盘大小安装gparted工具 sudo apt-get install gparted 如果报错&#xff0c;则按照出错内容修改&#xff0c;一般是出现下载错误&#xff0c;可以使用下列命令&…
阅读更多...
【大数据进阶第三阶段之Hive学习笔记】Hive的数据类型与数据操作

【大数据进阶第三阶段之Hive学习笔记】Hive的数据类型与数据操作

【大数据进阶第三阶段之Hive学习笔记】Hive安装-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive常用命令和属性配置-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive基础入门-CSDN博客 【大数据进阶第三阶段之Hive学习笔记】Hive查询、函数、性能优化-CSDN博客 …
阅读更多...
集合-及其各种特征详解

集合-及其各种特征详解

集合 概念&#xff1a;是提供一种存储空间 可变 的存储模型&#xff0c;存储的数据容量可以发生改变。&#xff08;也就是集合容量不固定&#xff09; 集合关系图 绿色的代表接口&#xff0c;蓝色的代表接口的实现类 单列集合 Collection(接口) 概述&#xff1a;单列集合的…
阅读更多...
05、Kafka ------ CMAK 各个功能的作用解释（主题和分区 详解，用命令行和图形界面创建主题和查看主题）

05、Kafka ------ CMAK 各个功能的作用解释（主题和分区 详解，用命令行和图形界面创建主题和查看主题）

目录 CMAK 各个功能的作用解释&#xff08;主题&#xff09;★ 主题★ 分区★ 创建主题&#xff1a;★ 列出和查看主题 CMAK 各个功能的作用解释&#xff08;主题&#xff09; ★ 主题 Kafka 主题虽然也叫 topic&#xff0c;但它和 Pub-Sub 消息模型中 topic 主题及 AMQP 的 t…
阅读更多...
安科瑞变电站综合自动化系统在青岛海洋科技园应用——安科瑞 顾烊宇

安科瑞变电站综合自动化系统在青岛海洋科技园应用——安科瑞 顾烊宇

摘 要&#xff1a;变电站综合自动化系统是将变电站内的二次设备经过功能的组合和优化设计&#xff0c;利用先进的计算机技术、通信技术、信号处理技术&#xff0c;实现对全变电站的主要设备和输、配电线路的自动监视、测量、控制、保护、并与上级调度通信的综合性自动化功能。 …
阅读更多...
深入理解Word Embeddings：Word2Vec技术与应用

深入理解Word Embeddings：Word2Vec技术与应用

目录 前言1 Word2Vec概述2 CBOW模型2.1 CBOW模型简介2.2 基于词袋&#xff08;bag of word&#xff09;的假设2.3 One-hot向量编码2.4 分类问题 3 Skip-gram模型3.1 Skip-gram模型简介3.2 目标词预测上下文3.3 词语关联性的捕捉 4 优化Word2Vec模型的方法4.1 负采样和分层softm…
阅读更多...
谷歌浏览器启用实时字幕功能

谷歌浏览器启用实时字幕功能

在 Chrome 中使用“实时字幕”功能 - Google Chrome帮助 在 Chrome 中使用“实时字幕”功能 从计算机上的 Chrome 浏览器中&#xff0c;您可以使用“实时字幕”功能自动为视频、播客、游戏、直播、视频通话或其他音频媒体生成字幕。音频和字幕均在本地处理&#xff0c;并会保…
阅读更多...
「Verilog学习笔记」编写乘法器求解算法表达式

「Verilog学习笔记」编写乘法器求解算法表达式

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule calculation(input clk,input rst_n,input [3:0] a,input [3:0] b,output [8:0] c);reg [8:0] data1, data2 ; assign c data2 ; always (posed…
阅读更多...
【Filament】自定义Blinn Phong光照模型

【Filament】自定义Blinn Phong光照模型

1 前言 光照元素主要有环境光&#xff08;ambient&#xff09;、漫反射光&#xff08;diffuse&#xff09;、镜面反射光&#xff08;specular&#xff09;&#xff0c;基础的光照模型主要有兰伯特&#xff08;Lambert&#xff09;光照模型、冯氏&#xff08;Phong&#xff09;光…
阅读更多...
【Vue3+React18+TS4】1-1 : 课程介绍与学习指南

【Vue3+React18+TS4】1-1 : 课程介绍与学习指南

本书目录&#xff1a;点击进入 一、为什么做这样一门课程? 二、本门课的亮点有哪些? 2.1、轻松驾驭 2.2、体系系统 2.3、高效快捷 2.4、融合贯通 三、课程内容包括哪些? 四、项目实战 《在线考勤系统》 五、课适合哪些同学? 一、为什么做这样一门课程? 近十年内前端…
阅读更多...
RocketMQ源码 发送消息源码分析

RocketMQ源码 发送消息源码分析

前言 DefaultMQProducer 是默认生产者组件&#xff0c;是生产者客户端中&#xff0c;绝大部分关于生产者和broker、nameSrv进行网络通信的功能入口。其中&#xff0c;包含发送各种形式&#xff08;同步、异步、事务、顺序&#xff09;的消息&#xff0c;针对发送消息部分的实现…
阅读更多...
Vue页面传值：Props属性与$emit事件的应用介绍

Vue页面传值：Props属性与$emit事件的应用介绍

一、vue页面传值 在Vue页面中传值有多种方式&#xff0c;简单介绍以下两种 通过props属性传递值&#xff1a;父组件在子组件上定义props属性&#xff0c;子组件通过props接收父组件传递的值。通过$emit触发事件传递值&#xff1a;子组件通过$emit方法触发一个自定义事件&#…
阅读更多...
Meshlab界面和菜单初步认识

Meshlab界面和菜单初步认识

文章目录 界面认识菜单 界面认识 顾名思义&#xff0c;MeshLab即网格实验室&#xff0c;用于处理三维对象&#xff0c;并有着针对网格基于网格操作的各种工具&#xff0c;是一个功能强大的三维几何处理系统。因其开源&#xff0c;直接搜官网下载即可。安装过程无坑&#xff0c…
阅读更多...
pycharm调整漂亮的颜色主题

pycharm调整漂亮的颜色主题

主题样式&#xff1a; 一、设置主题为白色 二、pycharm 如何设置字体颜色 打开pycharm编辑器&#xff0c;file > settings > editor > color scheme > python > 你也可以直接用我资源中的配置好的文件
阅读更多...
癌症早筛2023：翻越大山，仍是漫漫征途

癌症早筛2023：翻越大山，仍是漫漫征途

撕开一盒试剂盒&#xff0c;拿出采样工具&#xff0c;在采集测试样本后混入试剂&#xff0c;再用试纸测试自身对某种病原体的感染情况。过去一段时间&#xff0c;这个方式帮助很多人尽早明确了新冠、流感、支原体的感染状况&#xff0c;从而加速对症治疗。 也因此&#xff0c;…
阅读更多...
计算机进入BIOS - Win/Linux

计算机进入BIOS - Win/Linux

计算机进入BIOS - Win/Linux 快捷键方法&#xff08;通用&#xff09;Win系统方法Linux系统方法 快捷键方法&#xff08;通用&#xff09; 此方法为通用方法&#xff0c;适用于任何型号的计算机&#xff0c;包括台式机和笔记本&#xff0c;也包括Win系统和Linux系统。 进入BI…
阅读更多...
FA2016AA (MHz范围晶体单元超小型低轮廓贴片) 汽车

FA2016AA (MHz范围晶体单元超小型低轮廓贴片) 汽车

随着科技的不断发展&#xff0c;智能汽车逐渐成为人们出行的首选。而其中&#xff0c;频率范围在19.2 MHz ~ 54 MHz的晶体单元超小型低轮廓贴片&#xff08;FA2016AA&#xff09;为汽车打造更智能、更舒适、更安全的出行体验。FA2016AA贴片的外形尺寸为2.0 1.6 0.5 mm&#x…
阅读更多...
【UnityShader入门精要学习笔记】（2）GPU流水线

【UnityShader入门精要学习笔记】（2）GPU流水线

本系列为作者学习UnityShader入门精要而作的笔记&#xff0c;内容将包括&#xff1a; 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更&#xff0c;有始无终 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 上节复习GPU流水线顶点着色…
阅读更多...
bat批处理文件_命令汇总（2）

bat批处理文件_命令汇总（2）

文章目录 1、换行2、返回上一级目录cd..3、隐藏指令回显echo off4、开启指令回显echo on5、用关闭echo off指令本身的回显6、echo提示信息 1、换行 cd.. echo. echo. echo. pause2、返回上一级目录cd… 3、隐藏指令回显echo off echo off echo hello1 echo hello2 pause4、开…
阅读更多...
【学习笔记】1、数字逻辑概论

【学习笔记】1、数字逻辑概论

1.1 数字信号 数字信号&#xff0c;在时间和数值上均是离散的。数字信号的表达方式&#xff1a;二值数字逻辑和逻辑电平描述的数字波形。 &#xff08;1&#xff09; 数字波形的两种类型 数值信号又称为“二值信号”。数字波形又称为“二值位形图”。 什么是一拍 一定的时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023