學前端到了CSS階段，你一定要掌握這9大防禦式開發技能

来源:https://www.cnblogs.com/icodingedu/archive/2022/12/03/16948691.html
-Advertisement-
Play Games

一、什麼是防禦式編程 防禦性編程是一種細緻、謹慎的編程方法（習慣）。我們在寫代碼時常會有“以防萬一”的心態，把以防萬一有可能出現的情況提前考慮進去，規避以免以防萬一齣現帶來的問題。 應用防禦性編程技術，你可以偵測到可能被忽略的錯誤，防止可能會導致災難性後果的“小毛病”的出現，在時間的運行過程中為你節 ...


 

一、什麼是防禦式編程

防禦性編程是一種細緻、謹慎的編程方法（習慣）。我們在寫代碼時常會有“以防萬一”的心態，把以防萬一有可能出現的情況提前考慮進去，規避以免以防萬一齣現帶來的問題。

應用防禦性編程技術，你可以偵測到可能被忽略的錯誤，防止可能會導致災難性後果的“小毛病”的出現，在時間的運行過程中為你節約大量的調試時間。

比如我們在寫下麵這個效果時，如果只是按設計師設計效果來開發，我們就不會考慮標題內容過長的問題。但是在實際的應用中，數據是從後臺載入而來，標題的字數就有可能過長，過長之後就會導致標題溢出折行的效果如下圖，帶來不好的體驗。

如果站在防禦式編程的角度來思考，那我們就會提前把這種問題規避掉。如果標題過長，我們可以使用...省略號來處理。而不是等到項目上線，實際問題發生時，再來修改代碼。

 

 

二、防禦式CSS

防禦式CSS是一個片段的集合，可以幫助我們規避“以防萬一”產生的問題。

我們在CSS佈局時，是按照設計師的效果來開發的，但是實際的網頁內容是動態的，網頁上的內容是可以改變的，如：文字數量，圖片尺寸、視窗大小等，再加上用戶的一些意想不到的行為和運行環境，從而造成CSS佈局的效果並沒有按照我們預期的效果顯示。

我們可以通過添加某些CSS代碼，來避免這種情況帶來的問題。防禦式CSS是實現項目穩定性建設重要但極其容易忽視的一環。

接下來我們分享9個應用場景下，具有防禦式的CSS代碼。

三、9個具有防禦式的CSS代碼

① ：場景一：單行文本過長

我們設計時的理想效果是標題文字不超過8個字，正好顯示完整。但實際應用時，有可能標題內容過長造成換行顯示。我們可以添加文字溢出顯示..省略號來解決。

 

<style>
   body,
   h3 {
       margin: 0;
       padding: 0;
  }
   .box {
       width: 150px;
       height: 150px;
       position: relative;
       margin: 40px auto;
  }
   .box h3 {
       height: 30px;
       line-height: 30px;
       font-weight: 100;
       width: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       font-size: 16px;
       color: #fff;
       position: absolute;
       bottom: 0;
       text-align: center;
       /*以防萬一，標題過長時，用...省略號顯示*/
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
  }
</style>
<body>
   <div class="box">
       <img src="images/flex-06.jpg" alt="" />
       <h3>"以防萬一"標題過長產生的問題</h3>
   </div>
</body>

2、場景二：類別標簽中文本過長

在這個效果中，我們並不希望標簽延伸到最右側，我們希望內容過長時，可以在一定的長度時就折行顯示。我們可以通過添 max-width屬性來避免這種“以防萬一”的問題。

同類的應用還有 min-width,在此就不演示了

 

<style>
     .box {
       width: 250px;
       height: 250px;
       position: relative;
    }
     .box span {
       position: absolute;
       background-color: rgba(119, 245, 197, 0.8);
       line-height: 1.3;
       font-size: 12px;
       padding: 5px 10px;
       border-radius: 0 50px 50px 0px;
       left: 0px;
       top: 5px;
       /*以防萬一標簽內容過長，控制最大寬度，內容過多折行顯示*/
       max-width: 70%;
    }
   </style>
 </head>
 <body>
   <div class="box">
     <img src="images/ms.jpg" alt="" />
     <span>植物奶油 巧克力 草莓 榴蓮 花生 芝麻 小米 雞蛋</span>
   </div>
 </body>

3、場景三：防止圖片拉伸或擠壓

我們預想的是用戶按1:1的大小來上傳頭像圖片，但實際用戶上傳的頭像比例是五花八門，就會造成圖片被拉伸或擠壓變形。我們可以添加Object-fit:cover來等比例裁剪圖片尺寸，這樣圖片就不會被拉伸或壓縮，不過會有一部分圖片被裁剪掉。

 

<style>
   .box {
       width: 200px;
       height: 200px;
       border-radius: 50%;
       overflow: hidden;
  }
   .box img {
       width: 100%;
       height: 100%;
       /*保持圖片原有尺寸來裁剪*/
       object-fit: cover;
  }
</style>
<body>
   <div class="box">
       <img src="images/tx2.png" alt="" />
   </div>
</body>

4、場景四：圖片載入失敗，文字顯示問題

當圖片上有文字時，如果圖片載入失敗，而外層容器的背景色和文字顏色接近，那麼文字的展示效果就不理想；此時我們可以給圖片加上對應的背景色。

 

這個效果大家只需做個瞭解就好。通常如果圖片上有文字，設計師在設計效果圖時都會在圖片和文字中間加上一層黑色的半透明遮罩層，這樣即使圖片載入不出來，也不影響文字的展示效果。

<style>
   .box {
       width: 250px;
       height: 156px;
       position: relative;
  }
   .box img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       /*"以防萬一"圖片載入失敗，加上背景色，保證文字能正常顯示*/
       background-color: #666;
  }
   .box h3 {
       width: 100%;
       font-size: 20px;
       text-align: center;
       position: absolute;
       top: 40px;
       color: #fff;
  }
</style>
<body>
   <div class="box">
       <img src="images/rotate3.webp" alt="" />
       <h3>美麗的風景圖</h3>
   </div>
</body>

5、場景五：必要時顯示滾動條

在內容比較長的情況下，可以通過設置 overflow-y控制滾動條是否展示。但是這裡更推薦將overflow-y的值設置為 auto。如果你將overflow-y顯式設置為 scroll時，不管容器內容長短，滾動條都會展示出來，這種體驗是不好的

 

<style>
     .box {
       width: 160px;
       padding: 20px;
       height: 200px;
       background-color: skyblue;
       line-height: 2;
       border-radius: 20px;
    }
     .box .content {
       padding-right: 10px;
       max-height: 100%;
       /*以防萬一，用戶內容不足時，不需要顯示滾動條，只有內容溢出時才顯示*/
       overflow-y: auto;
    }
    /* 整個滾動條*/
     .content::-webkit-scrollbar {
       width: 5px;
       padding: 0px 20px;
    }
    /* 滾動條軌道*/
     .content::-webkit-scrollbar-track {
       border-radius: 10px;
       background-color: #000;
       margin: 20px 0px;
    }
    /*滾動條上的滾動滑塊*/
     .content::-webkit-scrollbar-thumb {
       width: 14px;
       border-radius: 10px;
       background-color: #ddd;
    }
   </style>
 <body>
   <div class="box">
     <div class="content">
      在內容比較長的情況下，可以通過設置
      overflow-y控制滾動條是否展示。但是這裡更推薦將
     </div>
   </div>
 </body>

6、場景六：預留滾動條空間，避免重排

當內容不足時不會出現滾動條，文字占據的寬度要寬些。當內容溢出出現滾動條時，因為滾動條要占據一部分空間，則會造成文字占據的空間變窄，因而會造成重排。我們可以元素添加scrollbar-gutter:stable;來避免這個問題。

scrollbar-gutter屬性有三個值

 

屬性值

描述

auto

就是預設表現。沒有滾動條的時候，內容儘可能占據寬度，有了滾動條，可用寬度減小

stable

如果 overflow 屬性計算值不是 visible，則提前預留好空白區域，這樣滾動條出現的時候，整個結構和佈局都是穩定的。

both-edges

讓容器左右兩側同時預留好空白區域，目的是讓局部絕對居中對稱。
     

沒有加scrollbar-gutter時，未出現滾動條和出現滾動條之間的差別

 

加上scrollbar-gutter:stable;後，出現滾動條和沒有出現滾動，前後文字顯示效果沒有差異

 

<style>
   .box {
       width: 160px;
       padding: 20px;
       height: 200px;
       background-color: skyblue;
       line-height: 2;
       border-radius: 20px;
  }
   .box .content {
       max-height: 100%;
       /*以防萬一，用戶內容不足時，不需要顯示滾動條，只有內容溢出時才顯示*/
       overflow-y: auto;
       /*預留好滾動條位置，必免引起重排*/
       scrollbar-gutter: stable;
  }
   .content::-webkit-scrollbar {
       width: 10px;
  }
   .content::-webkit-scrollbar-track {
       border-radius: 10px;
       background-color: #000;
       margin: 20px 0px;
  }
   .content::-webkit-scrollbar-thumb {
       width: 14px;
       border-radius: 10px;
       background-color: #ddd;
  }
</style>
<body>
   <div class="box">
       <div class="content">
          當內容不足時不會出現滾動條，文字占據的寬度要寬些。當內容溢出出現滾動條時，因為滾動條要占據一部分空間，則會造成文字占據的空間變窄，因而會造成重排。
       </div>
   </div>
</body>

7、場景七：鎖定滾動鏈

我們會發現當子元素滾動到頂部或底部繼續滾動滾輪時，會導致父元素的滾動，但這種行為有時會影響頁面體驗。在子元素上應用overscroll-behavior: contain就可以禁止掉這一行為。

 

 

 

<style>
   body {
       height: 2000px;
  }
   .box {
       height: 400px;
       width: 200px;
       margin: 0px auto;
       overflow-y: auto;
       background-color: skyblue;
       /*當滾動到滾動條底部和頂部時，會觸發父元素的滾動條滾動*/
       overscroll-behavior-y: contain;
  }
</style>
<body>
   <div class="box">
       <p>1</p>
       <p>2</p>
       <p>3</p>
       <p>4</p>
       <p>5</p>
       <p>6</p>
       <p>7</p>
       <p>8</p>
       <p>9</p>
       <p>10</p>
       <p>11</p>
       <p>12</p>
       <p>13</p>
       <p>14</p>
       <p>15</p>
       <p>16</p>
       <p>17</p>
       <p>18</p>
       <p>19</p>
       <p>20</p>
       <p>21</p>
       <p>22</p>
       <p>23</p>
       <p>24</p>
       <p>25</p>
       <p>26</p>
       <p>27</p>
       <p>28</p>
       <p>29</p>
       <p>30</p>
       <p>31</p>
       <p>32</p>
   </div>
</body>

8、場景八：flex佈局中，元素使用space-between最後一行兩邊分佈的問題？

如果我們每一行顯示的個數為n，那我們可以最後一行子項的後面加上n-2個span元素，span元素的寬度和其它子項元素寬度一樣，但不用設置高度。

為什麼是添加n-2個span元素呢？

當最後一行只有1個子元素時，他會預設靠左，不用處理

當最後一行子元素正好時，我們就不用關心這個問題。

所以要去掉這兩種情況，只需要加n-2個span元素就好

 

 

<style>
     .container {
       width: 500px;
       display: flex; /*彈性佈局*/
       justify-content: space-between; /*兩端對齊*/
       flex-wrap: wrap; /*超出部分換行*/
    }
     .item {
       width: 120px;
       height: 100px;
       background-color: pink;
       margin-top: 10px;
    }
     .container span {
       width: 120px; /*span寬和子項寬一樣*/
    }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
     <div class="item">7</div>
     <!--以防萬一，子項個數不夠，最後一排出現兩端對齊，達不到預期效果-->
     <span></span>
     <span></span>
   </div>
 </body>

9、場景九：grid網格中的響應式斷行效果的處理

當我們想儘可能多的在一行顯示子項的個數時，有可能會出現子項個數不滿一行的情況。那這個時候利用網格佈局，使用auto-fill和auto-fit就會是兩個完全不同的效果。

  • auto-fill ：網格的最大重覆次數（正整數），如果有剩餘空間，則會保留剩餘空間，而不改變網格項目的寬度。
  • auto-fit：網格的最大重覆次數（正整數），如果有剩餘空間，網格項平分剩餘空間來擴展自己的寬度。

以下情況只會出現在子項內容不能占滿一行時。也就是說萬一內容不能占滿一行，則使用auto-fill就會出現空白問題。我們把auto-fill改成auto-fit就解決了這個問題

 

<style>
   .container {
       width: 100%;
       display: grid;
       /*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
       /*以防萬一，子項不足占據一行時*/
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       grid-template-rows: 250px;
       grid-auto-flow: row;
       grid-auto-rows: 250px;
       gap: 10px;
  }
   .container .item:nth-child(even) {
       background-color: skyblue;
  }
   .container .item:nth-child(odd) {
       background-color: pink;
  }
</style>
<body>
   <div class="container">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
   </div>
</body>

 

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，雲伺服器部署上線，從入門到精通

  • PC端項目開發（1個）
  • 移動WebApp開發（2個）
  • 多端響應式開發（1個）

共4大完整的項目開發 ！一行一行代碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規範，命名規範，項目代碼規範，SEO優化規範

從藍湖UI設計稿 到 PC端，移動端，多端響應式開發項目開發

  • 真機調試，雲服務部署上線；
  • Linux環境下 的 Nginx 部署，Nginx 性能優化；
  • Gzip 壓縮，HTTPS 加密協議，功能變數名稱伺服器備案，解析；
  • 企業項目功能變數名稱跳轉的終極解決方案，多網站、多系統部署；
  • 使用 使用 Git 線上項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路 ！

過程中【不涉及】任何費用和利益，非誠勿擾 。

點擊進入：30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程


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

-Advertisement-
Play Games
更多相關文章
  • 深入淺出Seata的AT模式
    在Seata的AT模式中，在服務執行完成後，直接進行RM提交和資源釋放，提供了對CAP理論相對平衡的解決方案，並且沒有侵入業務工程； ...
  • 記一次 .NET 某電子廠OA系統 非托管記憶體泄露分析
    一：背景 1.講故事 這周有個朋友找到我，說他的程式出現了記憶體緩慢增長，沒有回頭的趨勢，讓我幫忙看下到底怎麼回事，據朋友說這個問題已經困擾他快一周了，還是沒能找到最終的問題，看樣子這個問題比較刁鑽，不管怎麼說，先祭出 WinDbg。 二：WinDbg 分析 1. 托管還是非托管泄露 一直關註這個系列 ...
  • Linux基礎-學會使用命令幫助
    Linux 命令及其參數繁多，大多數人都是無法記住全部功能和具體參數意思的。在 linux 終端，面對命令不知道怎麼用，或不記得命令的拼寫及參數時，我們需要求助於系統的幫助文檔； linux 系統內置的幫助文檔很詳細，通常能解決我們的問題，我們需要掌握如何正確的去使用它們。 ...
  • Linux 系統環境監測
    Linux系統環境監測 Linux系統環境主要監測CPU、記憶體、磁碟I/O和網路流量。 1. CPU （1） 查看CPU的負載情況：uptime 可以通過uptime查看系統整體的負載情況。 如果伺服器的CPU為1核心，則1分鐘的系統平均負載 >=3 說明負載過高，如果伺服器的CPU為4核心，則lo ...
  • 1.2 Hadoop簡介-hadoop-最全最完整的保姆級的java大數據學習資料
    1.2 Hadoop簡介 1.2.1 什麼是Hadoop ​ Hadoop 是一個適合大數據的分散式存儲和計算平臺 ​ 如前所述，狹義上說Hadoop就是一個框架平臺，廣義上講Hadoop代表大數據的一個技術生態 圈，包括很多其他軟體框架 ​ Hadoop生態圈技術棧 ​ Hadoop（HDFS + ...
  • 京東零售大數據云原生平臺化實踐
    導讀： 今天為大家介紹京東零售大數據的雲原生平臺化實踐，主要包括以下幾大方面內容： 雲原生的定義和理解 雲原生相關技術的演化 京東大數據在雲原生平臺化上的實踐 雲原生應用平臺的發展 分享嘉賓：劉仲偉 京東 架構師 編輯整理：張明宇 廣州某銀行 出品社區：DataFun 01/雲原生的定義和理解 1. ...
  • 前端學習路線及第一天學習
    一、學習路線 1.HTML5+CSS3 黑馬程式員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程_嗶哩嗶哩_bilibili 2.JavaScript JavaScript基礎語法-dom-bom-js-es6新語法-jQuery-數據可視化echarts黑馬 ...
  • Type Script 在流程設計器的落地實踐
    JQuery03 4.jQuery選擇器03 4.4表單選擇器 應用實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單選擇器應用實例</title> <script type="text/javasc ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類