寫在前面：參考嗶哩嗶哩黑馬程式員pink老師教程
地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26

標簽顯示模式（display）重點

什么是標簽顯示模式

塊級元素(block-level)

行內元素(inline-level)

行內塊元素（inline-block）

三種模式總結區別

標簽顯示模式轉換 display

標簽顯示模式（display）重點

什么是標簽顯示模式

什么是標簽的顯示模式？
標簽以什么方式進行顯示，比如div 自己占一行，比如span 一行可以放很多個
作用：
我們網頁的標簽非常多，再不同地方會用到不同型別的標簽，以便更好的完成我們的網頁，
標簽的型別(分類)
HTML標簽一般分為塊標簽和行內標簽兩種型別，它們也稱塊元素和行內元素，

塊級元素(block-level)

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素，

塊級元素的特點
比較霸道，自己獨占一行
高度，寬度、外邊距以及內邊距都可以控制
寬度默認是容器（父級寬度）的100%
是一個容器及盒子，里面可以放行內或者塊級元素
注意：
只有文字才能組成段落因此 p 里面不能放塊級元素，特別是 p 不能放div
同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素，

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*背景顏色 不要和 文字顏色混淆了 color*/
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>我是塊級元素</div>
	<div>我是塊級元素</div>
	<div>
		<strong>文字</strong>
		<h1>標題</h1>
	</div>
	<!-- p里面不能包含 div  段落p h  dt 里面盡量不要放塊級元素 -->
	<!-- <p>
		<div>123</div>
	</p> -->
</body>
</html>

行內元素(inline-level)

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素，有的地方也成行內元素

行內元素的特點：
相鄰行內元素在一行上，一行可以顯示多個
高、寬直接設定是無效的
默認寬度就是它本身內容的寬度
行內元素只能容納文本或則其他行內元素
注意：
鏈接里面不能再放鏈接
特殊情況a里面可以放塊級元素，但是給a轉換一下塊級模式最安全

行內塊元素（inline-block）

在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素，

行內塊元素的特點：
和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙，一行可以顯示多個
默認寬度就是它本身內容的寬度，
高度，行高、外邊距以及內邊距都可以控制

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			width: 200px;
		}
	</style>
</head>
<body>
	<img src="images/3.jpg" alt="">
	<img src="images/3.jpg" alt="">
	<img src="images/3.jpg" alt="">
</body>
</html>

三種模式總結區別

元素模式 元素排列 設定樣式 默認寬度 包含
塊級元素 一行只能放一個塊級元素可以設定寬度高度容器的100% 容器級可以包含任何標簽
行內元素 一行可以放多個行內元素不可以直接設定寬度高度它本身內容的寬度容納文本或則其他行內元素
行內塊元素 一行放多個行內塊元素可以設定寬度和高度它本身內容的寬度

元素模式	元素排列	設定樣式	默認寬度	包含
塊級元素	一行只能放一個塊級元素	可以設定寬度高度	容器的100%	容器級可以包含任何標簽
行內元素	一行可以放多個行內元素	不可以直接設定寬度高度	它本身內容的寬度	容納文本或則其他行內元素
行內塊元素	一行放多個行內塊元素	可以設定寬度和高度	它本身內容的寬度

標簽顯示模式轉換 display

塊轉行內	display:inline
行內轉塊	display:block
塊、行內元素轉換為行內塊	display: inline-block

演示代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		span {
			/*把行內元素轉換為塊級元素*/
			display: block;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		div {
			/*把塊級元素轉換為行內元素*/
			display: inline;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		a {
			/*轉換為 行內塊元素*/
			display: inline-block;
			width: 80px;
			height: 25px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<span>行內</span>
	<span>行內</span>

	<div>div 是塊級元素</div>
	<div>div 是塊級元素</div>
	<a href="#">百度</a>
	<a href="#">新浪</a>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/117536.html

標籤：其他

上一篇：GDB的第一次使用

下一篇：區塊鏈知識系列 - DPoS+Pipelined BFT共識機制

（CSS學習記錄）：標簽顯示模式（display）重點

標簽顯示模式（display）重點

什么是標簽顯示模式

塊級元素(block-level)

行內元素(inline-level)

行內塊元素（inline-block）

三種模式總結區別

標簽顯示模式轉換 display