在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素(行內元素)(inline)元素。當然區塊狀元素也可以透過程式碼將元素設定為內聯元素
display:inline
內聯元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設定;
3、元素的寬度就是它所包含的文字或圖片的寬度,不可改變。
下面我們來寫一段程式碼,塊狀元素是可以設定寬高的 內聯元素是設定不了寬高的
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ width:100px; height:50px; background-color:green; /*设置背景色*/ color:#fff; /*设置字体颜色*/ } </style> </head> <body> <a href="#">PHP中文网</a> </body> </html>
看上面這段程式碼,a 是內聯元素,當我們設定寬高,是沒有效果的,轉換成塊狀元素就會有明顯效果
下面我們來寫一個實例 把塊狀元素轉換成內聯元素
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后,我们设置宽高,背景色,文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>
以上程式碼中,塊狀元素轉換成內聯元素之後是不可以設定寬高的
下一節