p、h1、或div等元素常常稱為塊級元素，這些元素顯示為一塊内容；Strong,span等元素稱為行内元素，它們的内容顯示在行中，即“行内框”。（可以使用display=block将行内元素轉換成塊元素，display=none表示生成的元素根本沒有框，也既不顯示元素，不占用文檔中的空間）
《CSS權威指南》中文中：任何不是塊級元素的可見元素都是内聯元素。其表現的特性是“ 行布局”形式，這裡的“行布局”的意思就是說其表現形式始終以行進行顯示。這些知識在WEBJX.com上有較多的文章。比如，我們設定一個内聯元素border-bottom:1px solid #000;時其表現是以每行進行重複，每一行下方都會有一條黑色的細線。如果是塊級元素那麼所顯示的的黑線隻會在塊的下方出現。
A：行内就是在一行内的元素，隻能放在行内；塊級元素，就是一個四方塊，可以放在頁面上任何地方。
B：說白了，行内元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的話，它将獨立一行出現。
C：一般的 塊級元素諸如段落<p>、标 題<h1><h2>…、清單,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而内聯元素則如: 表單元素<input>、超級連結<a>、圖像<img>、<span> ……..
D：塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其後的無素也需另起一行進行顯示。
E：<span>在CSS定義中屬于一個行内元素，而<div>是塊級元素。
用容器這一詞會更容易形象了解它們的存在與用途，行内元素相當一個小容器，而<div>相當于一個大容器，大容器當然可以放一個小容器 了。<span>就是小容器。
塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納内聯元素和其他塊元素,常見塊元素是段落标簽’P”。“form”這個塊元素比較特殊，它隻能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标簽也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種布局，除了頁面載入速度的差别外，沒有其他的差别。但是如果普通使用者不經意點了 檢視頁面源代碼按鈕後，兩者所表現出來的差異就非常大了。基于良好重構理念設計的css布局頁面源碼，至少也能讓沒有web開發經驗的普通使用者把内容快 速的讀懂。從這個角度來說，css layout code應該有更好的美學體驗吧。
你能夠把塊容器元素div想象成一個個box，或者如果你玩過剪貼文載的話，那就更加容易了解了。我們先把需要的文章從各種報紙、雜志總剪 下來。每塊剪下來的内容就是一個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報 了。作為一種技術的延伸，網頁布局設計也遵循了同樣的模式。
内聯元素(inline element)一般都是基于語義級(semantic)的基本元素。内聯元素隻能容納文本或者其他内聯元素，常見内聯元素 “a”。
塊元素(block element)和内聯元素(inline element)都是html規範中的概念。塊元素和内聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和内聯元素的這種屬 性差異就不成為差異了。比如，我們完全可以把内聯元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。
可變元素的基本概念就是他需要根據上下文關系确定該元素是塊元素或者内聯元素。可變元素還是屬于上述兩種元素類别，一旦上下文關系确定了他的類别，他就要遵循塊元素或者内聯元素的規則限制。大緻的元素分類見全文。
ps:關于inline element的中文叫法，有多種内聯元素、内嵌元素、行内元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到内聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修複著名的IE雙倍浮動邊界(float時margin)問題。
塊元素(block element)
| * address - 位址 * blockquote - 塊引用 * center - 舉中對齊塊 * dir - 目錄清單 * div - 常用塊級容易，也是css layout的主要标簽 * dl - 定義清單 * dt - 定義标題 * dd - 定義(标題的)描述 * fieldset - form控制組 * form - 互動表單 * h1 - 大标題 * h2 - 副标題 * h3 - 3級标題 * h4 - 4級标題 * h5 - 5級标題 * h6 - 6級标題 * hr - 水準分隔線 * isindex - input prompt * menu - 菜單清單 * noframes - frames可選内容，（對于不支援frame的浏覽器顯示此區塊内容 * noscript - ）可選腳本内容（對于不支援script的浏覽器顯示此内容） * ol - 排序表單 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序清單 * li - 清單項 |
内聯元素(inline element)
| * a - 錨點 * abbr - 縮寫 * acronym - 首字 * label - 為input定義标記 * bdo - bidi override * big - 大字型 * br - 換行 * cite - 引用 * code - 計算機代碼(在引用源碼的時候需要) * dfn - 定義字段 * em - 強調 * font - 字型設定(不推薦) * i - 斜體 * img - 圖檔 * input - 輸入框 * kbd - 定義鍵盤文本 * label - 表格标簽 * q - 短引用 * s - 中劃線(不推薦) * samp - 定義範例計算機代碼 * select - 項目選擇 * small - 小字型文本 * span - 常用内聯容器，定義文本内區塊 * strike - 中劃線 * strong - 粗體強調 * sub - 下标 * sup - 上标 * textarea - 多行文本輸入框 * tt - 電傳文本 * u - 下劃線 * var - 定義變量 |
可變元素——可變元素為根據上下文語境決定該元素為塊元素或者内聯元素。
| * applet - java applet * button - 按鈕 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖檔區塊(map) * object - object對象 * script - 用戶端腳本 |
備注：
1、div 和span 都是無意義标簽。div是布局用的塊屬性，span 是行内标簽是放文字。div是唯一一個可以為空的标簽。
2、input是唯一一個可以設寬高的行内标簽。img 也可以高寬度，但實際不希望給他标簽，為了與程式配合一般都在img标簽時寫寬高
3、textarea也是可以加寬高的，直接使用css的 width 和 height 屬性設定寬高。
4、strong 行内标簽是加粗 在seo中講到優化裡用strong 标簽是比較友好的
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)