顯示模式Display
我們的網頁標籤有很多，在不同的地方會用到不同類型的標籤，以便於更好的展示我們的網頁。標籤的類型即顯示模式，一般可以分爲塊標籤和行內標籤兩種類型，也可以稱之爲塊元素和行內元素。
一、塊級元素（Block-Level）
每個塊元素通常會獨自佔據一整行或者多個整行，可以對其設置其寬度、高度、對其等屬性，常用於網頁佈局和網頁結構的搭建，用一個詞形容它，就是“霸道”。
常見的塊元素有<h1>~<h6>、<div>、<P>、<ul>、<ol>、<li>等，其中<div>標籤是最最典型的塊元素。因爲Div天生麗質，特別適合佈局，所以我們常稱之爲“CSS+DIV”佈局。
總結一下塊級元素的特點：
- 總是從新的一行開始；
- 高度、行高、外邊距以及內邊距都可以控制；
- 寬度默認是容器的100%（和屏幕一樣寬）；
- 可以容納內聯元素和其他塊元素；
二、行內元素（Inline-Level）
行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。
常見的行內元素有<a>、<strong>、<br>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤是最最典型的應用。
總結一下行內元素的特點：
- 和相鄰行業元素可以在一行上面；
- 高度和寬度無效，但水平方向的padding和margin可以設置，垂直方向的無效；
- 默認寬度就是它本身內容的寬度；
- 行內元素只能容納文本或者其他行內元素（其中<a>比較特殊）；
- 只有文字才能組成段落，因此P標籤裏面不能放塊級元素，同理的還有這些標籤H1~H6和DT等，它們都是文字類型的塊級元素，裏面不能容納其他塊級元素；
- 鏈接裏面不能再放鏈接；
三、行內塊元素（Inline-Block）
在行內元素中有幾個特殊的標籤（<img />、<input />、<td>），可以對他們設置寬高和對齊屬性，我們就可以稱之爲行內塊元素。
行內塊元素有如下特點：
- 和相鄰行內元素（行內塊元素）在一行上，但是之間會有一點空白的縫隙；
- 默認寬度就是它本身的內容寬度；
- 高度、行高、外邊距以及內邊距都可以控制；
【綜合樣例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顯示模式</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
}
span{
width: 100px;
height: 100px;
background-color: pink;
}
input{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div>Div</div>
<div>DivDiv</div>
<div>DivDivDiv</div>
<span>Span</span>
<span>SpanSpan</span>
<span>SpanSpanSpan</span>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
【顯示效果】
四、標籤顯示模式的相互轉換
- 塊級元素轉行內元素 ： display:inline
- 行內元素轉塊級元素：display:block
- 塊級、行內元素轉行內塊元素：display:inline-block
【綜合樣例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模式轉換</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
display: inline; /*塊級元素轉行內元素*/
}
span{
width: 100px;
height: 100px;
background-color: pink;
display: block; /*行內元素轉塊級元素*/
}
a{
width: 100px;
height: 100px;
background-color: skyblue;
display: inline-block; /*塊級、行內元素轉行內塊元素*/
}
</style>
</head>
<body>
<div>Div</div>
<div>DivDiv</div>
<div>DivDivDiv</div>
<span>Span</span>
<span>SpanSpan</span>
<span>SpanSpanSpan</span>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
</body>
</html>
【顯示效果】
