深入瞭解CSS中盒子模型

来源:https://www.cnblogs.com/lq0001/archive/2019/12/05/11992092.html
-Advertisement-
Play Games

CSS中盒子模型介紹 什麼是盒子？ 盒子是用來存儲物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？ 有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。 我們怎麼理解 中的盒子呢， 中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 中盒子的主要屬性有 種如： 寬度、 高度、 內邊距、 邊框、 外 ...


CSS中盒子模型介紹

  • 什麼是盒子？
  • 盒子是用來存儲物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？ 有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。
  • 我們怎麼理解CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。
  • CSS中盒子的主要屬性有5種如：width寬度、height高度、padding內邊距、border邊框、margin外邊距。

CSS中盒子模型實踐

  • CSS中盒子模型實踐，給大家看看我們CSS中的盒子長什麼樣。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      /*內邊距就是盒子裡面的內容到邊框的距離*/
      padding: 30px;
      /*這個就是指盒子的外邊框*/
      border: 1px solid red;
      /*這個就是指盒子的外邊距，盒子與盒子之間的距離*/
      margin: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

  • 如何計算一個盒子的總寬度和總高度，筆者那寬度舉例：一個盒子的總寬度=盒子內容寬度 +左右2邊內邊距+左右2邊邊框線。

  • 註意：一個盒子的高度一般情況下不設置高度，因為一個盒子的高度它應該是由其內容來決定的。

padding內邊距介紹

  • padding內邊距的意思就是指的盒子中間的內容與邊框的這段距離。
  • padding內邊距分為4個方向，所以我們能夠設置或描述這4個方向的內邊距。
  • padding內邊距屬性值說明表：
屬性值 描述
padding-top 設置向上的內邊距的距離。
padding-bottom 設置向下的內邊的距距離。
padding-left 設置向左的內邊距的距離。
padding-right 設置向右的內邊距的距離。
padding 設置上下左右內邊距的距離，是上面的屬性值縮寫。

padding內邊距實踐

  • 我們將div標簽設置內邊距，實踐內容如：將div標簽上邊內邊距設置為20px、下邊內邊距設置為30px、左邊邊距設置為40px、右邊內邊距設置為50px。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      border: 1px solid red;
      padding-top: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

padding內邊距縮寫實踐

  • 縮寫是有方向的可以同時表示四個方向，但是這個padding屬性的方向是有順序的，順序規則如：上、右、下、左。
  • padding屬性值有4個，接下來我們就一一試試看看會有什麼效果呢。
  • 我們給padding屬性設置1個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給padding屬性值設置了1個值為：padding: 20px;表示上、右、下、左、方向的內邊距都為20px像素。

  • 我們給padding屬性設置2個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給padding屬性值設置了2個值如：padding: 20px 30px;表示內邊距的（上、下）為20px像素、（左、右）為30px像素。

  • 我們給padding屬性設置3個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給padding屬性值設置了3個值如：padding: 20px 30px 40px;表示內邊距的上為20px像素、（左、右）為30px像素、下為40px像素。

  • 我們給padding屬性設置4個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    div {
       /*這裡的寬度指的就是盒子內容的寬度*/
      width: 100px;
       /*這裡的高度值的就是盒子內容的高度*/
      height: 100px;
      border: 1px solid red;
      padding: 20px 30px 40px 50px;
    }
  </style>
</head>

<body>
  <div>
    微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
  </div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給padding屬性值設置了3個值如padding: 20px 30px 40px 50px;表示內邊距的上為20px像素、右為30px像素、下為40px像素、左為50px像素。

margin外邊距介紹

  • margin外邊距的意思就是指的盒子與盒子之間的距離。
  • margin外邊距分為4個方向，所以我們能夠設置或描述這4個方向的外邊距。
  • margin外邊距屬性值說明表：
屬性值 描述
margin-top 設置向上的外邊距的距離。
margin-bottom 設置向下的外邊的距距離。
margin-left 設置向左的外邊距的距離。
margin-right 設置向右的外邊距的距離。
margin 設置上下左右外邊距的距離，是上面的屬性值縮寫。
auto 自動。

margin上下外邊距實踐

  • 我們將class屬性值為.top元素設置上外邊距為20px像素並且將class屬性值為.bottom設置下外邊距為20px像素。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    .bottom{
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 20px;
    }
    .top{
      width: 100px;
      height: 100px;
      background-color: slateblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
   <div class="bottom"></div>
   <div class="top"></div>
</body>

</html>

  • calss屬性值為.bottom結果圖

  • calss屬性值為.top結果圖

  • 註意：兩張圖有什麼區別呢，事實證明外邊距豎直方向的margin的屬性值不會疊加，它會取最大的屬性值，大家要明白哦。

margin左右外邊距實踐

  • 我們將class屬性值為.right元素設置右外邊距為20px像素並且將class屬性值為.left設置左外邊距為20px像素。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .left{
       background-color: slateblue;
       margin-left: 20px;
     }
     .right{
        background-color: red;
        margin-right: 20px;
     }
  </style>
</head>

<body>
  <span class="right">right</span>
  <span class="left">left</span>
</body>
</html>

  • calss屬性值為.right結果圖

  • calss屬性值為.left結果圖

  • 註意：兩張圖有什麼區別呢，事實證明外邊距水平線方向margin的屬性值會疊加。大家要明白哦。

  • 若想讓豎直方向的margin屬性值疊加外邊距的距離咱也是有辦法如：將要設置margin屬性的元素進行浮動即可，元素浮動之後它的margin屬性值就會疊加，若有讀者朋友不熟悉浮動的可以看看筆者之間發佈的CSS中如果實現元素浮動和清除浮動，看這篇文章就足夠了文章。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box{
       width: 110px;
       border: 2px solid red;
       overflow: hidden;
     }
     .bottom{
       width: 100px;
       height: 100px;
       background-color: slateblue;
       float: left;
       margin-bottom: 20px;
      
     }
     .top{
        width: 100px;
        height: 100px;
        background-color: darkblue;
        float: left;
        margin-top: 20px;
     }
  </style>
</head>

<body>
   <div class="box">
     <div class="bottom"></div>
     <div class="top"></div>
   </div>
</body>

</html>

  • calss屬性值為.bottom結果圖

  • calss屬性值為.top結果圖

margin外邊距縮寫實踐

  • 縮寫是有方向的可以同時表示四個方向，但是這個margin屬性的方向是有順序的，順序規則如：上、右、下、左。
  • margin屬性值有4個，接下來我們就一一試試看看會有什麼效果呢。
  • 我們給margin屬性設置1個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子內容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子內容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給margin屬性值設置了1個值為： margin: 20px;表示上、右、下、左、方向的外邊距都為20px像素。

  • 我們給margin屬性設置2個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子內容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子內容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>

  • 結果圖

  • 註意：假設我們margin屬性值設置了2個值如：margin: 20px 30px;表示外邊距的（上、下）為20px像素、（左、右）為30px像素。

  • 我們給margin屬性設置3個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子內容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子內容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給margin屬性值設置了3個值如：margin: 20px 30px 40px;表示外邊距的上為20px像素、（左、右）為30px像素、下為40px像素。

  • 我們給margin屬性設置4個值實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
     .box {
     /*這裡的寬度指的就是盒子內容的寬度*/
     width: 100px;
     /*這裡的高度值的就是盒子內容的高度*/
     height: 100px;
     background-color: red;
     margin: 20px 30px 40px 50px;
     }
  </style>
</head>

<body>
   <div class="box"></div>
</body>

</html>

  • 結果圖

  • 註意：假設我們給margin屬性值設置了4個值如margin: 20px 30px 40px 50px;表示外邊距的上為20px像素、右為30px像素、下為40px像素、左為50px像素。

margin屬性居中介紹

  • margin屬性值設置為auto，auto表示自動的意思，當左外邊距與右外邊距的值都是auto時那麼這個盒子就會水平居中。
  • 用margin屬性設置水平居中註意事項如：
  • 1、一定要給盒子設置固定的寬高度。
  • 2、只有塊級元素才可以實現水平居中，行內元素不能夠實現水平居中。
  • 3、只有標準文檔流中的盒子才可以使用margin屬性來實現水平居中。
  • 4、margin屬性是用來實現盒子的水平居中，而不是文本的水平居中。

margin屬性值為auto實踐

  • 我們將使用margin屬性值為auto實現盒子水平線左居中的實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
         margin-left:auto;
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>

  • 結果圖

  • 我們將使用margin屬性值為auto實現盒子水平線居中的實踐。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left:auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>

  • 結果圖

  • 註意：margin屬性值為auto設置上下外邊距不起任何作用。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom:auto;
        margin-top: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>

  • 結果圖

註意事項一

  • 用實踐來證明為什麼：一定要給盒子設置固定的寬高度。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
   
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <div class="box">
   </div>
</body>

</html>

  • 結果圖

  • 註意：如果該元素沒有設置固定的寬度，那麼該元素會占據其父元素的100%寬度，所以不能夠實現水平線居中。

    註意事項二

  • 用實踐來證明為什麼：只有塊級元素才可以實現水平居中，行內元素不能夠實現水平居中。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     
     }
  </style>
</head>

<body>
   <span class="box">微笑是最初的信仰
   </span>
</body>

</html>

  • 結果圖

  • 註意：因為行內元素不能設置寬度，所以無法實現水平線居中。

註意事項三

  • 用實踐來證明為什麼：只有標準文檔流中的盒子才可以使用margin屬性來實現水平居中。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        float: left;
     }
  </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

  • 結果圖

  • 註意：筆者給class屬性值為.box設置了一個float: left;左浮動，浮動的元素已經脫離了標準文檔流，所以無法實現水平線居中。

註意事項四

  • 用實踐來證明為什麼：margin屬性是用來實現盒子的水平線居中，而不是盒子的內容文本水平線居中。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>

  • 結果圖

註意事項五

  • 如果想讓文本居中怎麼辦呢，使用text-align屬性並且屬性值為center才可以實現文本水平線居中。

  • 代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子模型</title>
  <style>
    
     .box{
        width: 200px;
        height: 100px;
        background-color: red;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
     }
  </style>
</head>

<body>
   <div class="box">
     微笑是最初的信仰
   </div>
</body>

</html>

  • 結果圖


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

-Advertisement-
Play Games
更多相關文章
  • delete誤刪數據使用SCN恢復
    參考51CTO博客 問題描述：使用scn號恢復誤刪數據 1.查詢系統閃回的scn值以及當前日誌的scn值，因為我這個是測試，創建的表是在在後邊，所以scn值要大於下邊這兩個scn值，所以對我恢複數據沒有用，如果我創建的數據是在下邊這兩個SCN值之前，也就是比這兩個時間點SCN值小，就可以用這兩個sc ...
  • centos_mysql 安裝腳本
    #!/bin/bash env echo "Download msyql5.7 rpm..." sudo yum install wget wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm ... ...
  • 解決Android調用相機拍照，要報“打開相機失敗”查看debug日誌顯示“setParameters failed”的問題
    使用CameraLibrary項目，在部分手機或平板上不能正常使用，要報“打開相機失敗”查看debug日誌顯示“setParameters failed”。 找到CameraView.java中的setCameraParameters方法，註釋掉 //自動聚焦模式 //parameters.setF ...
  • Android利用碎片fragment實現底部標題欄(Github模板開源)
    在安卓開發當中，一個十分重要的佈局則是底部標題欄了，擁有了底部標題欄，我們就擁有了整個軟體UI開發的框架，一般而言，整個軟體的佈局首先就是從底部標題欄開始構建，然後再開始其他模塊的編寫，組成一個完善的軟體，那麼如何才能夠編寫一個底部標題欄呢，我這裡使用了碎片來實現，當然是碎片的動態載入的方式，靜態加 ...
  • Android 再次打開APP進入按Home鍵退出時的界面（thisTaskRoot）
    問題 Android 設置頁面的啟動模式為 singletask 之後，當按Home 退出時，再重新打開應用，還會進入首啟動頁。就會造成一些應用需要重新登錄，當前頁數據丟失等問題 解決 去除啟動頁的 singletask 的啟動模式（AndroidManifest.xml） 在啟動頁activity ...
  • iOS核心動畫高級技巧 - 6
    11. 基於定時器的動畫 基於定時器的動畫 我可以指導你，但是你必須按照我說的做。 -- 駭客帝國 在第10章“緩衝”中，我們研究了CAMediaTimingFunction，它是一個通過控制動畫緩衝來模擬物理效果例如加速或者減速來增強現實感的東西，那麼如果想更加真實地模擬物理交互或者實時根據用戶輸 ...
  • Kotlin Coroutines在Android中的實踐
    Kotlin coroutines在Android中的應用. 協程在Android中主要用來解決什麼問題; 和Architecture Components, MVVM構架如何完美結合. ...
  • HTML連載55-網易註冊界面實戰之input填充
    一、又學一招：想要讓兩個盒子高度對齊，那麼讓他們浮動起來 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> <style> . ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類