HTML+CSS 輕鬆入門內嵌元素

在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>

以上程式碼中，塊狀元素轉換成內聯元素之後是不可以設定寬高的

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX