CSS進階內容——盒子和陰影詳解

来源:https://www.cnblogs.com/qiuluoyuweiliang/archive/2022/07/08/16457368.html
-Advertisement-
Play Games

CSS進階內容 在學習了CSS基本知識之後，我們需要進一步瞭解CSS，因此寫下了這篇文章 當然如果沒有學習之前的知識，可以到我的主頁中查看之前的文章：秋落雨微涼 - 博客園 CSS三大特性 首先我們先來瞭解CSS的三大特點，以便於我們下麵知識點的講解 CSS三大特性包括： 層疊性 繼承性 優先順序 層 ...


CSS進階內容

在學習了CSS基本知識之後，我們需要進一步瞭解CSS，因此寫下了這篇文章

當然如果沒有學習之前的知識，可以到我的主頁中查看之前的文章：秋落雨微涼 - 博客園

CSS三大特性

首先我們先來瞭解CSS的三大特點，以便於我們下麵知識點的講解
CSS三大特性包括：

  • 層疊性
  • 繼承性
  • 優先順序

層疊性

當相同的選擇器設置相同的樣式，卻含有不同的樣式值時，此時一個樣式就會覆蓋掉另一個衝突的樣式，層疊性就是為瞭解決這個問題

層疊性原理：

  • 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
  • 當樣式不衝突時，不發生層疊性

下麵給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>層疊性</title>

    <!-- 對於下方div我們給出兩個div的css設置 -->


    <style>
        /* 下麵這種情況，顏色就出現了層疊性，因就近原則，這裡div呈blue色 */
        /* 同時，font-size因未發生衝突，不產生層疊性 */
        div{
            color: black;
        }
        
        div{
            color: blue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>

繼承性

CSS中的繼承：

  • 當子類未設置對應屬性時，子類繼承成父類的某些樣式（例如：字體顏色，字體大小等）
  • 恰當使用可以簡化代碼，降低css複雜性
  • 子元素只能夠繼承父類的某些樣式（text-，font-，line-這些元素開頭的，以及color屬性）

下麵給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>繼承性</title>

    <!-- 當我們不設置p屬性僅設置div屬性時，p會繼承div的屬性 -->
    <style>
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
    </div>
</body>
</html>

繼承中的特殊屬性-行高：

  • 當繼承行高時，可以採用font：字體大小/字體行高
  • 這裡的行高可以不帶像素px，而直接寫2或1.5表示是字體大小的2倍或1.5倍
  • 這樣我們就可以根據自己的字體大小來調整行高

下麵給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>繼承性</title>

    <!-- 我們可以直接設置行高為字體大小的倍數，以便於後來的開發 -->
    <style>
        div{
            color: pink;
            font: 12px/1.5;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
        <p>123321</p>
    </div>
</body>
</html>

優先順序

當一個元素指向多種選擇器時，會產生優先順序

每種選擇器都具有一定的權重：

選擇器 選擇器權重
繼承或* 0.0.0.0
元素選擇器 0.0.0.1
類選擇器，偽類選擇器 0.0.1.0
ID選擇器 0.1.0.0
行內樣式 1.0.0.0
！important 重要的 無窮大

註意：

  • 權重由四組數決定，無法進位
  • 從前往後比較
  • a鏈接預設制定樣式，若修改需要對a改變

權重疊加：

  • 當採用複合選擇器時，把所有選擇器權重相加
  • ！！！註意：不可進位

盒子模型

盒子模型是我們網路佈局的最基礎元素

網路佈局過程：

  • 先準備相關網頁元素，網頁元素基本都是盒子Box
  • 利用css設計好盒子樣式，並擺放到相應位置
  • 往盒子里裝內容

盒子模型組成部分

盒子模型由四部分組成：

  • 邊框 border
  • 內容 content
  • 內邊距 padding
  • 外邊距 margin

邊框（border）

邊框border可以設置元素的邊框，邊框由三部分組成：邊框寬度，邊框樣式，邊框顏色

語法：

border-color：邊框顏色
border-width：邊框寬度
border-style：邊框款式（solid實線，dashed虛線）
border：顏色 寬度 款式（可以簡化一起設置）

邊框是可以分別設置的：

border-top：上邊框
border-bottom：下邊框
border-left：左邊框
border-right：右邊框

當我們只希望改變一條邊框時，可以先定義全邊框，再定義特別邊框，這樣css就會利用層疊性實現效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子邊框</title>
    <style>
        div {
            height: 30px;
            width: 50px;
            /* 我們先定義全邊框 */
            border: 1px black dashed; 
            /* 隨後定義特殊邊框，採用層疊性覆蓋所需邊框的原本邊框設計 */
            border-top: 2px red solid;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

註意：當兩側都具有邊框時，邊框會匯聚在一起導致邊框效果大打折扣

所以css提供了border-collapse：collapse來合併邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小說排名案例</title>
    <!-- 接下來我們對錶格進行邊框設計 -->

    <style>
        table{
            /* 對table設置一個範圍大小 */
            height: 240px;
            width: 500px;
        }

        table,th,td {
            /* 對全部設置一個邊框以及字體設置 */
            border: 1px solid black;
            /* 
            合併相鄰的邊框 
            當兩側都具有邊框時，中間邊框會變成兩側邊框之和（邊框相聚）
            我們需要採用border-collapse: collapse來合併邊框
            */
            border-collapse: collapse;
            /* 我們稍微設置一下字體以及對齊 */
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>排名</th>
            <th>關鍵詞</th>
            <th>趨勢</th>
            <th>進入搜索</th>
            <th>最近七日</th>
            <th>相關鏈接</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

註意：邊框會影響盒子實際大小

所以我們在設計盒子時需要保留邊框粗細大小

例如：

  • 當我們需要一個總體積為20*20的盒子，且需要邊框2px
  • 那麼我們div的height和width只需設計到18px，然後我們再加上border-width：2px即可

內邊距（padding）

padding屬性用來設計內邊距，即邊框與內容之間的距離

主要分為四個內邊距：

  • padding-top 上內邊距
  • padding-bottom 下內邊距
  • padding-left 左內邊距
  • padding-right 右內邊距

內邊距也存在簡寫方法：

/* 全部內邊距 */
padding： 5px 
/* 上下和左右 */
padding： 5px 10px
/* 上和左右和下 */
padding： 5px 10px 15px
/* 上和右和下和左 */
padding： 5px 10px 15px 20px

註意：padding也會影響盒子的大小

當存在padding時，盒子大小也會相應增加相對大小

所以我們在設計盒子時，同樣也需要留下padding距離的大小

案例：巧妙利用padding設計導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding應用於導航欄</title>

    <style>
        .nav {
            /* 首先給大導航欄設計好高度和邊框和底板顏色，設置line-height使文字始終居中 */
            height: 41px;
            border-top: 3px orange solid;
            border-bottom: 1px #edeefe solid;
            background-color: #edeefea2;
            line-height: 41px;
        }

        a{
            /* 需要先變成行內塊元素才可以具有高度，我們需要高度來形成一個框架，使整個框架都是超鏈接 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            text-decoration: none;
            color:#4c4c4c;
            /* 我們採用padding方法控制超鏈接之間的距離，使其相隔一段距離且不受字體長短影響 */
            padding: 0 20px;
        }

        a:hover{
            /* 我們希望在滑鼠滑動在鏈接上時有明顯顯示 */
            background-color: bisque;
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">設為首頁</a>
        <a href="#">新浪客戶端</a>
        <a href="#">微博</a>
        <a href="#">關註我</a>
    </div>
</body>
</html>

特定情況：當盒子沒有設置height或者width時，padding不會撐開盒子

外邊距（margin）

margin用來設置外邊距，即控制盒子與盒子之間的距離

主要分為四個外邊距：

  • margin-top 上外邊距
  • margin-bottom 下外邊距
  • margin-left 左外邊距
  • margin-right 右外邊距

外邊距和內邊距的簡寫方法也與padding完全相同:

/* 全部內邊距 */
margin： 5px 
/* 上下和左右 */
margin： 5px 10px
/* 上和左右和下 */
margin： 5px 10px 15px
/* 上和右和下和左 */
margin： 5px 10px 15px 20px

外邊距典型應用：使塊級盒子水平居中

要求：

  • 盒子具有寬度width,高度height
  • 盒子內設置margin： 0 auto；（只要保證左右margin是auto就確保居中）

下麵給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塊級元素居中</title>

    <!-- 給盒子設置寬度且盒子的左右margin為auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

接下來我們也稍微介紹一下對於行內塊/行內元素居中的方法：

  • 使其對應的父類元素加上text-align：center即可
  • 因為對於父類來說，行內塊/行內元素屬於父類的內部元素，所以將父類的內部元素居中即可實現行內塊/行內元素居中

下麵給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塊級元素居中</title>

    <!-- 給盒子設置寬度且盒子的左右margin為auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
            /* 在這裡設置text-align即可使內部元素居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <span>123</span>
    </div>
</body>
</html>

嵌套塊元素垂直外邊距塌陷問題：

  • 當出現嵌套關係（父子關係）時，父元素和子元素同時有外邊距時，此時父元素會塌陷較大的外邊距值

解決方案：

  • 為父元素定義一個上邊框:border：1px solid transparent
  • 為父元素定義一個內邊距：padding：1px
  • 為父親添加overflow：hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外邊距塌陷問題</title>

    <!-- 當父類和子類都具有外邊距時，父類會以較大的外邊距為主進行移動 -->
    <!-- 如下所示，父親的外邊距為100px，兒子仍舊緊貼父親 -->
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

註意：因為網頁很多元素都帶有內外邊距，且在各瀏覽器中標準不同，所以我們通常清除內外邊距

我們常常把這行代碼作為css內容的第一行

* {
	padding： 0；
    margin： 0；
}

稍微提一句：行內元素儘量只設置左右內外邊距

案例：BOX模塊案例

讓我們通過HTML和CSS還原下麵這個網頁排版

圖片：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>

    <!-- 正常情況來說，我們分HTML和CSS兩部分書寫，但為了講解簡單，我們放在同一HTML中書寫 -->

    <style>
        /* 第一步，去除內外邊距 */
        * {
            padding: 0;
            margin: 0;
        }
        /* 第二步，設置框架大盒子 */
        .box {
            /* 數據都是採用PS測量，以後你們做項目時也會給出相應值或自己測量 */
            height: 415px;
            width: 298px;
            background-color: rgba(255, 255, 255, 0);
            /* 我們希望把盒子居中顯示 */
            margin: 100px auto;
        }
        /* 第三步：我們設置圖片和盒子一樣寬 */
        .box img {
            width: 100%;
        }
        /* 第四步：設置第一行小字 */
        .review {
            font-family: 微軟雅黑;
            font-size: 14px;
            /* 註意：設置整體高度，使無論多少文字，底部都是對齊的 */
            height: 70px;
            padding: 0 28px;
            margin-top: 30px;
        }
        /* 第五步：設置第二行小字 */
        .appraise {
            font-family: 微軟雅黑;
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 28px;
        }
        /* 第六步：設置最後一行小字，我們分幾部分設置 */

        

        .info {
            font-size: 14px;
            padding: 0 28px;
            margin-top: 15px;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        .info .price {
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 首先我們放入照片 -->
        <img src="案例照片/1.png" alt="圖片">
        <!-- 放入第一行文字 -->
        <p class="review">快遞牛，整體不錯，藍牙都可以秒連</p>
        <!-- 放入第二行文字 -->
        <p class="appraise">來自1923134的評價</p>
        <!-- 最後一行文字 -->
        <p class="info"><span class="name">Redmi AirDots真無線藍...</span><em>|</em><span class="price">99.9元</span></p>
    </div>
</body>
</html>

在這裡插上一句：（因為我自己第一次做時出現了問題所以想向你們提醒一下）

  • 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：h1、h2、h3、h4、h5、h6、p、dt
  • 這裡例如最後一行p，我們不能插入h標題元素

平面佈局改善

除了正常的佈局改善，我們也可以通過其他方法獲得好看的圖形樣式

例如圓角邊框和陰影，就會為我們的Web頁面起到美化的作用

圓角邊框

border-radius就是用來控製圖形四角的曲度

div {
    /*
    border-radius：length;裡面設置的邊角圓的半徑，也可也設置百分比
    如果你想獲得一個圓形，需要把高度寬度設置一致且length設置成圖形直徑的一半即可（）；
    如果你想獲得一個圓角矩形，只需把length設置為高度的一半即可
    註意：這裡的角仍舊可以單獨設置
    當兩個值時順序分別是左上和右下，右上和左下
    當四個值時順序分別是左上，右上，右下，左下
    */
    border-radius：length;
}

盒子陰影

box-shadow用來設置盒子陰影

box-shadow通常有六個內部設置，一般直接簡寫：

  • box-shadow: 水平陰影（px） 垂直陰影（px） 模糊距離（px） 陰影尺寸（px） 顏色（color） 內部/外部（insert/outset）
  • 我們一般常用設置為box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3)
  • 註意：不可以寫outset，outset是預設的，如果寫了會導致陰影失效
  • 註意：陰影不占用盒子大小

下麵我們給出代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子陰影</title>

    <style>
        /* 可以直接設置框架 */
        div {
            height: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }
        /* 
        也可以設置在當移動上才可顯示 
        div:hover {
            height: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }        
        */
        

    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字陰影

text-shadow用來設置盒子陰影

box-shadow通常有四個內部設置，一般直接簡寫：

  • box-shadow: 水平陰影（px） 垂直陰影（px） 模糊距離（px） 顏色（color）
  • 使用不多，瞭解即可

結束語

好的，CSS進階內容—盒子和陰影我們就講到這裡，你是否全部瞭解了呢？

下麵我會介紹浮動定位，敬請期待哦~


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

-Advertisement-
Play Games
更多相關文章
  • 獲取元素的寬高的三種辦法
    本案例代碼背景如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpo ...
  • CSS進階內容—浮動和定位詳解
    CSS進階內容—浮動和定位詳解 我們在學習了CSS的基本知識和盒子之後，就該瞭解一下網頁的整體構成了 當然如果沒有學習之前的知識，可以到我的主頁中查看之前的文章：秋落雨微涼 - 博客園 CSS的三種佈局流派 網頁佈局的本質就是用CSS控制盒子的擺放來形成頁面 CSS提供了三種流派來控制盒子： 普通流 ...
  • Vue2基於elementUi的多級菜單動態生成
    前言 ElementUI官方沒有提供菜單動態生成的案例的，參考ng-design上的菜單動態生成，寫了一個基於ElementUi的菜單動態生成，支持多級菜單。 思路 基本思路就是迴圈子組件，判斷menu是否有children，有就說明至少有二級菜單，需要迴圈子組件，將menu.children作為參 ...
  • 記錄--瀏覽器渲染流程解析
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家可能經常會聽到 css 動畫比 js動畫性能更好這樣的論斷，或者是“硬體加速”，“層提升” 這樣的字眼；要瞭解這些內容就需要對瀏覽器的渲染流程有個大致的瞭解，本文就是我個人對這些內容的一個總結梳理 需要註意的是： 本文僅個人學習總結梳 ...
  • sass的幾種輸出格式，你都知道嗎
    Sass編譯輸出的CSS格式可以自定義。 有4種輸出格式： - :nested – 嵌套格式 - :expanded – 展開格式 - :compact – 緊湊格式 - :compressed – 壓縮格式 ...
  • 前端需要的免費線上api介面
    回想當年剛接觸前端，Ajax 真的碰一次就跪一次。當時不懂後端，不知道 api 是什麼東東，也沒有後端小伙伴寫介面給我測試。 本文整理了我用過的幾個 免費的線上api介面，而且不需要處理跨域等問題。 希望能給剛入門的前端小白在學習 Ajax 時提供一點幫助。 本文列舉的線上介面包括：文本 和 圖片。 ...
  • CSS之行內元素排列之間的縫隙問題及解決方案
    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewp ...
  • 公眾號 H5 測試號 註冊 和 授權 獲取code 前端部分
    @(公眾號測試號H5授權《前端》) Tips：因為申請公眾號需要 ¥300。 so 我用的是測試號。【白嫖永遠不虧】 需要註意的是 測試號是和個人微信號關聯起來的，不是公眾號主體關聯。。也就是每個人都可以申請，而不是必須有公眾號主題才可以。測試號和公眾號是獨立的。 一、前置準備-註冊配置測試賬號 1 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類