面试八股---css

2、css

2.1 说说你对盒子模型的理解

是什么

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

content，即实际内容，显示文本和图像

boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响

margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

分类

标准盒子模型：

width/height 只是内容高度，不包含 padding 和 border值

  • 盒子总宽度 = width + padding + border + margin;
  • 盒子总高度 = height + padding + border + margin

怪异盒子模型:

  • 盒子总宽度 = width + margin;
  • 盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

Box-sizing

定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box|inherit:
  • content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
  • border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
  • inherit 指定 box-sizing 属性的值，应该从父元素继承

2.2 css选择器有哪些？优先级？哪些属性可以继承？

有哪些
  • id选择器（#box），选择id为box的元素
  • 类选择器（.one），选择类名为one的所有元素
  • 标签选择器（div），选择标签为div的所有元素
  • 后代选择器（#box div），选择id为box元素内部所有的div元素
  • 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
  • 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
  • 群组选择器（div,p），选择div、p的所有元素
  • 伪类选择器：:hover ：鼠标指针浮动在上面的元素
  • 伪元素选择器：:before : 选择器在被选元素的内容前面插入内容
  • 属性选择器：[attribute] 选择带有attribute属性的元素
  • 层次选择器（p~ul），选择前面有p元素的每个ul元素
优先级

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • 如果存在内联样式，那么 A = 1, 否则 A = 0
  • B的值等于 ID选择器出现的次数
  • C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
  • D 的值等于 标签选择器 和 伪元素 出现的总次数

比较：

  • 从左往右依次进行比较 ，较大者优先级更高
  • 如果相等，则继续往右移动一位进行比较
  • 如果4位全部相等，则后面的会覆盖前面的

如果外部样式需要覆盖内联样式，就需要使用!important

继承属性

  • 字体系列属性

    font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

  • 文本系列属性

    text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

  • 元素可见性

    visibility

  • 表格布局属性

    caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

  • 列表属性

    list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

  • 引用

    quotes：设置嵌套引用的引号类型

  • 光标属性

    cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

  • a 标签的字体颜色不能被继承
  • h1-h6标签字体的大下也是不能被继承的
无继承
  • display
  • 文本属性：vertical-align(设置元素垂直对齐方式)、text-decoration(文本装饰效果)
  • 盒子模型的属性：宽度、高度、内外边距、边框等
  • 背景属性：背景图片、颜色、位置等
  • 定位属性：浮动、清除浮动、定位position等
  • 生成内容属性：content、counter-reset、counter-increment
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline
  • 页面样式属性：size、page-break-before、page-break-afte

2,3 说说em/px/rem/vh/vw区别?

单位相对基准适用场景
px固定像素精确尺寸（图标、图片）
em父元素字体大小嵌套文本、动态调整
rem根元素字体大小整体响应式设计
vh视窗高度全屏布局、背景
vw视窗宽度自适应容器、响应式设计

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

2.4 说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

概念定义特点适用场景
设备像素屏幕上实际存在的最小物理单位固定，设备出厂后不可变描述屏幕分辨率
CSS像素CSS中使用的逻辑单位相对单位，取决于DPR和缩放比例网页布局和样式设计
设备独立像素虚拟单位，用于抽象设备分辨率与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素跨设备布局设计
DPR设备像素与CSS像素的比值决定一个CSS像素对应多少设备像素高分辨率屏幕适配
PPI每英寸所包含的像素数量衡量屏幕清晰度，PPI越高显示越细腻屏幕显示质量评估

无缩放情况下，1个CSS像素等于1个设备独立像素

设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变

PC端中，1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下）

在移动端中，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

设备像素比（dpr） = 设备像素 / 设备独立像素

每英寸像素（ppi），值越大，图像越清晰

2.5 谈谈你对BFC的理解

BFC形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素.

渲染规则：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
触发条件：
  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed
应用场景：

防止margin重叠：

<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><p>Hehe</p >
</body>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们可以很明显的看到，margin发生了重叠。

因为同一个BFC的俩个相邻的盒子的margin会发生重叠

解决：可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

清除内部浮动：

   <!-- 2、清除内部浮动 --><div class="use2">你好<div class="child"></div><div class="child"></div></div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们可以看到，内部的浮动会影响布局

解决方案：BFC包裹

    .par {border: 5px solid #fcc;width: 300px;overflow: hidden;}

而且BFC在计算高度时，浮动元素也会参与，内部浮动元素计算高度时候也会计算

自适应多栏布局

每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.6 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

一、知道子元素宽高时
  1. 绝对定位 + margin: auto
    • 父元素：设置 position: relative。
    • 子元素：设置 position: absolute，并定义具体的 top、right、bottom、left 值（通常设为 0），然后使用 margin: auto。
    • 原理：子元素通过绝对定位脱离文档流，并占据整个父容器的空间（由 top/right/bottom/left: 0 定义）。margin: auto 会在水平和垂直方向上平均分配剩余空间，从而实现居中。
  2. 表格布局 (Table-Cell)
    • 父元素：设置 display: table-cell，vertical-align: middle，text-align: center。
    • 子元素：设置 display: inline-block。
    • 原理：利用表格单元格的垂直居中（vertical-align: middle）和内联元素的文本居中（text-align: center）特性。
二、都可以
  1. 绝对定位 + transform
    • 父元素：设置 position: relative。
    • 子元素：设置 position: absolute，将 left 和 top 都设置为 50%，然后使用 transform: translate(-50%, -50%) 进行反向偏移。
    • 原理：left: 50% 和 top: 50% 将子元素的 左上角 定位到父容器中心。translate(-50%, -50%) 将子元素自身向左和向上移动自身宽高的 50%，使其中心点与父容器中心对齐。
  3. Flexbox 布局
    • 父元素：设置 display: flex，justify-content: center（水平居中），align-items: center（垂直居中）。
  5. Grid 布局
    • 父元素：设置 display: grid，justify-items: center（或 justify-content: center），align-items: center（或 align-content: center）。

2.7 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

 <style>.demo1 {width: 100%;height: 200px;display: flex;align-items: center;}.demo1 .right {flex: 1;background-color: blue;height: 100%;}.demo1 .main {width: 60%;background-color: pink;height: 100%;}.demo2 {display: flex;align-items: center;width: 100%;height: 200px;}.demo2 .content {flex: 1;background-color: green;height: 100%;}.demo2 .left {width: 30%;height: 100%;background-color: red;}.demo2 .right {background-color: blueviolet;width: 40%;height: 100%;}</style>
</head><body><div class="demo1"><div class="main">我是main</div><div class="right">右侧自适应</div></div><div class="demo2"><div class="left">我是左侧</div><div class="content">我是中间部分</div><div class="right">我是右侧</div></div></body>
  • 两栏布局中，右侧使用 flex: 1 实现自适应。
  • 三栏布局中，中间部分使用 flex: 1 实现自适应。

2.8 说说flexbox（弹性盒布局模型）,以及适用场景？

默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向

属性

父元素：

  • flex-direction：决定主轴的方向
  • flex-wrap：是否可换行
  • flex-flow：是flex-direction属性和flex-wrap属性的简写形式
  • justify-content：主轴上的对齐方式
  • align-items：交叉轴上如何对齐
  • align-conten：多根轴线的对齐方式

子元素：

  • order：定义项目的排列顺序
  • flex-grow：项目的放大比例
  • flex-shrink：项目的缩小比例
  • flex-basis：主轴上的初始尺寸
  • flex：flex-grow, flex-shrink 和 flex-basis的简写
  • align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

2.9 grid布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

属性：

display :grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

grid-template-areas 属性:用于定义区域，一个区域由一个或者多个单元格组成

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

2.9 CSS3新增了哪些新特性

1.选择器的增强

CSS3引入了更多灵活和精确的选择器，包括：

  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

2.新样式

边框与圆角

  • 圆角边框：通过 border-radius 属性，可以轻松为元素添加圆角，甚至创建圆形或椭圆形边框。例如：

  • 阴影效果：使用 box-shadow 为元素添加阴影，增强页面的层次感；text-shadow 则用于为文本添加阴影效果。例如：

背景

CSS3支持两种渐变方式：

  • 线性渐变：通过 linear-gradient 创建从左到右、从上到下或对角线方向的渐变。
  • 径向渐变：通过 radial-gradient 创建圆形或椭圆形的渐变效果。
  • background-clip：用于确定背景画区
  • background-origin:当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的
  • background-size:background-size属性常用来调整背景图片的大小，主要用于设定图片本身。

字体与文本效果

  • 自定义字体：通过 @font-face 规则，可以引入外部字体文件，丰富文本样式。
  • 文本阴影：使用 text-shadow 为文本添加阴影效果。
  • 文本溢出控制：例如 text-overflow: ellipsis 可以在文本溢出时显示省略号。

3.transition过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

4.treansform转换

  • transform: translate(120px, 50%)：位移
  • transform: scale(2, 0.5)：缩放
  • transform: rotate(0.5turn)：旋转
  • transform: skew(30deg, 20deg)：倾

5.animation动画

animation也有很多的属性

  • animation-name：动画名称
  • animation-duration：动画持续时间
  • animation-timing-function：动画时间函数
  • animation-delay：动画延迟时间
  • animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
  • animation-direction：动画执行方向
  • animation-paly-state：动画播放状态
  • animation-fill-mode：动画填充模式

2.10 css动画

transition实现渐变动画：

transition的属性如下：

  • property:填写需要变化的css属性
  • duration:完成过渡效果需要的时间单位(s或者ms)
  • timing-function:完成效果的速度曲线
  • delay: 动画效果的延迟触发时间

transform转变动画：

包含四个常用的功能：

  • translate：位移
  • scale：缩放
  • rotate：旋转
  • skew：倾斜

和transition配合使用

animation实现自定义动画：

通过 @keyframes 来定义关键帧

     animation: name duration timing-function delay iteration-count direction fill-mode;

总结

属性含义
transition（过度）用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）只是transform的一个属性值，即移动
animation（动画）用于设置动画属性，他是一个简写的属性，包含6个属性

2.11 怎么理解回流跟重绘？什么场景下会触发？

  • 回流：就像移动或改变了一个物体的形状或大小，导致它周围或内部的其他元素也需要跟着移动或改变。浏览器需要重新计算元素在页面中的几何结构（位置和尺寸），然后重新绘制。
  • 重绘：就像给一个物体重新上色，但物体的形状和大小没变。浏览器只是重新绘制了元素的外观。

浏览器渲染规则：

  • 解析HTML，生成DOM树，解析CSS，生成CSSOM树
  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
  • Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
  • Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  • Display:将像素发送给GPU，展示在页面上

触发回流的场景（通常也会触发重绘）：

  1. 添加或删除可见的DOM元素： 比如动态添加一个<div>或者移除一个元素。
  2. 元素位置改变： 比如改变margin、padding、left、top等属性。
  3. 元素尺寸改变： 比如改变width、height、font-size等。
  4. 内容变化： 比如用户在<input>中输入文字，或者动态修改了元素的innerHTML。
  5. 浏览器窗口大小改变： 比如用户调整浏览器窗口大小，导致需要重新计算布局。
  6. 改变了影响布局的CSS属性： 比如设置display: none（彻底隐藏并移出文档流）、改变float、position等。
  7. 滚动页面： 浏览器需要不断计算可见区域内的元素布局。

只触发重绘的场景（不改变元素大小和位置）：

  1. 改变元素的背景色、文字颜色。
  2. 改变元素的透明度（opacity）。
  3. 改变元素的边框颜色。

2.12 什么是响应式设计？响应式设计的基本原理是什么？如何做？

什么是响应式设计：

是一种网页设计方法，旨在使网站能够根据用户设备的屏幕尺寸、分辨率和方向自动调整布局和内容，

响应式设计的基本原理是什么：

流式布局（Fluid Grids）

使用相对单位（如百分比、em、rem）代替固定单位（如像素），使页面元素能够根据屏幕尺寸自动调整大小。

媒体查询（Media Queries）

使用CSS3的媒体查询功能，根据设备的特性（如屏幕宽度、分辨率）应用不同的样式规则。

视口设置（Viewport）

通过设置视口元标签，确保页面内容根据设备屏幕动态缩放

如何实现：

CSS框架、Flexbox/Grid布局、响应式图片和断点设置

2.13 如果要做优化，CSS提高性能的方法有哪些？

  • 内联首屏关键CSS

    页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

  • 异步加载CSS:在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染

    • 使用javascript将link标签插到head标签最后

  • 资源压缩

    利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩

  • 合理使用选择器

    • 不要嵌套使用过多复杂选择器，最好不要三层以上
    • 使用id选择器就没必要再进行嵌套
    • 通配符和属性选择器效率最低，避免使用

  • 减少使用昂贵的属性

    box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

  • 不要使用@import

    @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

2.14 如何实现单行／多行文本溢出的省略样式？

单行文本：

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
  • white-space：设置文字在一行显示，不能换行
  • overflow：文字长度超出限定宽度，则隐藏超出的内容

多行文本：

  • -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
  • display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
  • overflow: hidden：文本溢出限定的宽度就隐藏内容
  • text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

2.15 如何使用css完成视差滚动效果?

什么是视差滚动：

多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的

background-attachment：作用是设置背景图像是否固定或者随着页面的其余部分滚动

完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。背景一开始就已经被固定在初始的位置。

2.16 CSS如何画一个三角形？原理是什么？

在CSS中，我们可以利用元素的边框（border）来画一个三角形。具体做法是：

  1. 设置元素尺寸为0：把元素的 width 和 height 都设为 0，这样它本身不占空间。
  2. 利用边框斜角：给元素的三个边框设置宽度，并让它们都变成透明的（solid transparent）。然后给剩下的一个边框设置一个具体的颜色（比如 solid red）。
  3. 形成三角形：因为只有一条边框是有颜色的，另外两条是透明的，这三条边框的斜角就会自然地组合在一起，形成一个三角形的视觉效果。”

原理上，这其实是利用了边框在元素角落交汇时形成的斜角。当三条边框中有两条是透明的时候，有颜色的那条边框的斜角就“露”了出来，看起来就像一个三角形。

2.17 说说对Css预编语言的理解？有哪些区别?

CSS预处理器是一种扩展CSS的工具，它允许我们使用更高级的语法（如变量、嵌套、混入、函数等）来编写样式，这些代码在编译后会转换为标准的CSS，供浏览器使用。常见的预处理器包括Sass、Less和Stylus

有哪些：

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

  • sass
  • less
  • stylus

不同点：

  1. 语法差异
  • Sass：支持两种语法，SCSS（类似CSS，使用花括号和分号）和缩进语法（不使用花括号和分号，类似Python）。
  • Less：语法接近CSS，使用花括号和分号。
  • Stylus：语法非常灵活，可以省略花括号和分号，也可以使用类似CSS的写法。
  1. 变量定义
  • Sass：使用 $ 符号定义变量。
  • Less：使用 @ 符号定义变量。
  • Stylus：可以使用 $ 或 = 定义变量。
  1. 适用场景
  • Sass：功能全面，适合大型复杂项目。
  • Less：语法简单，适合中小型项目。
  • Stylus：语法灵活，适合实验性开发或需要快速调整的项目。

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

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

相关文章

day52-硬件学习之RTC及ADC

day52-硬件学习之RTC及ADC

一、RTCRTC&#xff08;实时时钟&#xff09;&#xff1a;非易失性在IMX6ULL内部SNVS&#xff08;安全的非易失性存储器&#xff09;提供RTC功能&#xff1b;原理图&#xff1a;二、ADC 2.1 基本概念ADC(模拟数字转换器)&#xff1a;用于将连续变化的模拟信号转换为离散的数字信…
阅读更多...
Web 项目如何自动化测试？

Web 项目如何自动化测试？

Web 项目的自动化测试可以通过 UI自动化 和 接口自动化 结合实现&#xff0c;提高测试效率和覆盖率。以下是关键方法和工具&#xff1a; 【自动化测试】从基础到实战基于Pytest自动化/python自动化的详细教程&#xff01;1. UI自动化测试&#xff08;前端交互&#xff09; 适用…
阅读更多...
Java连接阿里云MaxCompute例

Java连接阿里云MaxCompute例

要使用Java连接阿里云MaxCompute&#xff08;原名ODPS&#xff09;数据库&#xff0c;您可以遵循以下步骤进行配置和编程&#xff1a; 1. 添加依赖 确保您的项目中包含了MaxCompute JDBC驱动的依赖。如果您使用Maven&#xff0c;可以在pom.xml中添加如下依赖&#xff1a; &l…
阅读更多...
【网络与系统安全】强制访问控制——BLP模型

【网络与系统安全】强制访问控制——BLP模型

一、模型背景与定义 BLP&#xff08;Bell-LaPadula&#xff09;模型是由David Bell和Len Adula在1973年提出的强制访问控制&#xff08;MAC&#xff09;模型&#xff0c;是最早的计算机安全模型之一&#xff0c;主要用于解决多用户系统中的信息机密性保护问题&#xff0c;尤其…
阅读更多...
HTTPS详解：原理 + 加解密过程 + 面试问答

HTTPS详解：原理 + 加解密过程 + 面试问答

一、HTTP 与 HTTPS 的区别 项目HTTPHTTPS全称HyperText Transfer ProtocolHyperText Transfer Protocol Secure端口80443协议层应用层应用层 TLS&#xff08;安全层&#xff09;加密方式明文传输加密传输&#xff08;TLS&#xff09;安全性易被劫持、中间人攻击可加密、防篡改…
阅读更多...
Python-GUI-wxPython-控件

Python-GUI-wxPython-控件

1 需求 2 接口 3.* 控件&#xff1a;wx.StaticText import wxclass MainFrame(wx.Frame):def __init__(self, *args, **kwargs):super(MainFrame, self).__init__(*args, **kwargs)self.init_ui()self.Center()self.Maximize()def init_ui(self):static_text wx.StaticText(pa…
阅读更多...
3-1 PID算法改进（积分部分）

3-1 PID算法改进（积分部分）

目录 1、积分限幅 2、积分分离 3、变速积分 在位置式PID的基础上进行改进 定速用PI控制&#xff0c;定位置用PD控制 1、积分限幅 在定速控制上体现 第一种方法确定上下限方法&#xff1a;Out最大时&#xff0c;除以Ki&#xff0c;得到一个值&#xff0c;上限不能超过这个…
阅读更多...
Linux探秘坊-------13.进程间通信

Linux探秘坊-------13.进程间通信

1.进程间通信⽬的 2.管道 2.1 匿名管道 -----通常用来实现 父子通信 创建子进程时&#xff0c;需要把父进程的进程内容全部拷贝一份&#xff0c;但文件管理是不需要拷贝的 但是我们把父进程的文件描述符表给拷贝下来了&#xff0c;文件描述符表里是一堆指针&#xff0c;他们仍…
阅读更多...
深入理解Vapnik-Chervonenkis(VC)维度：机器学习泛化能力的理论基础

深入理解Vapnik-Chervonenkis(VC)维度：机器学习泛化能力的理论基础

引言 通过本篇阅读,从理论上去理解为什么: 要选择复杂度低的模型 过拟合的时候,增加样本量有用 以及如何根据样本量选择特征个数 PAC机器学习框架, VC 维是机器学习最重要的基础理论之一 在机器学习领域&#xff0c;模型泛化能力是衡量算法性能的核心指标…
阅读更多...
redis持久化-纯缓存模式

redis持久化-纯缓存模式

redis持久化-纯缓存模式 文档 redis单机安装redis常用的五种数据类型redis数据类型-位图bitmapredis数据类型-基数统计HyperLogLogredis数据类型-地理空间GEOredis数据类型-流Streamredis数据类型-位域bitfieldredis持久化-RDBredis持久化-AOFredis持久化-RDBAOF混合模式 官…
阅读更多...
HTML DOM 访问

HTML DOM 访问

HTML DOM 访问 引言 HTML DOM&#xff08;文档对象模型&#xff09;是现代Web开发中不可或缺的一部分。它允许开发者通过JavaScript操作HTML文档中的元素&#xff0c;从而实现丰富的交互效果。本文将详细介绍HTML DOM的访问方法&#xff0c;包括如何获取元素、如何修改元素属…
阅读更多...
双系统如何做接口认证-V1

双系统如何做接口认证-V1

现有A系统&#xff0c;B系统&#xff0c;A系统启动的时候调用B系统的注册接口API1&#xff08;把A系统配置信息注册到B系统&#xff09;&#xff0c;A系统定时向B系统接口AP2发送心跳信息&#xff0c;B系统根据业务情况&#xff0c;调用A系统的业务接口AP3&#xff0c;请设计两…
阅读更多...
Wireshark TS | 诡异的光猫网络问题

Wireshark TS | 诡异的光猫网络问题

前言 来自于朋友分享的一个案例&#xff0c;最后定位的原因是光猫问题&#xff0c;而类似这类的设备所产生的网络问题&#xff0c;也曾碰到过两三次&#xff0c;但这一次的数据包现象挺特别&#xff0c;分析思路和过程也有所不同&#xff0c;故记录分享一下。 问题背景 用户所反…
阅读更多...
mac mini m4安装node.js@16以下版本方法

mac mini m4安装node.js@16以下版本方法

设备&#xff1a;mac mini m4 目的&#xff1a;使用nvm 安装 node.js14.x 版本 结果&#xff1a;安装不上 原因&#xff1a;Node.js 14 发布时&#xff0c;Apple Silicon&#xff08;M1/M2&#xff09;尚未普及&#xff0c;因此 没有官方预编译的 macOS ARM64 版本 处理方案&am…
阅读更多...
系统安全设计方案，软件系统安全设计方案

系统安全设计方案，软件系统安全设计方案

1.1 总体设计 1.1.1 设计原则 1.2 物理层安全 1.2.1 机房建设安全 1.2.2 电气安全特性 1.2.3 设备安全 1.2.4 介质安全措施 1.3 网络层安全 1.3.1 网络结构安全 1.3.2 划分子网络 1.3.3 异常流量管理 1.3.4 网络安全审计 1.3.5 网络访问控制 1.3.6 完整性检查 1.…
阅读更多...
Python入门Day3

Python入门Day3

Python的基础数据类型 1.Python中提供了六种内置的数据类型&#xff0c;一般用于存储数据&#xff1a; –数值Number –字符串String –列表List –元组Tuple –字典Dictionary –集合Set 2.Python中的数据类型可以做以下几个分类&#xff1a; –有序&#xff1a;可以使用下标…
阅读更多...
前端富文本添加录音功能方案

前端富文本添加录音功能方案

为富文本编辑器添加录音功能可以增强内容创作的多样性。以下是几种实现方案&#xff1a; 方案一&#xff1a;基于Web Audio API原生实现 实现步骤获取用户麦克风权限 navigator.mediaDevices.getUserMedia({ audio: true }).then(stream > { /* 处理音频流 */ }).catch(err …
阅读更多...
解锁阿里云Hologres：开启实时数据分析新时代

解锁阿里云Hologres：开启实时数据分析新时代

引言在当今这个数字化浪潮汹涌澎湃的大数据时代&#xff0c;数据就如同企业和组织的 “数字石油”&#xff0c;成为了最具价值的资产之一。随着信息技术的飞速发展&#xff0c;各行业所产生和收集的数据量正以指数级的速度增长&#xff0c;从社交媒体上的用户互动信息&#xff…
阅读更多...
python学习打卡day59

python学习打卡day59

DAY 59 经典时序预测模型3 知识点回顾&#xff1a; SARIMA模型的参数和用法&#xff1a;SARIMA(p, d, q)(P, D, Q)m模型结果的检验可视化&#xff08;昨天说的是摘要表怎么看&#xff0c;今天是对这个内容可视化&#xff09;多变量数据的理解&#xff1a;内生变量和外部变量多变…
阅读更多...
java中agent的作用

java中agent的作用

一 java中agent1.1 agent-javaagent 是 Java 虚拟机 (JVM) 提供的一个启动参数&#xff0c;用于在 Java 程序 main 方法执行之前&#xff0c;加载一个特殊的 Java 代理程序&#xff08;Java Agent&#xff09;。它的核心作用是对运行中的 Java 程序进行字节码层面的动态修改、监…
阅读更多...
最新文章

Copyright @ 2022~2023