CSS中如果實現元素浮動和清除浮動,看這篇文章就足夠了

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

浮動基本介紹 在標準文檔流中元素分為2種, 和`行內元素`,如果想讓一些元素既要有塊級元素的特點也同時保留行內元素特點,只能讓這些元素脫離標準文檔流即可。 浮動可以讓元素脫離標準文檔流,可以實現讓多個元素排在同一行,並且可以設置寬高度。 其實浮動是通過 屬性來實現的。 屬性值說明表: 屬性值 |描述 ...


浮動基本介紹

  • 在標準文檔流中元素分為2種,塊級元素行內元素,如果想讓一些元素既要有塊級元素的特點也同時保留行內元素特點,只能讓這些元素脫離標準文檔流即可。
  • 浮動可以讓元素脫離標準文檔流,可以實現讓多個元素排在同一行,並且可以設置寬高度。
  • 其實浮動是通過float屬性來實現的。
  • float屬性值說明表:
屬性值 描述
left 設置元素向左浮動。
right 設置元素向右浮動。

右浮動實踐

  • 讓我們進入右浮動的實踐,實踐內容如:將class屬性值為.box1元素設置為右浮動。
  • 在進入有浮動實踐之前我們先看看要浮動元素結構是什麼。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 為什麼結果圖是一條邊框線呢?因為在div標簽中還沒有內容呢,現在我們將子div標簽設置寬高度為100px像素並且添加背景顏色。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 為什麼會排列為3行呢,因為3個div標簽都是塊級元素。
  • 現在我們將class屬性值為.box1的元素設置為右浮動。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 註意:現在我們發現calss屬性值為.box元素高度變矮了,這就說明瞭(浮動元素它已經脫離了標準文檔流,不再占用空間了)、並且向右浮動,浮動到自身的父元素的邊緣位置就停止了浮動。

左浮動實踐

  • 讓我們進入左浮動的實踐,實踐內容如:將class屬性值為.box1元素設置為左浮動。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 我們先理解浮動的原理之後再解釋下class屬性值為.box2元素看不見的原因。
  • 現在筆者給大家看2張實踐結果圖如:
  • 結果圖A

  • 結果圖B

  • 通過這2張結果圖我們可以把浮動簡單的理解為“漂”舉例:
  • 假設class屬性值為.box是一個池塘,3個子元素都是能夠漂浮在池塘水面上的東西,現在我們將calss屬性值為.box1元素浮動起來,漂在池塘水面上,是不是就不再占用池塘內的空間了。
  • 既然我們理解為“漂”它一定是漂浮在池塘水面之上,但是沒有浮動的元素在池塘水面之內,所以class屬性值為.box2元素看不見,並不代表它不存在只是被class屬性值為.box1元素給遮擋住了,現在我們將class屬性值為.box2元素寬度設置為150px像素。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 註意:事實證明class屬性值為.box2元素是存在的。

  • 下麵我們將calss屬性值為.box2元素設置為左浮動看看有什麼不一樣的效果
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 但是class屬性值為.box2的元素左浮動並沒有左浮動到本身父元素的邊緣位置,為什麼在class屬性值為.box1後面呢?因為父元素已經有了浮動的子元素後面的子元素在浮動就浮動到前面浮動的元素之後。
  • 現在我們將class屬性值為.box3的元素設置為左浮動,看看有什麼不一樣的效果。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>
  • 結果圖

  • 註意:浮動元素浮動以後,其父元素不再將浮動的子元素包裹在父元素之內,所以結果圖出現一條黑色的邊框線,若有不明白的看第一個實踐內容。

將行內元素設置浮動

  • 如果我們給行內元素設置了浮動,行內元素就擁有了塊級元素的特點。
  • 讓我們進入行內元素設置浮動實踐,實踐內容如:將div標簽中的span標簽設置為左浮動。
  • 在設置左浮動之前我們先看看給span標簽設置寬高度和背景顏色有什麼效果。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰3</span>
  </div>
</body>
</html>
  • 結果圖

  • 現在發現我們給span標簽設置了寬高度為100px像素並沒有生效,因為現在span標簽還是行內元素。
  • 現在我們給span標簽設置左浮動,然後我們在看看效果如何。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰</span>
  </div>
</body>
</html>
  • 結果圖

  • 註意:行內元素設置為浮動之後就擁有了塊級元素的特點。


設置浮動總結

  • 浮動的特點如:
  • 浮動元素脫離了標準的文檔流,不再占用父元素的任何空間。
  • 浮動元素比標準文檔流的元素層級要高,會將標準文檔流的元素遮擋住。
  • 浮動元素會向左浮動或向右浮動。
  • 浮動元素會遇到父元素的邊緣就停止了浮動。
  • 浮動元素會遇到已經有了浮動的元素,後者會浮動到前者之後就停止了浮動。
  • 浮動元素浮動之後就脫離了父元素,並且父元素不再包裹浮動的元素。
  • 行內元素設置為浮動,就擁有了塊級元素的特點。

為什麼要清除浮動呢?

  • 因為浮動的元素會影響到下麵元素,具體看實踐結果圖大家就明白了。
  • class屬性值為.box元素的子類元素沒有浮動前的效果實踐。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
        
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>清除浮動</h1>
</body>
</html>
  • 結果圖

  • class屬性值為.box元素的子元素左浮動之後影響到下麵的元素排版佈局實踐。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>清除浮動</h1>
</body>
</html>
  • 結果圖

  • 現在大家應該明白了為什麼要清除浮動了,有浮動就必須清除浮動,因為上面的元素設置了浮動就會影響到下麵元素排版佈局。

清除浮動有3種方式

第一種方式

  • 給浮動的元素父元素設置一個固定的高度,從視覺上看到浮動的元素在父元素包裹之內。
  • 我們給浮動元素的父元素設置一個固定600px像素的高度,一起來看看效果如何。
  • 代碼塊

<!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: 600px;
         height: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>清除浮動</h1>
</body>
</html>
  • 結果圖

  • 這樣是解決了下麵元素排版佈局問題,但是筆者不推薦這麼做,因為高度是由子元素的內容撐起來的高度,而不是我們給的固定高度。

第二種方式

  • 其實在CSS中也有清除浮動的屬性,清除浮動屬性名為clear
  • clear屬性值說明表
屬性值 描述
left 清除左側浮動元素。
right 清除右側浮動元素。
both 清除左右側浮動元素。
  • 要使用這個clear屬性必須創建一個新的div元素,創建新的div元素不能放置任何內容,它只能做一個件事情,那就是清除浮動並且將這個新創建的div元素放在最後一個浮動元素的後面才會生效。
  • 左右清除浮動的屬性值筆者在這裡就不一一實踐了,一般我們就用both屬性值就可以了,左右清除浮動,幹嘛還要計較它是左浮動或右浮動呢,直接清除左右浮動就ok了。
  • 具體的看我們實踐的結果圖。
  • 代碼塊

<!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: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
         
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
       .clear{
         clear: both;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h1>清除浮動</h1>
</body>
</html>
  • 結果圖

  • 註意:這才是我們真正想要的結果,並且從視覺上來看浮動的元素包裹在父元素之內的效果。

第三種方式

  • 使用屬性為overflow並且屬性值為hidden來清除浮動,必須將這個屬性設置在浮動元素的父元素身上。
  • 給大家普及下屬性為overflow並且屬性值為hidden,它原意是用來將溢出的部分內容進行隱藏,但是它還可以清除浮動。

  • 筆者先將內容溢出然後在隱藏溢出的內容,那我們一起來看看唄。
  • 代碼塊

<!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: 50px;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </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>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </div>
</body>
</html>
  • 結果圖

  • 使用屬性為overflow並且屬性值為hidden來清除浮動。
  • 清除浮動之前我們先看看結構是如何的。
  • 代碼塊

<!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>
       ul{
           list-style: none;
          
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>
  • 結果圖

  • 註意:在這裡筆者還沒有給浮動元素清除浮動呢,大家可以明顯的看到ul標簽高度為0

  • 清除浮動實踐
  • 代碼塊

<!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>
       ul{
           list-style: none;
           overflow: hidden;
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>
  • 結果圖

  • 現在我們很清楚的看到ul標簽高度為23px像素,為什麼要使用:屬性為overflow並且屬性值為hidden來清除浮動,因為ul標簽中只能使用li標簽元素不能使用其它元素,所以屬性為overflow並且屬性值為hidden來清除浮動是最好不過啦。


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

-Advertisement-
Play Games
更多相關文章
  • 近些年機器視覺應用一直是個很火的方向,想象一下機器如果能長上“眼睛”,是不是就可以做一些人類才能做的事情,因此機器視覺是人工智慧實現的一個重要基礎。痞子衡當年碩士畢業論文課題就是工業相機圖像處理相關的,算是機器視覺系統的前端核心。遙想十年以前,想要從事機器視覺系統的開發一直是比較複雜的,需要開發者有... ...
  • 如圖,這個是看視頻時,最後的作業,除了客戶端未使用select實現外,其它的要求都有簡單實現。 服務端代碼如下: 客戶端代碼還是之前的版本,沒有使用select實現: ...
  • 最近,在Medium上出現了一個採訪問題:如何向奶奶解釋SQL和NoSQL之間的區別。我認為作者使用自己的結構化家譜來比較sql和nosql之間的差異。寫作非常好,但是有點尷尬。面試官沒有時間聽你的話。我個人認為sql和nosql之間的區別消失了。一兩個句子無法概括,更不用說告訴奶奶了,因此,如果您 ...
  • 資料庫 1、創建資料庫 2、查看資料庫 3、刪除資料庫 表 1、創建表 2、刪除表 3、重命名錶 列 1、添加列 2、刪除列 3、重命名列 約束 1、主鍵 視圖 1、創建視圖 2、刪除視圖 存儲過程 1、創建存儲過程 2、刪除存儲過程 3、執行存儲過程 4、重命名存儲過程 5、帶有輸出參數的存儲過程 ...
  • 存儲過程(特定功能的SQL語句集) 一組為了完成特定功能的SQL語句集,存儲在資料庫中,經過第一次編譯後再次調用不需要編譯,用戶通過指定存儲過程的名字並給出參數(如果該存儲過程帶有參數)來執行它。存儲過程是資料庫中一個重要對象。 1.創建存儲過程: create procedure 存儲過程名稱 ( ...
  • --創建資料庫使用預設的方式 create database 資料庫名稱 --創建一個完整的資料庫,帶有主文件和日誌文件 create database 資料庫名稱 --邏輯名稱 on primary( name='資料庫名稱', --物理名稱 filename='d:\名字.mdf', size= ...
  • SELECT和SET在SQL SERVER中都可以用來對變數進行賦值,但其用法和效果在一些細節上有些不同。 1. 在對變數賦值方面,SET是ANSI標準的賦值方式,SELECT則不是。這也是SET方式被推薦使用的原因之一。 2. SELECT可以一次對多個變數進行賦值,而SET一次只能對一個變數賦值 ...
  • UIGestureRecognizerDelegate A set of methods implemented by the delegate of a gesture recognizer to fine-tune an app’s gesture-recognition behavior. 一 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...