塊狀元素和行內元素的概念是在css
頁面布局這個地方出現。主要是將
html
標籤按照一定的特性分成
2類：塊狀元素和行內元素（內聯元素）。
一塊狀元素
1.1 概念理解
塊狀元素（block element
），字面理解就是乙個方塊嘛，它一般是其它元素的容器元素，可以容納塊狀元素和行內元素，它預設是不會和其它元素同一行的，即相當於兩個塊狀元素寫一塊是垂直布局的。
小例子：
1.2 常用塊狀元素
定義位址
定義**標題
定義列表中定義條目
定義文件中的分割槽或節
定義列表
定義列表中的專案
定義乙個框架集
建立 html 表單
定義最大的標題
定義副標題
定義標題
定義標題
定義標題
定義最小的標題
建立一條水平線
元素為 fieldset 元素定義標題
標籤定義列表專案
為那些不支援框架的瀏覽器顯示文字，於 frameset 元素內部
定義在指令碼未被執行時的替代內容
定義有序列表
定義無序列表
標籤定義段落
定義預格式化的文字
標籤定義 html **
標籤**主體（正文）
**中的標準單元格
定義**的頁尾（腳注或表注）
定義表頭單元格
標籤定義**的表頭
定義**中的行
二 行內元素
2.1概念理解
行內元素（inline element
）又稱內聯元素，個人覺得行內元素能讓人更通俗一些去理解。行內元素一般基於語義元素，它只能夠容納文字以及其它的行內元素。常見的行內元素有 超連結a、
span
、元素img
（是行內元素，
img是屬於行內替換元素
(replace inline element)
，屬於inline element類的）
。 行內元素跟塊狀元素的差異基本是，行內元素並不從新的一行開始，水平方向會乙個個接著。每個塊狀元素會從新的一行開始。
強調一下：當css
對內聯元素定義這兩屬性中的一種之後，這些行內元素會具有塊狀元素屬性！例如會重新的一行開始，就像後面跟了乙個換行符一樣。 1、
display：
block;
2、float:left/right;
小例子：
有display: block;
當對img還有a
新增display: block;
之後，它們就像塊狀元素一樣，從新的一行開始了，而且具有了
width,heigh
屬性！如果僅僅是行內元素，不去設定它為
display: block;
是沒有辦法設定它的寬高的，它顯示的寬度和告訴就是被儲存的高度和寬度，就像對於
img來說是比較不方便的。
2.2常用行內元素
標籤可定義錨
表示乙個縮寫形式
定義只取首字母縮寫
字型加粗
可覆蓋預設的文字方向
大號字型加粗
換行引用進行定義
定義計算機**文字
定義乙個定義專案
定義為強調的內容
斜體文字效果
向網頁中嵌入一幅影象
輸入框定義鍵盤文字
標籤為 input
元素定義標註（標記）
定義短的引用
定義樣本文字
建立單選或多選選單
呈現小號字型效果
組合文件中的行內元素
語氣更強的強調的內容
定義下標文字
定義上標文字
多行的文字輸入控制項
打字機或者等寬的文字效果
定義變數
三 可變元素
3.1概念理解
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素
3.2常用可變元素 按鈕
定義文件中已被刪除的文字
建立包含另外乙個文件的內聯框架（即行內框架）
標籤定義已經被插入文件中的文字
客戶端影象對映（即熱區）
object物件
客戶端指令碼
行內元素 塊狀元素 行內塊狀元素
頁面元素主要分為三類 塊元素 行內元素，行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div，其他如p h1 h6 ul ol dl...
HTML塊狀元素 行內元素 行內塊狀元素學習筆記
特點常用元素 display轉換 塊狀元素 1 每個元素佔單獨一行 2 可識別寬高 3 margin 上下左右有效 4 padding 上下左右有效 div p section ul li header footer block 行內元素 1 每個元素預設從左到右排列，不單獨占行 2 對寬高屬性無效...
內聯元素（行內元素），塊狀元素，行內塊狀元素的區別
html 元素指的是從開始標籤到結束標籤的所有 元素的分類方式分為行內元素 塊狀元素和行內塊狀元素三種，這三者可以通過設定display屬性值實現相互轉化。1 display inline 轉換為行內元素 2 display block 轉換為塊狀元素 3 display inline block ...