1、什么是元素的顯示模式
作用：網頁的標簽非常多，在不同的地方會用到不同類型的標簽，了解他們的特點可以更好地布局我們的網頁
元素的顯示模式就是元素以什么方式來進行顯示，比如<div>自己獨占一行，一行又可以放多個<span>
html一般分為塊元素和行內元素兩種類型
2、塊元素
（1）常見的塊元素：
常見的塊元素有：<h1>-<h5>、<p>、<div>、<ul>、<ol>、<li>等
（2）特點
自己獨占一行
高度、寬度、外邊距以及內邊距都可以控制
寬度默認是容器的100%
是一個容器級盒子，里面可以存放行內或者塊級元素
（3）舉例
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 300px; height: 200px; background-color: darkgoldenrod; } </style> </head> <body> <div>你好，今天是星期天</div> <p>123</p> </body> </html>
即使一行中還有其他元素，也不會在后面顯示，而是重新開始新的一行
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ height: 200px; background-color: darkgoldenrod; } </style> </head> <body> <div>你好，今天是星期天</div> <p>123</p> </body> </html>
不設置寬度的時候默認占滿整個瀏覽器
（3）注意
文字類內的元素不能使用塊級元素，例如：<p>標簽主要用於存放文字，因此<p>標簽內部不能使用塊級元素，特別是不能存放<div>，同理，<h1>---<h6>都是文字類塊級標簽，里面也不能存放其他塊級元素
3、行內元素
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽是最典型的行內標簽，也可以稱為內聯元素
（1）相鄰行內元素在一行上，一行可以顯示多個行內元素
<html> <head> <meta charset="utf-8"> <title></title> <style> </style> </head> <body> <span>你好</span> <strong>hello</strong> <a href="#">新聞</a> </body> </html>
（2）高度和寬度的設置時無效的：
<html> <head> <meta charset="utf-8"> <title></title> <style> span{ width: 200px; height: 300px; background-color: yellow; } </style> </head> <body> <span>你好</span> <strong>hello</strong> <a href="#">新聞</a> </body> </html>
（3）默認的高度就是它的內容本身的元素：
<html> <head> <meta charset="utf-8"> <title></title> <style> strong{ width: 200px; background-color: yellow; } </style> </head> <body> <span>你好</span> <strong>hello<br>niaho</strong> </body> </html>
（4）行內元素只能存放文本或其他行內元素：
<html> <head> <meta charset="utf-8"> <title></title> <style> strong{ width: 200px; background-color: yellow; } </style> </head> <body> <span>世上無難事，<strong>只要肯攀登</strong></span> </body> </html>
（5）鏈接標簽里面不能再包含其它鏈接標簽
（6）<a>標簽可以存放塊級元素
<html> <head> <meta charset="utf-8"> <title></title> <style> .div1{ width: 200px; height: 100px; background-color: yellow; } .div2{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <a href="#"> <div class="div1"></div> <div class="div2"></div> </a> </body> </html>
4、行內塊元素
在行內元素中有幾個特殊的標簽：<img/>、<input/>、<td>，他們同時具有塊元素和行內元素的特點，稱為行內塊元素
（1）特點
和相鄰行內元素在一行上（行內塊），但是它們之間會有白色空隙，一行可以顯示多個
默認寬度就是它本身內容的寬度
高度、行高、外邊距以及內邊距都可以控制
（2）示例
<html> <head> <meta charset="utf-8"> <title></title> <style> input { height: 100px; width: 200px; } </style> </head> <body> <input type="text" /> <input type="text" /> </body> </html>
5、元素顯示模式的轉換
有的時候一個模式的元素需要另外一種模式的特性
（1）行內元素轉換為塊級元素：
<html> <head> <meta charset="utf-8"> <title></title> <style> a{ width: 100px; height: 50px; background-color: greenyellow; /*把行內元素轉換為塊級元素*/ display: block; } </style> </head> <body> <a href="#">新聞</a> </body> </html>
此時的鏈接已經由行內元素轉換成了塊級元素，此時，鏈接具有寬度和高度
（2）塊級元素轉換為行內元素：
<html> <head> <meta charset="utf-8"> <title></title> <style> .class1{ width: 100px; height: 50px; background-color: greenyellow; /*把塊級元素轉換為行內元素*/ display:inline; } .class2{ width: 100px; height: 50px; background-color:red; display: inline; } </style> </head> <body> <div class="class1">你好</div> <div class="class2">hello</div> </body> </html>
可以看到，高度和寬度屬性已經不起作用了，由塊級元素轉換為行內元素
（3）行內塊元素
<html> <head> <meta charset="utf-8"> <title></title> <style> span{ width: 100px; height: 50px; background-color: greenyellow; /*把塊級元素轉換為行內元素*/ display:inline-block; } </style> </head> <body> <span>123</span> <span>456</span> </body> </html>
