面試八股---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
英文地址，請注明出處：http://en.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