一. 行屬性標籤以及塊屬性標籤特點
根據標籤特性進行分類：
1.行屬性標籤。 默認display：inline;
特點1：可以和其他行屬性標籤放置在同一行。 a, span, em, strong等。
特點2：行屬性標籤的區域大小隻由內容來撐開，width和height屬性是無效的。
2.塊屬性標籤。 默認display: block;
特點1：獨佔一行。 Div,p,h1~h6,ol,ul,li等。
特點2：塊屬性標籤寬度默認和父元素寬度保持一致，高度由內容撐開，但是可以通過width和 height屬性來更改寬高。
3.行內塊屬性標籤。 默認 display:inline-block; 比如:img，input。
特點1：可以和其他行屬性標籤以及行內塊屬性標籤放置在同一行。
特點2：可以通過css屬性修改寬高，width和height兩個屬性是有效的。
解決的實質性問題：如果一個行屬性標籤（a，span）想要進行寬高的修改，就必須將display設置爲inline-block。
二. Display屬性的用法
作用：用來更改元素的特性。 行屬性標籤更改爲塊屬性標籤，也可以反過來。
用法：直接給元素添加display屬性即可， display: inline(行屬性標籤),block(塊屬性標籤),inline-block(行內塊屬性標籤), none(元素隱藏掉);
三.舉例說明
1.p標籤是塊標籤，可以設置高度和寬度
a標籤是行標籤，如果設置高度和寬度則沒有效果，其區域的大小則由內容撐開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度首頁總結</title>
<style type="text/css">
.p1{
background-color: yellow;
width: 500px;
height: 200px;
/*將塊屬性標籤改爲行屬性標籤 */
/*用來更改元素的特性， 可以將行屬性標籤改爲 塊屬性標籤，也可以反過來使用*/
/*display: inline;*/
}
.a1{
background-color: red;
/*行屬性標籤的區域大小隻能由內容來撐開*/
width: 500px;
height: 200px;
/*display: block;*/
}
</style>
</head>
<body>
<!--
根據標籤特性：是否獨佔一行的特性來分類。
-->
<p class="p1">塊屬性標籤</p>
<a href="" class="a1">行屬性標籤</a>
</body>
</html>
效果圖：
2. 將p標籤內添加屬性display: inline;則塊標籤轉化爲行標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度首頁總結</title>
<style type="text/css">
.p1{
background-color: yellow;
width: 500px;
height: 200px;
/*將塊屬性標籤改爲行屬性標籤 */
/*用來更改元素的特性， 可以將行屬性標籤改爲 塊屬性標籤，也可以反過來使用*/
display: inline;
}
.a1{
background-color: red;
/*行屬性標籤的區域大小隻能由內容來撐開*/
width: 500px;
height: 200px;
/*display: block;*/
}
</style>
</head>
<body>
<!--
根據標籤特性：是否獨佔一行的特性來分類。
-->
<p class="p1">塊屬性標籤</p>
<a href="" class="a1">行屬性標籤</a>
</body>
</html>
效果圖：（設置的字體有點小，可點擊查看）
3.在a標籤內添加display: block; 則行標籤轉化爲塊標籤，此時設置的寬度width和高度height將產生效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度首頁總結</title>
<style type="text/css">
.p1{
background-color: yellow;
width: 500px;
height: 200px;
/*將塊屬性標籤改爲行屬性標籤 */
/*用來更改元素的特性， 可以將行屬性標籤改爲 塊屬性標籤，也可以反過來使用*/
/*display: inline;*/
}
.a1{
background-color: red;
/*行屬性標籤的區域大小隻能由內容來撐開*/
width: 500px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<!--
根據標籤特性：是否獨佔一行的特性來分類。
-->
<p class="p1">塊屬性標籤</p>
<a href="" class="a1">行屬性標籤</a>
</body>
</html>
效果圖：
