11-4元素分類--內聯塊狀元素 · 初識HTML+CSS

**內聯塊狀元素（**inline-block**）**就是同時具備內聯元素、塊狀元素的特點，代碼`display:inline-block`就是將元素設置為內聯塊狀元素。(css2.1新增)，、標簽就是這種內聯塊狀標簽。 inline-block 元素特點： 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置。提示：下一小節是用視頻動畫來講解css中的盒模型。 ### 任務 **任務：我也來試試，仿分頁頁碼設計** 在右邊的代碼編輯器中大家可以看到我們為 a 元素設置了寬和高，但都沒有起到作用，原因是a在默認的時候是**內聯元素**，內聯元素是不可以設置**寬**和**高**的。 1.在右邊編輯器的第8行，輸入： ~~~ display:inline-block; ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>內聯塊狀元素</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> ```