HTML+CSS 輕松入門之內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素(inline-block)就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)
那么如何把元素設(shè)置為內(nèi)聯(lián)塊狀元素
display:inline-block;
注:(css2.1新增),<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
內(nèi)聯(lián)塊狀元素特點(diǎn)
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
下面我們寫一個實(shí)例 ? 給一個a標(biāo)簽設(shè)置寬高,背景色等 ? a標(biāo)簽?zāi)J(rèn)是內(nèi)聯(lián)元素,寬高是沒有作用的
代碼如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ display:inline-block; /*內(nèi)聯(lián)塊狀元素*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <a href="#">歡迎大家來到php中文網(wǎng)</a> </body> </html>
如上代碼,當(dāng)我們把 ?a ?標(biāo)簽轉(zhuǎn)換成內(nèi)聯(lián)塊狀元素之后,是可以設(shè)置寬高