前端開發入門到實戰：html塊級元素和行級元素的區別和認識

行內、塊狀元素區別：

1.行內元素與塊級函式可以相互轉換，透過修改display屬性值來切換塊級元素和行內元素，行內元素display：inline，塊級元素display：block。

2.行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；塊級元素卻總是會在新的一行開始排列，各個塊級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。

3.行內元素不可以設定寬高，寬度高度隨文字內容的變化而變化，但是可以設定行高（line-height），同時在設定外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；塊級元素可以設定寬高，並且寬度高度以及外邊距，內填充都可隨意控制。

4.塊級元素可以包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文字或者其他行內元素。

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習圈：784783012 歡迎大家進群,共同進步。
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有效資源還是很有必要的。

行內、塊狀元素 特點

在標準文件流裡面，塊級元素具有以下特點：

①總是在新行上開始，佔據一整行；
②高度，行高以及外邊距和內邊距都可控制；
③寬頻始終是與瀏覽器寬度一樣，與內容無關；
④它可以容納內聯元素和其他塊元素。

行內元素的特點：

①和其他元素都在一行上；
②高，行高及外邊距和內邊距部分可改變；
③寬度只與內容有關；
④行內元素只能容納文字或者其他行內元素。

不可以設定寬高，其寬度隨著內容增加，高度隨字型大小而改變，內聯元素可以設定外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設定內邊界，但是內邊界在ie6中不對上下起作用，只能對左右起作用

塊級元素有哪些？

address 定義地址
caption 定義表格標題
dd 定義列表中定義條目
div 定義文件中的分割槽或節
dl 定義列表
dt 定義列表中的專案
fieldset 定義一個框架集
form 建立 HTML 表單
h1 定義最大的標題
h2 定義副標題
h3 定義標題
h4>定義標題
h5定義標題
h6定義最小的標題
hr 建立一條水平線
legend 元素為 fieldset 元素定義標題
li 標籤定義列表專案
noframes 為那些不支援框架的瀏覽器顯示文字，於 frameset 元素內部
noscript 定義在指令碼未被執行時的替代內容
ol 定義有序列表
ul 定義無序列表
p 標籤定義段落
pre 定義預格式化的文字
table 標籤定義 HTML 表格
tbody 標籤表格主體（正文）
td 表格中的標準單元格
tfoot 定義表格的頁尾（腳註或表注）
th 定義表頭單元格
thead 標籤定義表格的表頭
tr 定義表格中的行

行內元素 有哪些？

a 標籤可定義錨
abbr 表示一個縮寫形式
acronym 定義只取首字母縮寫
b 字型加粗
bdo 可覆蓋預設的文字方向
big 大號字型加粗
br 換行
cite 引用進行定義
code 定義計算機程式碼文字
dfn 定義一個定義專案
em 定義為強調的內容
i 斜體文字效果
img 向網頁中嵌入一幅影像
input 輸入框
kbd 定義鍵盤文字
label 標籤為 input 元素定義標註（標記）
q 定義短的引用
samp 定義樣本文字
select 建立單選或多選選單
small>呈現小號字型效果
span 組合文件中的行內元素
strong 語氣更強的強調的內容
sub 定義下標文字
sup>定義上標文字
textarea 多行的文字輸入控制元件
tt 打字機或者等寬的文字效果
var 定義變數

可變元素

可變元素為根據上下文語境決定該元素為塊元素或者內聯元素

button 按鈕
del 定義文件中已被刪除的文字
iframe 建立包含另外一個文件的內聯框架（即行內框架）
ins 標籤定義已經被插入文件中的文字
map 客戶端影像對映（即熱區）
object object物件

注意：塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。