HTML中的元素從顯示的角度，一般可以分為三種類型：塊元素（block）、內聯元素（inline）、行內塊元素（inline-block），display屬性可以實現三者的相互轉換，本文以一個簡單的HTML入手，介紹了這三種類型元素在具體頁面渲染中的效果和特點，最后對內聯元素水平放置時之間產生的空隙進行了原因分析，并給出了具體消除的方法。在實際應用中，可根據布局需要作出適當的轉換。

這是一個簡單的HTML

???? ???? ???? ????

了解華為云

華為云用在線的方式將華為30多年在ICT基礎設施領域的技術積累和產品解決方案開放給客戶，致力于提供穩定可靠、安全可信、可持續創新的云服務，做智能世界的“黑土地”，推進實現“用得起、用得好、用得放心”的普惠AI。華為云作為底座，為華為全棧全場景AI戰略提供強大的算力平臺和更易用的開發平臺。

在不加任何CSS樣式的情況下，瀏覽器渲染頁面如下

一、塊元素 block

可以看到body由三大部分組成：

、

、

，這三個部分有一個特點：每個元素都會占滿它的父元素(此處父元素是body)內容的整個寬度，任憑瀏覽器窗口大小如何變化，如

h1元素（有默認的margin-top和margin-bottom）

p元素（有默認的margin-top和margin-bottom）

div元素

以上三個元素都是塊元素，每個塊元素會按它在HTML標記中出現的順序依次流入頁面，瀏覽器會自動在每個新的塊元素的前后加入一個換行。

若沒有設置width，默認寬度為父元素的100%。

當然，塊元素可以設置寬高和內外邊距，如

p{width:800px;?height:100px;?padding:5px;?margin:20px;}

效果如下，

從盒模型原理我們知道，width設置的只是塊元素內容區的width，塊元素的margin-right默認為auto，會根據內容區的width自動調整，使盒子水平方向上始終平鋪整個頁面。

常見的塊元素有：

普通元素：div、p、table、form

標題元素：h1~h6

列表元素：ul、ol、li、dl、dt、dd

二、內聯元素 inline

除了h1、p和div之外，p中還包含，div中包含，如、這些稱為內聯元素。以p中包含的元素為例

內聯元素特點是不會自動換行，而是和父元素的文本一起按HTML中的順序，從左上方流入右下方，p里面的文本可以看做是一種特殊的內聯元素（如text1和text2），和其他內聯元素（如span）在水平方向上挨著擺放，如果瀏覽器窗口變窄或設置了width屬性，一行放不下，后面的內容就會自動流入下一行，直到所有的子元素都顯示在頁面上為止。如果父元素p沒有設置height，它的height會隨瀏覽器變窄而增高，以保證能放得下所有的內容。

可以設置一下內聯元素span的寬和高，看是否有效？

p?span{width:?100px;?height:?100px;padding:?5px;margin:?10px;}

渲染效果

可以看到，對內聯元素span設置width和height無效，margin僅僅左右方向有效，上下無效；padding上、右、下、左都有效，會撐大span所占空間，后面緊跟著的內容依次后移。細看文本"土"被擠到了下一行。

注意：內聯元素img和input是個例外，可以設置width和height，padding和margin，且四個方向均有效

如在div標簽中插入img標簽和input標簽

????點擊了解更多 ???? ????

同時給img和input設置寬高和內外邊距，驗證一下

是否有效，

如下，給和設置了一樣的寬高和內外邊距

div?img,div?input{width:?50px;height:?40px;margin:?20px;padding:?5px;}

發現，以上這些屬性確實對內聯元素img和input有效

三、內聯塊元素 inlne-block

以上是頁面中塊級元素和內聯元素的簡單介紹，還有第三種類型，行內塊元素（inline-block），它結合了塊元素和行內元素的特性，但又各有取舍。

display屬性用于控制元素如何顯示，如設置h1,p,div的display屬性為inline-block，加個border便于識別

h1,p,div{display:?inline-block;width:?400px;border:?1px?solid?red;}

可以看到，原來的三個塊級元素display設置為inline-block之后，可以在一行上顯示了，不會自動換行，依然可以識別寬高，按順序從左至右排列，除非瀏覽器寬度變窄，一行放不下，就會像內聯元素一樣被擠到第二行。

但這里有個小問題：

三個元素display設置為inline-block之后，雖然在一行顯示，但它們之間有一個小間隙，影響布局效果，那么如何去掉這個小間隙呢？

分析：之所以出現小間隙，是由于HTML文檔中標簽之間的換行符和空格被瀏覽器解析為內容，若把空格和換行去掉，間隙自然就會消失了。

去掉元素標簽之間空格主要有兩種方法：

（一）手動去掉HTML標簽之間的空格或者將其注釋掉

...

...

...

效果如上，內聯元素之間的空隙消失了，以上方法雖然可行，但代碼可讀性降低，有一定局限性，不推薦！

（二）先在body中將文字大小font-size設置為0，這樣，瀏覽器之間的空隙就消失了。

但元素內的文字也因為設置為0，從頁面上不可見了，所以還需要再在各個元素內重新恢復font-size的大小，如此便可以實現和上面方法一樣的效果

以上兩種方法，均可清除內聯元素之間的空隙，推薦使用第二種

實質上，通過設置display屬性，block、inline和inline-block這三者能進行相互轉換。塊元素可以內聯元素方式顯示，內聯元素可變塊元素方式顯示，塊元素和內聯元素也可以內聯塊級元素顯示，在實際應用中，可靈活使用。

注：以上為個人在學習過程中的一點總結，難免有疏漏之處，歡迎指正，我們一起學習成長快樂。

軟件開發

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

標簽：前端 學習 筆記

上一篇:Excel2003表格中制作下拉列表的方法是什么

下一篇:昇騰CANN開發&運行環境搭建