整理 45 道 CSS 基礎面試題（附答案）

来源:https://www.cnblogs.com/lhh520/archive/2018/04/27/8962086.html
-Advertisement-
Play Games

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？ 標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin 2、box-sizing ...


1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

2、box-sizing屬性？

用來控制元素的盒子模型的解析模式，預設為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

3、CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

不可繼承的樣式：border, padding, margin, width, height

優先順序（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先順序高

4、CSS優先順序演算法如何計算？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標簽：1000

  1. !important聲明的樣式優先順序最高，如果衝突再進行計算。

  2. 如果優先順序相同，則選擇最後出現的樣式。

  3. 繼承得到的樣式的優先順序最低。

5、CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制項的禁用狀態。
:checked 單選框或覆選框被選中。

6、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

div：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮動元素的上下左右居中

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

絕對定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

還有更加優雅的居中方式就是用flexbox

7、display有哪些值？說明他們的作用?

inline（預設）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block

8、position的值？

static（預設）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視視窗。

9、CSS3有哪些新特性？

  1. RGBA和透明度

  2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

  3. word-wrap（對長的不可分割單詞換行）word-wrap：break-word

  4. 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

  5. font-face屬性：定義自己的字體

  6. 圓角（邊框半徑）：border-radius 屬性用於創建圓角

  7. 邊框圖片：border-image: url(border.png) 30 30 round

  8. 盒陰影：box-shadow: 10px 10px 5px #888888

  9. 媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性

10、請解釋一下CSS3的flexbox（彈性盒佈局模型）,以及適用場景？

該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作。
試用場景：彈性佈局適合於移動前端開發，在Android和ios上也完美支持。

11、用純CSS創建一個三角形的原理是什麼？

首先，需要把元素的寬度、高度設為0。然後設置邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12、一個滿屏品字佈局如何設計?

第一種真正的品字：

  1. 三塊高寬是確定的；

  2. 上面那塊用margin: 0 auto;居中；

  3. 下麵兩塊用float或者inline-block不換行；

  4. 用margin調整位置使他們居中。

第二種全屏的品字佈局:
上面的div設置成100%，下麵的div分別寬50%，然後使用float或者inline使其不換行。

13、常見的相容性問題？

　　1.不同瀏覽器的標簽預設的margin和padding不一樣。*{margin:0;padding:0;}

　　2.IE6雙邊距bug：塊屬性標簽float後，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。

　　3.漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}

　　4.設置較小高度標簽（一般小於10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

　　5.IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。

　　6.Chrome 中文界面下預設會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

　　7.超鏈接訪問過後hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14、為什麼要初始化CSS樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標簽的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

15、absolute的containing block計算方式跟正常流有什麼不同？

無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷：

  1. 若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；

  2. 否則,則由這個祖先元素的 padding box 構成。

如果都找不到，則為 initial containing block。

補充：

  1. static(預設的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）

  2. absolute: 向上找最近的定位為absolute/relative的元素

  3. fixed: 它的containing block一律為根元素(html/body)

16、CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以後什麼區別？

當一個元素的visibility屬性被設置成collapse值後，對於一般的元素，它的表現跟hidden是一樣的。

  1. chrome中，使用collapse值和使用hidden沒有區別。

  2. firefox，opera和IE，使用collapse值和使用display：none沒有什麼區別。

17、display:none與visibility：hidden的區別？

display：none 不顯示對應的元素，在文檔佈局中不再分配空間（迴流+重繪）
visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）

18、position跟display、overflow、float這些特性相互疊加後會怎麼樣？

display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪個方向浮動。
類似於優先順序機制：position：absolute/fixed優先順序最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

19、對BFC規範(塊級格式化上下文：block formatting context)的理解？

BFC規定了內部的Block Box如何佈局。
定位方案：

  1. 內部的Box會在垂直方向上一個接一個放置。

  2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

  3. 每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。

  4. BFC的區域不會與float box重疊。

  5. BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。

  6. 計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發BFC

  1. 根元素，即html

  2. float的值不為none（預設）

  3. overflow的值不為visible（預設）

  4. display的值為inline-block、table-cell、table-caption

  5. position的值為absolute或fixed

20、為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由於浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：

  1. 父元素的高度無法被撐開，影響與父元素同級的元素

  2. 與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

  3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

  1. 父級div定義height

  2. 最後一個浮動元素後加空div標簽 並添加樣式clear:both。

  3. 包含浮動元素的父標簽添加樣式overflow為hidden或auto。

  4. 父級div定義zoom

21、上下margin重合的問題

在重合元素外包裹一層容器，並觸發該容器生成一個BFC。
例子：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下麵是css代碼-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外麵包一個div，通過改變此div的屬性使兩個盒子分屬於兩個不同的BFC，以此來阻止margin重疊*/
            overflow: hidden;  //此時已經觸發了BFC屬性。
        }

22、設置元素浮動後，該元素的display值是多少？

自動變成display:block

23、移動端的佈局用過媒體查詢嗎？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。

  1. <head>裡邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

  2. CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24、使用 CSS 預處理器嗎？
Less sass

25、CSS優化、提高性能的方法有哪些？

  1. 避免過度約束

  2. 避免後代選擇符

  3. 避免鏈式選擇符

  4. 使用緊湊的語法

  5. 避免不必要的命名空間

  6. 避免不必要的重覆

  7. 最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼

  8. 避免！important，可以選擇其他選擇器

  9. 儘可能的精簡規則，你可以合併不同類里的重覆規則

26、瀏覽器是怎樣解析CSS選擇器的？

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢後，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

27、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

使用偶數字體。偶數字型大小相對更容易和 web 設計的其他部分構成比例關係。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），於是略顯稀疏。

28、margin和padding分別適合什麼場景使用？

何時使用margin：

  1. 需要在border外側添加空白

  2. 空白處不需要背景色

  3. 上下相連的兩個盒子之間的空白，需要相互抵消時。

何時使用padding：

  1. 需要在border內側添加空白

  2. 空白處需要背景顏色

  3. 上下相連的兩個盒子的空白，希望為兩者之和。

相容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。

29、元素豎向的百分比設定是相對於容器的高度嗎？

當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

30、全屏滾動的原理是什麼？用到了CSS的哪些屬性？

  1. 原理：有點類似於輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現

  2. overflow：hidden；transition：all 1000ms ease；

31、什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？

響應式網站設計(Responsive Web design)是一個網站能夠相容多個終端，而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

32、視差滾動效果？

視差滾動（Parallax Scrolling）通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。

  1. CSS3實現
    優點：開發時間短、性能和開發效率比較好，缺點是不能相容到低版本的瀏覽器

  2. jQuery實現
    通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
    優點：能相容到各個版本的，效果可控性好
    缺點：開發起來對製作者要求高

  3. 插件實現方式
    例如：parallax-scrolling，相容性十分好

33、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用

  1. 單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。

  2. ::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。並不存在於dom之中，只存在在頁面之中。

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的首碼使用的是單冒號語法，但隨著Web的進化，在CSS3的規範里，偽元素的語法被修改成使用雙冒號，成為::before ::after

34、你對line-height是如何理解的？

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現作用一定是line-height。
單行文本垂直居中：把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中，其實也可以把height刪除。
多行文本垂直居中：需要設置display屬性為inline-block。

35、怎麼讓Chrome支持小於12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36、讓頁面里的字體變清晰，變細用CSS怎麼做？

-webkit-font-smoothing在window系統下沒有起作用，但是在IOS設備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37、position:fixed;在android下無效怎麼處理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？
多數顯示器預設頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

39、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬於字元,這些空白也會被應用樣式，占據空間，所以會有間隔，把字元大小設為0，就沒有空格了。
解決方法：

  1. 可以將<li>代碼全部寫在一排

  2. 浮動li中float：left

  3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40、display:inline-block 什麼時候會顯示間隙？

  1. 有空格時候會有間隙 解決：移除空格

  2. margin正值的時候 解決：margin使用負值

  3. 使用font-size時候 解決：font-size:0、letter-spacing、word-spacing

41、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度

外層div使用position：relative；高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0

42、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有瞭解過webp？

  1. png是攜帶型網路圖片（Portable Network Graphics）是一種無損數據壓縮點陣圖文件格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。

  2. jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。

  3. gif是一種點陣圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果.

  4. webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，相容性不好，目前谷歌和opera支持。

43、style標簽寫在body後與body前有什麼區別？

頁面載入自上而下 當然是先載入樣式。
寫在body標簽後由於瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待載入且解析樣式表完成之後重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

44、CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?

參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大於父元素時出現滾動條。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。

45、闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的位元組。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • web文件上傳的總結（二）改變Apache預設post值來提高文件上傳大小
    上傳的文件大小大於2MB的解決方法 #預設apache 允許上大小2MB #技術經理-->修改apache預設配置 php.ini (授權) (1)複製 php.ini -> php1.ini (2)修改 php.ini (3)停止apache/重啟apache php.ini 生效 file_up ...
  • hybrid
    一，hybrid是什麼，為何用hybrid？ 二，hybrid更新和上線流程 三，hybrid和h5區別 四，前端js和客戶端如何通訊？ 一，hybrid是什麼，為何用hybrid？ 1，文字解釋 hybrid即“混合”，即前端和客戶端的混合開發 需前端開發人員和客戶端開發人員配合完成 某些環節也可 ...
  • JS實現圖片base64轉blob對象，壓縮圖片，預覽圖片，圖片旋轉到正確角度
    base64轉blob對象 壓縮圖片 圖片預覽 詳細圖片預覽可參考地址：《搞清Image載入事件(onload)、載入狀態(complete)後，實現圖片的本地預覽，並自適應於父元素內(完成)》 圖片旋轉到正確的角度（驗證可行） 參考地址： file上傳圖片，base64轉換、壓縮圖片、預覽圖片、將 ...
  • 獲取用戶精準地理位置信息（百度地圖）
    獲取用戶精準地理位置信息步驟： 1.通過 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法獲取經緯度； 2.使用百度地圖坐標轉換介面（http://api.map.baidu.com/geoconv/v1/?c ...
  • 百度前端學院-基礎學院-第四課
    今天是第四天，進度可以，表揚一下自己。 今天的課程目標是：掌握 CSS 稍微複雜的一些選擇器，還有背景，邊框等一些 CSS 樣式屬性。 CSS背景： 背景色：background-color:gray; 背景圖：background-image:url(www.......); 背景顏色漸變： 背景 ...
  • 微信小程式 發現之旅（一）—— 項目搭建與頁面跳轉
    開發微信小程式需要註冊一個小程式賬號，具體流程可以參照官方教程： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 開通賬戶之後，在 “開發設置” 中獲取到 AppID，然後打開開發工具創建項目 一、創建項目 創建項目的時候，建議把 AppId ...
  • JavaScript DOM
    DOM節點 整個文檔是一個文檔節點 整個文檔是一個文檔節點 每個HTML元素是元素節點 每個HTML元素是元素節點 HTML元素內的文本是文本節點 HTML元素內的文本是文本節點 每個HTML屬性是屬性節點 每個HTML屬性是屬性節點 註釋是註釋節點 註釋是註釋節點 HTML DOM節點數 HTML ...
  • 深入淺出理解同步 /非同步/併發/並行/串列
    （1）從線程的時效來看：分為同步和非同步 同步:多個任務情況下，一個任務A執行結束，才可以執行另一個任務B。只存在一個線程。 非同步:多個任務情況下，一個任務A正在執行，同時可以執行另一個任務B。任務B不用等待任務A結束才執行。存在多條線程。 （2）從線程的執行來看：分為串列隊列和並行隊列 串列隊列：串 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類