」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 理解 CSS 盒子模型:內容方塊與邊框、內嵌元素與區塊元素

理解 CSS 盒子模型:內容方塊與邊框、內嵌元素與區塊元素

發佈於2024-08-20
瀏覽:648

身為前端開發人員,了解 CSS 盒子模型是成敗的關鍵,以便能夠提供像素完美的佈局。讓我們深入討論內聯元素和區塊元素在兩種盒子模型類型(內容盒和邊框盒)的上下文中的行為有何不同。

基礎:盒子裡有什麼?

Understanding the CSS Box Model: content-box vs border-box, inline vs. block elements

在我們詳細討論之前,有必要回顧一下盒子模型是什麼。頁面上的每個元素都是一個盒子(是的,即使是那些實際上看起來不是四方形的元素)。盒子可以位於其他盒子內、包含其他盒子和/或與其他盒子並排。

盒子模型適用於所有這些,並由以下部分組成:

  • 內容方塊: 一個 HTML 元素或 CSS 偽元素,其中包含您的實際內容 - 文字、圖像、您擁有的內容。
  • 內邊距: 內容與邊框之間的空間。
  • 邊框: 圍繞內邊距和內容的線條。
  • 邊距: 邊框外的空間,將其他元素推開。

因此,幾乎每個 HTML 元素(包括

)以及每個 CSS 偽元素都是一個盒子。該盒子的“牆壁”是您的邊框,可以指定厚度(或寬度)。在該內容和該盒子的牆壁之間有填充。在這些牆壁和其他盒子之間有邊距。

內聯元素和區塊元素之間的主要區別

了解盒子模型如何影響內聯元素與塊元素的主要區別至關重要:

  1. 寬度: 預設情況下,區塊元素會展開以填滿其容器。內聯元素?它們只佔用足夠的空間來容納其內容。

  2. 高度:對於區塊元素,padding、border、margin都會增加高度。無論垂直內邊距或邊框如何,內聯元素都保持在行高內。

  3. 佈局影響:塊元素影響水平和垂直佈局。內聯元素都是關於水平流動的,對垂直間距的影響最小。

  4. 邊距折疊: 邊距折疊是一種特定於塊元素的行為,其中相鄰的垂直邊距可以合併(因此一個元素上的margin-bottom:20px 可以折疊為margin-top: 20px 在下面的元素上,建立一個20px 邊距)。內聯元素不玩這個遊戲。

現在我們知道了盒子模型的組成部分以及內聯元素和塊元素之間的區別,讓我們看看內容框如何根據它們是內聯元素還是塊元素而受到 box-sizing 屬性的影響。

框大小調整:內容框與邊框框

box-sizing 屬性控制如何計算元素的寬度和高度,它可以顯著影響佈局。

1. 帶有內嵌元素的內容框

當 box-sizing: content-box 應用於內嵌元素時:

  • 寬度與高度:寬度僅由內容決定。內邊距、邊框和邊距會新增在此寬度之上。
  • 佈局影響:由於內聯元素不會破壞文字流,因此元素的寬度僅與內容一樣寬。垂直內邊距和邊框在視覺上存在,但不會影響周圍線條的高度。

2. 帶有區塊元素的內容框

當 box-sizing: content-box 套用於區塊元素時:

  • 寬度與高度:指定的寬度或高度僅適用於內容區域。在其外部添加填充和邊框,增加元素的整體大小。
  • 佈局影響:除非另有指定,否則區塊元素預設擴展到其容器的整個寬度。填充和邊框會增加元素的大小,並將相鄰元素推得更遠。

3. 帶有內聯元素的邊框

當 box-sizing: border-box 應用於內聯元素:

  • 寬度和高度: 寬度包括內容、內邊距和邊框。內容區域縮小以容納指定寬度內的內邊距和邊框。
  • 佈局影響:元素的寬度仍然由內容決定,但現在內邊距和邊框都包含在該寬度內。垂直內邊距和邊框在視覺上仍然存在,但不會改變行高。

4. 帶有區塊元素的邊框

當 box-sizing: border-box 套用於區塊元素時:

  • 寬度和高度:指定的寬度和高度包括內容、內邊距和邊框。這意味著無論添加多少內邊距或邊框,元素的總大小都與指定的尺寸保持一致。
  • 佈局影響:區塊元素的大小更容易預測,因為內邊距和邊框包含在指定的寬度內。這使得佈局設計更易於管理,特別是在並排對齊元素時。

值得一提的是,雖然 content-box 是預設設置,但 border-box 被廣泛認為更直觀並提供最大程度的控制。


CSS 盒子模型不僅僅是一個強大的概念,它也是前端開發工具庫中的基礎工具。透過了解框架大小如何以不同的方式影響內聯和區塊元素,您可以開始創建既清晰又實用的完美佈局,而無需為錯誤佈局進行故障排除而煩惱。

如果您喜歡盒子模型上的下載,請將滑鼠懸停在左上角的心形盒子上,並向這篇文章展示所有的愛!

版本聲明 本文轉載於:https://dev.to/horaceshmorace/understanding-the-css-box-model-content-box-vs-border-box-inline-vs-block-elements-1amh?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在JTable中維護jtable單元格渲染後,在JTable中,在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是,至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列,用戶遇到的數字格式丟失的“價格”列的“價格”之後,問題在設置自定義單元...
    程式設計 發佈於2025-06-11
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-06-11
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-06-11
  • 在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法
    在UTF8 MySQL表中正確將Latin1字符轉換為UTF8的方法
    在UTF8表中將latin1字符轉換為utf8 ,您遇到了一個問題,其中含義的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致電。為了解決此問題,您正在嘗試使用“ mb_convert_encoding”和“ iconv”轉換受...
    程式設計 發佈於2025-06-11
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符提取最後一行,在Postgresql中,您可能需要遇到與在數據庫中的每個不同標識相關的信息中提取信息的情況。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: ...
    程式設計 發佈於2025-06-11
  • Java數組中元素位置查找技巧
    Java數組中元素位置查找技巧
    在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中,允許您使用indexof方法。 (primitives)(鏈接到Mishax的解決方案) 用於排序陣列的數組此方法此方法返回元素的索引,如果發現了元素的索引,或一個負值,指示應放置元素的插入點。
    程式設計 發佈於2025-06-11
  • 如何解決AppEngine中“無法猜測文件類型,使用application/octet-stream...”錯誤?
    如何解決AppEngine中“無法猜測文件類型,使用application/octet-stream...”錯誤?
    appEngine靜態文件mime type override ,靜態文件處理程序有時可以覆蓋正確的mime類型,在錯誤消息中導致錯誤消息:“無法猜測mimeType for for file for file for [File]。 application/application/octet...
    程式設計 發佈於2025-06-11
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-06-11
  • 人臉檢測失敗原因及解決方案:Error -215
    人臉檢測失敗原因及解決方案:Error -215
    錯誤處理:解決“ error:((-215)!empty()in Function Multultiscale中的“ openCV 要解決此問題,必須確保提供給HAAR CASCADE XML文件的路徑有效。在提供的代碼片段中,級聯分類器裝有硬編碼路徑,這可能對您的系統不准確。相反,OPENCV提...
    程式設計 發佈於2025-06-11
  • 如何正確使用與PDO參數的查詢一樣?
    如何正確使用與PDO參數的查詢一樣?
    在pdo 中使用類似QUERIES在PDO中的Queries時,您可能會遇到類似疑問中描述的問題:此查詢也可能不會返回結果,即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含%符號。 通過將變量包含在$ params數組中的%符號中,您確保將%字符正確替換到查詢中。沒有此修改,PD...
    程式設計 發佈於2025-06-11
  • Python高效去除文本中HTML標籤方法
    Python高效去除文本中HTML標籤方法
    在Python中剝離HTML標籤,以獲取原始的文本表示 僅通過Python的MlStripper 來簡化剝離過程,Python Standard庫提供了一個專門的功能,MLSTREPERE,MLSTREPERIPLE,MLSTREPERE,MLSTREPERIPE,MLSTREPERCE,MLST...
    程式設計 發佈於2025-06-11
  • 如何克服PHP的功能重新定義限制?
    如何克服PHP的功能重新定義限制?
    克服PHP的函數重新定義限制在PHP中,多次定義一個相同名稱的函數是一個no-no。嘗試這樣做,如提供的代碼段所示,將導致可怕的“不能重新列出”錯誤。 但是,PHP工具腰帶中有一個隱藏的寶石:runkit擴展。它使您能夠靈活地重新定義函數。 runkit_function_renction_...
    程式設計 發佈於2025-06-11
  • Java中假喚醒真的會發生嗎?
    Java中假喚醒真的會發生嗎?
    在Java中的浪費喚醒:真實性或神話? 在Java同步中偽裝喚醒的概念已經是討論的主題。儘管存在這種行為的潛力,但問題仍然存在:它們實際上是在實踐中發生的嗎? Linux的喚醒機制根據Wikipedia關於偽造喚醒的文章,linux實現了pthread_cond_wait()功能的Linux實現,...
    程式設計 發佈於2025-06-11
  • `console.log`顯示修改後對象值異常的原因
    `console.log`顯示修改後對象值異常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    程式設計 發佈於2025-06-11

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3