當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html:(39):块级元素和内联块级元素

發(fā)布時間：2023/12/10 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 html:(39):块级元素和内联块级元素小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

元素分類--內聯(lián)元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯(lián)元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯(lián)元素。如下代碼就是將塊狀元素div轉換為內聯(lián)元素，從而使 div 元素具有內聯(lián)元素特點。

div{display:inline;}......<div>我要變成內聯(lián)元素</div>

內聯(lián)元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

小伙伴們你們觀查一下右側代碼段，有沒有發(fā)現(xiàn)一個問題，內聯(lián)元素之間有一個間距問題，這個問題在本小節(jié)的 wiki 中有介紹，感興趣的小伙伴可以去查看。

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行內元素標簽</title> <style type="text/css"> a,span,em{background:pink;/*設置a、span、em標簽背景顏色都為粉色*/ } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="https://blog.csdn.net/weixin_43392489">慕課網</a> <span>33333</span> <span>44444</span><em>555555</em> </body> </html>

運行結果

元素分類--內聯(lián)塊狀元素

內聯(lián)塊狀元素（inline-block）就是同時具備內聯(lián)元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標簽就是這種內聯(lián)塊狀標簽。

inline-block 元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

提示：下一小節(jié)是用視頻動畫來講解css中的盒模型。

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>內聯(lián)塊狀元素</title> <style type="text/css"> a{display:inline-block;width:20px;/*在默認情況下寬度不起作用*/height:20px;/*在默認情況下高度不起作用*/background:pink;/*設置背景顏色為粉色*/text-align:center; /*設置文本居中顯示*/ } </style> </head> <body> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </body> </html>

運行結果?

總結

以上是生活随笔為你收集整理的html:(39):块级元素和内联块级元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。