一文讀懂塊狀元素和內聯元素
阿新 • • 發佈：2018-11-13
很多剛入坑前端的同學一直不懂div和span兩個標籤有什麼區別。那麼，有什麼區別呢？
答案就是div是塊狀元素，span是內聯元素。
那麼，塊狀元素（block）和內聯元素（inline）又有什麼區別呢？
塊狀元素：
- 後面的元素會從另起一行開始
- 高度，行高以及頂、底邊距都可控制
寬度是它所在容器的100%，或者自己設定一個寬度
內聯元素：
- 和其它元素都在一行上，需要使用br標籤進行換行
- 高度，行高以及頂、底邊距不可改變
- 寬度就是它所容納的子元素片的寬度，不可改變
塊狀元素與內聯元素的相互轉換：通過css控制
塊狀元素轉化為內聯元素：css設定display:inline
內聯元素轉化為塊狀元素：css設定display:block
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊狀元素和內聯元素的轉換</title> <style> #inline_to_block{ display: block; } #block_to_inline{ display: inline; } </style> </head> <body> <span>我是span</span> <span id="inline_to_block">我換行啦</span><!--如果成功轉化塊狀元素，則會另起一行 --> <span>我測試下</span> <hr> <div>我是div</div> <div id="block_to_inline">我不換行了</div><!--如果成功轉化內聯元素，則不會另起一行 --> <span>我測試下</span> </body> </html>
結果如下：
常見塊狀元素和內聯元素如下：
塊狀元素：
address - 地址
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級元素，無語意
dl - 定義列表
fieldset - form控制組
form - 互動表單
h1~h6 - 標題
hr - 水平分隔線
menu - 選單列表
li - 列表
ol - 有序列表
ul - 無序列表
p - 段落
pre - 格式化文字
table - 表格
內聯元素：
a - 錨點
b - 粗體
big - 大字型
br - 換行
code - 計算機程式碼
em - 強調
font - 字型設定
i - 斜體
img - 圖片
input - 輸入框
label - 表格標籤
small - 小字型文字
span - 常用內聯元素，無語義
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文字輸入框
新手上路，如有錯誤麻煩大家告訴我，謝謝！
本次的學習就到此結束啦！感興趣的讀者或者想和我聊聊的請私信我，或者關注公眾號：程式設計師吃橘子。