- 寫在前面：參考嗶哩嗶哩黑馬程式員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% 容器級可以包含任何標簽 行內元素 一行可以放多個行內元素 不可以直接設定寬度高度 它本身內容的寬度 容納文本或則其他行內元素 行內塊元素 一行放多個行內塊元素 可以設定寬度和高度 它本身內容的寬度
標簽顯示模式轉換 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/ruanti/114815.html
標籤：其他
上一篇：GDB的第一次使用