夯实前端基础之CSS篇

知识点概览

在这里插入图片描述

这一篇是讲CSS的，前面还有一篇总结HTML的哦~夯实前端基础之HTML篇，后面还会更新其他系列哦~

一、必知必会

1. html中引入样式的几种方式？

  • 内联样式（html元素的style属性）
  • 内部样式表（style标签）
  • 外部样式表 （使用link标签）
<head>
    <link rel="stylesheet" type="text/css" href="./meta.css">
    <!-- rel:必需。规定当前文档和被链接文档直接的关系 -->
</head>

2. display有哪些属性？行内元素和块级元素区别及转换方式？

2.1 display的属性
  • none：不显示
  • inline：行内
  • block：块类型
  • inline-block：行内块元素
  • flex：弹性布局
    • flex:1：相当于flex-grow: 1、flex-shrink: 1、flex-basis: 0%
      • flex-grow: 1：在主轴上尽可能占据剩余空间
      • flex-shrink: 1：容器剩余空间不足时，该元素会按照一定比例缩放
      • flex-basis: 0%：意味着元素在没有分配剩余空间或收缩之前，它在主轴方向上的初始大小为 0
  • inherit：继承
  • grid：网格
2.2 行内元素和块级元素的区别？
  • 行内元素（span，a，br， input，img…）
    • 无法设置宽高
    • 水平方向可以设置margin + padding，垂直方向则不可
    • 不会自动换行
  • 块级元素（div，p，ul，li，h1-h6，语义化标签）
    • 可以设置宽高
    • 水平垂直方向都能设置margin + padding
    • 可以换行
    • 多个块级元素是自上而下换行排列
2.3 内联元素和块级元素有哪几种转换方式及原理 ***
  • display
  • float：left|right => 当一个元素浮动时，它的行为在某些方面会类似于内联块元素（inline - block） => 可用于解决内联元素之间的空白问题
    • 行内元素之间的空白问题：这是因为浏览器在解析 HTML 文档时，会把换行，制表符等空白字符当作文本节点来处理，并且根据 CSS 的布局规则，这些空白文本节点会占据一定的空间，所以就出现了元素之间的空白。
  • position：absolute|fixed

3. 选择器 & 优先级

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）
3.1 选择器的优先级是什么样的？选择器如何做样式判断？这段样式能不能生效？
名称写法权重
内联样式1000
id选择器#id100
类选择器.class10
属性选择器a[ref=‘link’]10
标签选择器div1
伪类选择器:hover10
伪元素选择器:after1
兄弟选择器div+p0
子选择器ul>li0
后代选择器div a0
通配符*0
3.2 特殊场景的优先级如何判断？
  • !important 优先级最高
  • 如果优先级相同，则后者高于前者
  • 继承得到的样式，优先级最低
3.3 可继承的样式有哪些？
  • 字体属性： font-family, font-size, font-weight, font-style
  • 文本属性： text-align, text-indent, line-height, color
  • 列表部分属性： list-style
  • 光标： cursor

4. 隐藏和显示相关

  • display: none:直接删除了该元素，并且不再占据空间-重排，不会被继承
  • visibility: hidden : 隐藏，页面上不可见，但仍然占据原来的空间-重绘（性能更好），会被继承
  • opacity:0:不透明度，取值范围0-1，为0时完全透明，看起来像被隐藏了一样-重绘
  • z-index 负值: 不占位
  • transform：scale(0,0): 占位

5. 盒模型及其特性

5.1 什么是标准盒模型和IE盒模型？如何转换？

在这里插入图片描述

  • 盒模型的转换方式
    • box-sizing: content-box（标准盒模型） | border-box（IE盒模型）;
5.2 伪元素和伪类是什么？区别？如何使用？
  • 伪元素：产生新元素，只出现在css样式表中，不存在于doc中。
p::before {
    content: "before";
    color: red;
}
  • 伪类：已有元素上加上新的特殊类别，不产生新元素
p:hover{
    color: blue;
}

6. 图片格式及CSS-sprites

6.1 图片格式有哪些？怎么应用？如何选择？
  • JPEG（Joint Photographic Experts Group）：有损压缩格式，支持百万种颜色，适合还原度要求较高的照片。
  • PNG（Portable Network Graphics）：无损压缩格式
    • PNG-8：支持透明度调节，适用于颜色较少（最多 256 种颜色）的图像，如简单的图标。
    • PNG-24：支持更多颜色，适用于色彩丰富且需要透明度的图像。
  • GIF（Graphics Interchange Format）：无损，有压缩，最多支持256种颜色，适合表情包，动画。
  • SVG（Scalable Vector Graphics）：无损，放大不会失真，适合logo，图标。
  • BMP：无损，没有压缩，通常体积比较大。
6.2 css-sprites精灵图（雪碧图）怎么处理？
  • 所有涉及到的图片都放到一张图上
    • 使用background - position属性来定位具体图标。这个属性接受两个值，分别表示水平方向和垂直方向的偏移量。偏移量可以使用像素（px）、百分比（%）或者关键字（如top、left、center等）来表示。

7. 像素密度与图片应用

7.1 什么是像素密度？
  • 单位长度（通常指每英寸）所包含的像素数量
    • 经典设备宽高414px * 896px, 物理像素1242px * 2688px => 1242/414=3 => 逻辑像素 ：物理像素 = 1：3 => 像素密度3 => 3倍屏
7.2 如何在图片的加载上应用动态密度？
  • 设计师提供@2x, @3x, @4x的图片
  • 200 * 300 => 3倍屏幕 => 600 * 900
image {
    background: ('1x.png)
}
// 利用媒体查询
@media only screen and (min-device-pixel-ratio: 2) {
    image {
        background-image: url('2x.png')
    }
}

8. CSS工程化与预处理

  • 预处理器：less，scss， stylus
    • 利用编译库提供能力，提供层级，mixin，变量，循环，函数
  • 后处理器；postCss
    • 利用后处理编译，属性增加前缀，实现跨浏览器兼容。如：-webkit-flex; display: flex

9. 单行/多行文本超出

/* 单行超出 */
p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行超出 */
div{
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型 */
    display: -webkit-box; 
    /* 盒子从上往下垂直排列 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 兼容性方案 */
div{
    width: 500px;
    position: relative;
    line-height: 18px;
    max-height: 54px;
    overflow: hidden;
}
div::after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
}

10. 文本对齐

  • 水平对齐：text-align：left | right | center
  • 垂直对齐：vertical-align：top | middle | bottom

二、布局场景

1. 如何实现响应式

响应式设计介绍：https://www.w3school.com.cn/css/css_rwd_intro.asp

1.1 视口（viewport）设置
  • 视口是浏览器显示页面内容的区域。比如initial - scale=1表示初始缩放比例为 1，这使得页面在加载时以设备的原始分辨率显示，不会出现缩放情况。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
1.2 媒体查询（@media）
  • 媒体查询是 CSS3 中的技术，它允许根据设备的特性（如屏幕宽度、高度、分辨率、设备方向等）来应用不同的 CSS 样式。
<style>
    img {
        width: 200px;
    }
    @media screen and (min-width: 600px) {
        p {
            color: red;
        }
        img {
            width: 600px;
        }
    }

    /* 针对手机竖屏的基本样式 */
    @media (max-width: 600px) and (orientation: portrait) {
        /* 样式规则 */
    }
    /* 针对手机横屏的样式调整 */
    @media (max-width: 900px) and (orientation: landscape) {
        /* 样式规则 */
    }
    /* 针对高像素密度设备的样式优化 */
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        /* 样式规则 */
    }
    
</style>
<body>
    <p>这是一段文字</p>
    <img src="./scene.jpeg" alt`="`风景图">
</body>

在这里插入图片描述

1.3 相对单位（如vw，vh，rem等）
  • vw（视口宽度单位），vh（视口高度单位）
    • 基础用法：背景铺满屏幕：直接100vw,100vh
    • 进阶用法：通过数学运算将vw，vh结合起来：图片宽高4:3
  • rem（根元素字体大小单位）
    • 在 HTML 根元素（html）上设置字体大小，然后使用 rem 单位来定义其他元素的字体大小。
  • em（父元素字体大小单位）
    • 原理同rem，只不过是根据父元素
<style>
    html{
        font-size: 16px;
    }
    img {
        width: 100vw;
        height: calc(75vw);
    }
    p{
        /* 1.5*16=24px */
        font-size: 1.5rem; 
    }
    
</style>
1.4 弹性盒子布局（Flexbox）和网格布局（Grid Layout）
  • Flexbox：它允许轻松地控制子元素在主轴（flex - direction定义的方向）和交叉轴上的排列方式，如居中、分散、两端对齐等。
.box{
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 500px){
    .box{
        flex-direction: column;
    }
}
  • Grid Layout：使用grid-template-columns和grid-template-rows属性来定义网格的列和行。在响应式布局中，可以使用媒体查询来改变这些属性的值。
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
}
@media screen and (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 100px);
    }
}

2. 常见的水平垂直居中实现方案

  • flex(我的神！)
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
  • grid布局
.container {
    display: grid;
    place-items: center;
    height: 100vh;
 }
  • 绝对定位 + margin: auto（自我拉扯）
    • 浏览器会自动计算并分配剩余空间，使子元素在父元素中水平垂直居中
.container {
    position: relative;
    height: 100vh;
}
.box1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
  • 绝对定位 + 负margin
.container {
    position: relative;
    height: 100vh;
}
.box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -width/2 px;
    margin-top: -height/2 px;
}
  • 绝对定位 + transform
    • 先将子元素定位到父元素的一半位置（使其左上角位于父元素中心位置），然后将子元素相对于自身宽高的一半进行偏移
.container {
    position: relative;
    height: 100vh;
}
.box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. 实现一个三栏布局有哪几种办法？

浮动，flex，grid，table，绝对定位等方案可以实现，以前写过一篇文章：CSS实现三栏布局

三、定位浮动

1. position有哪些属性

  • static（默认值）：不受top、bottom、left、right属性的影响。
  • relative（相对定位）：不脱离文档流，使用top、bottom、left、right属性来调整元素相对于自身原始位置的偏移量。
    • 元素微调：用于对元素位置进行小幅度的精确调整。
    • 作为绝对定位元素的参考容器：例如实现元素水平垂直居中
  • absolute（绝对定位）：元素相对于最近的非static定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于<html>元素。元素脱离文档流
    • 弹出层和模态框定位：用于创建弹出层（如警告框、登录框等模态框）。
    • 复杂布局中的元素精确定位：比如在制作一个具有动态效果的广告位，将广告元素绝对定位在页面的某个角落。
  • fixed（固定定位）：元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。
    • 悬浮广告和提示信息
  • sticky（粘性定位）： 使用场景 - 页面滚动时元素固定到顶部

2. 为什么有时候用translate来改变位置而不是定位？

  • 性能方面的优势
    • 使用定位属性时可能会引起文档流的改变，导致浏览器进行重排（reflow）
    • translate（不会影响其他元素在文档流中的位置，只是重绘，不会重排
  • 动画效果的优势：translate在制作动画效果时能提供更平滑的过渡
  • 兼容性和灵活性方面的优势
    • translate可以更好地与相对单位（如em、rem、%）配合使用
      • 例如使用transform:translate(50%, 50%)可以很方便地将一个元素相对于自身的尺寸进行中心定位。

3. 什么是BFC？使用场景？

Block Formatting Context 块级格式化上下文，规定内部的块级盒子的布局方式，独立的渲染区域，与外面的元素相互隔离，互不影响。

  • 如何触发BFC？
    • 根元素（html）：本身就是一个BFC
    • 浮动元素（float不为none）：浮动元素脱离文档流，这种脱离使得它需要一个独立的布局环境来管理自身以及与其他元素的布局关系，这就是 BFC 产生的一个原因。
    • 绝对定位元素（position属性为absolute或fixed）：原因同上。
    • 行内块元素（display: inline - block）：具有行内元素和块级元素的双重特点
    • overflow不为visible：例如，当overflow: hidden时，元素会隐藏超出自身范围的内容；overflow: auto会根据内容是否溢出自动添加滚动条；overflow: scroll则无论内容是否溢出都会添加滚动条。这些处理方式都要求元素建立一个独立的布局环境来管理内部内容，这与 BFC 的概念相契合。
  • 使用场景
    • 清除浮动（解决父元素高度坍塌）
    • 防止外边距重叠

4. 什么是css单一浮动？原理？形成什么状态？如何清除浮动？

CSS 单一浮动是指将一个元素设置为向左（float: left）或向右（float: right）浮动。

  • 原理：
    • 浮动元素从文档流中脱离出来，意味着它不再占据原来文档流中的垂直空间
  • 形成的状态
    • 水平排列：多个单一浮动元素如果宽度允许，会在同一行水平排列。
    • 父元素高度塌陷：因为浮动元素脱离了文档流，父元素在计算高度时，不会将浮动的子元素的高度计算在内。
    • 影响周围元素布局：除了文本环绕，浮动元素还会对其他非浮动的块级元素产生影响。
  • 如何清除浮动：
    • 使用空的块级元素清除浮动（添加额外标签法）：不推荐！不符合语义化要求且增加了冗余代码。
    • over：hidden|auto（除了visible之外的）：触发BFC，BFC会包含浮动元素，使得父元素的高度能够正确计算
    • 使用伪元素清除浮动（推荐）：利用 CSS 的伪元素（:after）在父元素内容的最后添加一个虚拟的元素，通过对这个虚拟元素进行样式设置，使其清除浮动。

5. 什么是高度坍塌，什么引起？怎么解决？

高度坍塌指父元素没有包裹住子元素，导致父元素的高度小于预期，甚至变成0的现象

  • 引起原因：
    • 浮动元素导致的高度坍塌：浮动元素会脱离文档流
    • 绝对定位元素导致（部分情况）：如果父元素仅依靠子元素的高度来撑开自身高度，那么在这种情况下，父元素的高度可能会坍塌。
  • 解决办法
    • 使用BFC来解决
    • 清除浮动
    • 给父元素设置固定高度（不灵活，不推荐）

四、手写案例

1. 三角形

  • 利用border属性：通过创建一个宽度和高度均为 0 的元素，并为其设置不同颜色的border。由于元素本身没有内容区域，其边框会直接交汇于中心点。通过指定其中两条边框为透明，只留下需要形成三角形的那一条或两条边框有颜色，从而形成一个三角形形状。
  • 使用 linear-gradient 作为背景：通过设置元素的background-image属性为一个线性渐变（linear-gradient），并通过控制渐变的角度、颜色起止位置以及透明度，使得渐变仅显示为两种颜色的边缘过渡，从而形成三角形的效果。
  • 使用SVG绘制（代码略复杂）
// 1.利用border属性
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(139, 121, 243);
}
// 2.利用渐变
 .triangle {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right bottom, red 50%, transparent 50%);
 }

2. 扇形

  • 利用border
  • 使用 conic-gradient ()锥形渐变实现
  • 利用SVG（较复杂）
  • 使用clip-path剪裁（较复杂）
//1.border
 .pie {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right-color: red;
    border-radius: 50%;
 }
 // 锥形渐变
 .pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        red 0deg,
        red 120deg, /* 扇形结束角度 */
        blue 120deg, /* 扇形结束角度 */
        blue 360deg /* 或 0deg */
    );
}

3. 1px问题

  • 产生原因：
    • 设备像素比不同：CSS 中的 1px 问题主要出现在移动端，大多数机型的 DPR 不是 1，如 iPhone 的 DPR 普遍是 2 和 3。这意味着在 CSS 中设置的 width:1px，在物理像素中可能对应的是 2px 或 3px，从而导致边框看起来变粗。
    • 用户缩放导致：当用户对页面进行缩放操作时，CSS 中 1px 所代表的物理像素也会相应地增加或减少。例如，将页面放大一倍，那么 CSS 中 1px 所代表的物理像素也会增加一倍。
  • 解决方案
// 1. 使用视口单位和rem
html{
    font-size: 16px; /*基准值，根据设备屏幕宽度调整*/
}
.border{
    border: 0.05rem solid #000; /*0.05rem约等于1px*/
}

// 2.使用border-image：专门制作一个边框图像
// 3. 0.5px边框：在设备像素比为2或者更高时使用0.5px边框（注意：这种方法需要确保设备支持 0.5px 边框，部分安卓浏览器和 iOS8 及以下版本不支持该写法）
.border{
    border:1px solid #bbb;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){
   .border{
        border-width:0.5px;
    }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

conda/pip基本常用命令理解与整理

conda/pip基本常用命令理解与整理

最近配置了两轮pytorch环境&#xff0c;由于要频繁用到各种conda和pip命令&#xff0c;所以再此整理一下。 文章目录 前言&#xff1a;conda虚拟环境总结与解读Conda和pip的理解区别和联系命令格式 conda环境命令查看创建和删除导出与导入激活和退出 包管理命令安装和删除文件批…
阅读更多...
协方差矩阵

协方差矩阵

协方差矩阵是一个对称矩阵&#xff0c;用来描述多个随机变量之间的协方差关系。协方差反映了两个随机变量如何共同变化的趋势&#xff0c;协方差矩阵将这种关系扩展到了多维数据。 1. 定义 假设有一个 n 维随机向量 &#xff0c;协方差矩阵 Σ 定义为&#xff1a; 其中&#…
阅读更多...
6 分布式限流框架

6 分布式限流框架

限流的作用 在API对外互联网开放的情况下&#xff0c;是无法控制调用方的行为的。当遇到请求激增或者黑客攻击的情况下&#xff0c;会导致接口占用大量的服务器资源&#xff0c;使得接口响应效率的降低或者超时&#xff0c;更或者导致服务器宕机。 限流是指对应用服务进行限制…
阅读更多...
LINUX 下 NODE 安装与配置

LINUX 下 NODE 安装与配置

一、官网地址&#xff1a; &#xff08;中文网&#xff09;https://nodejs.cn/ &#xff08;英文网&#xff09;https://nodejs.org/en/ 二、下载安装包 2.1、下载地址&#xff1a;下载 | Node.js 中文网 https://nodejs.cn/download/ 2.2、使用 wget 命令下载到linux 服务器…
阅读更多...
Qt重写webrtc的demo peerconnection

Qt重写webrtc的demo peerconnection

整个demo为&#xff1a; 可以选择多个编码方式&#xff1a; cmake_minimum_required(VERSION 3.5)project(untitled LANGUAGES CXX) set(CMAKE_CXX_STANDARD 20) set(CMAKE_INCLUDE_CURRENT_DIR ON)set(CMAKE_AUTOUIC ON) set(CMAKE_AUTOMOC ON) set(CMAKE_AUTORCC ON)set(CMA…
阅读更多...
el-tabs中tabs过多造成form表单输入的时候卡顿

el-tabs中tabs过多造成form表单输入的时候卡顿

这里写自定义目录标题 tabs过多造成的输入卡顿解决方案方案一方案二 出现的并发问题解决方案 tabs过多造成的输入卡顿 描述&#xff1a;前端要写一个需求&#xff0c;大概有一百多个tab渲染过来&#xff0c;每个tab中都是一个表单&#xff0c;这个时候数据渲染任务加重&#x…
阅读更多...
【python/html/js 鼠标点选/框选图片内容】

【python/html/js 鼠标点选/框选图片内容】

html代码 注意修改图片地址&#xff0c;坐标会保存为coordinates.json <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0&q…
阅读更多...
Zustand selector 发生 infinate loops的原因以及解决

Zustand selector 发生 infinate loops的原因以及解决

Zustand selector 发生 infinate loops 做zustand tutorial project的时候&#xff0c;使用选择器方法引入store&#xff0c;出现Maximum update depth exceeded,也就是组件一直重新渲染&#xff0c;改成直接使用store就没有不会出现这个问题。如下&#xff1a; // const [xIs…
阅读更多...
AngularJs指令中出错：Error: $compile:nonassign Non-Assignable Expression

AngularJs指令中出错：Error: $compile:nonassign Non-Assignable Expression

Expression {resumeId: item.resumeId} used with directive rwdsDelete is non-assignable! 在AngularJS中&#xff0c;$compile服务用于将指令编译成HTML。当你在模板中使用了一个表达式&#xff0c;但这个表达式不是一个左值&#xff08;即不能被赋值的表达式&#xff09;时…
阅读更多...
moviepy 将mp4视频文件提取音频mp3 - python 实现

moviepy 将mp4视频文件提取音频mp3 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” -------------------------------------------------------------…
阅读更多...
openssl编译

openssl编译

关于windows下&#xff0c;openssl编译 环境准备 安装 perl:https://djvniu.jb51.net/200906/tools/ActivePerl5_64.rar安装nasm&#xff1a;https://www.nasm.us/pub/nasm/releasebuilds/2.13.01/win64/nasm-2.13.01-installer-x64.exe下载opensll源码&#xff1a;https://o…
阅读更多...
QT c++ 样式 设置 标签(QLabel)的渐变色美化

QT c++ 样式 设置 标签(QLabel)的渐变色美化

上一篇文章中描述了按钮的纯色&#xff0c;本文描述标签的渐变色美化。 1.头文件 #ifndef WIDGET_H #define WIDGET_H #include <QWidget> //#include "CustomButton.h"#include <QVBoxLayout> #include <QLinearGradient> #include <QLabel…
阅读更多...
学习打怪日记

学习打怪日记

目录 0 关于1 SpringBoot上传大文件抛出异常&#xff1a;MaxUploadSizeExceededException2 SpringBoot警告&#xff1a;HikariPool-1 - Failed to validate connection com.mysql.cj.jdbc.ConnectionImpl6221f160 (No operations allowed after connection closed.). Possibly …
阅读更多...
xss-labs关卡记录15-20关

xss-labs关卡记录15-20关

十五关 随便传一个参数&#xff0c;然后右击查看源码发现&#xff0c;这里有一个陌生的东西&#xff0c;就是ng-include。这里就是&#xff1a; ng-include指令就是文件包涵的意思&#xff0c;用来包涵外部的html文件&#xff0c;如果包涵的内容是地址&#xff0c;需要加引号。…
阅读更多...
（五）ROS通信编程——参数服务器

（五）ROS通信编程——参数服务器

前言 参数服务器在ROS中主要用于实现不同节点之间的数据共享&#xff08;P2P&#xff09;。参数服务器相当于是独立于所有节点的一个公共容器&#xff0c;可以将数据存储在该容器中&#xff0c;被不同的节点调用&#xff0c;当然不同的节点也可以往其中存储数据&#xff0c;关…
阅读更多...
自动化测试框架搭建-数据库方法连接-初阶

自动化测试框架搭建-数据库方法连接-初阶

目的 将数据库连接的步骤封装成一个方法&#xff0c;在需要连接数据库时&#xff0c;传入指定的参数&#xff08;SQL&#xff09;即可实现对数据查询和修改 代码实现 1、编写数据库连接方法 2、导入其他方法中使用步骤一 import pymysqldef mysqlConnetion(Sql):# 数据库连…
阅读更多...
vivado 时钟指南

vivado 时钟指南

时钟指南 每个 FPGA 架构都为时钟提供有专用资源。掌握 FPGA 架构中的时钟资源&#xff0c;使您能够规划好自己的时钟&#xff0c;从而实现时钟 资源的最佳利用。大多数设计无需您了解这些细节。但如果您能够控制布局&#xff0c;同时对每个时钟域上的扇出有良好的思 路&a…
阅读更多...
【微信小程序】回到顶部图标-页面滚动事件 | 漫画-综合实训

【微信小程序】回到顶部图标-页面滚动事件 | 漫画-综合实训

一、回到顶部-页面滚动事件 在微信小程序中&#xff0c;如果你想将“回到顶部”的功能按钮换成图标&#xff0c;你可以通过以下步骤实现&#xff1a; 1. 准备图标 首先&#xff0c;你需要准备一个图标图片。这个图标可以是任何你选择的格式&#xff0c;如 PNG 或 SVG。将图标…
阅读更多...
通过一个含多个包且引用外部jar包的项目实例感受Maven的便利性

通过一个含多个包且引用外部jar包的项目实例感受Maven的便利性

目录 1 引言2 手工构建3 基于Maven的构建4 总结 1 引言 最近在阅读一本Java Web的书籍1时&#xff0c;手工实现书上的一个含多个Packages的例子&#xff0c;手工进行编译、运行&#xff0c;最终实现了效果。但感觉到整个构建过程非常繁琐&#xff0c;不仅要手写各个源文件的编…
阅读更多...
el-tree拖拽光标错位问题

el-tree拖拽光标错位问题

背景&#xff1a;el-tree实现的分类树增加拖拽功能后&#xff0c;当分类树由于数量较多产生滚动条&#xff0c;如果分类树已滚动&#xff0c;进行拖拽时会造成光标错位的问题: 原因&#xff1a;el-tree拖拽光标定位的高度并未加上滚动的高度解决&#xff1a;将滚动的样式属性放…
阅读更多...
最新文章

Copyright @ 2022~2023