網頁製作webjx文章簡介：
是在css布局頁面中很重要的兩個概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內聯元素的定義。
在用css布局頁面的時候，我們會將html標籤分成兩種，塊狀元素和內聯元素（我們平常用到的div和p就是塊狀元素，鏈結標籤a就是內聯元素）。是在css布局頁面中很重要的兩個概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內聯元素的定義。
注：這節課看似挺長，其實內容很少，通過舉例子讓大家更容易理解而已，不要被眼前的文字和**嚇到喲~
塊狀元素 一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位於同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。
內聯元素內聯元素只能容納文字或者其他內聯元素，它允許其他內聯元素與其位於同一行，但寬度(width)高度(height)不起作用。常見內聯元素為「a」。做了個對比表，幫助大家更容易理解。
塊狀元素
內聯元素
是否允許其他元素同處一行
noyes
width和height是否起作用
yesno
對於上面的概念，我們用例項的方式給大家講明白，要注意聽喲~
要求：id為div1的紅色(#900)區域，寬度和高度均為300畫素，並且包含乙個id為div2的綠色區域，長度寬度css**如下：均為100畫素的div2。
#div1
#div2
html**如下：
為了方便初學者更好的學習，我把完整的**發出來
"">
怎麼樣，是不是下面的效果
如果你做出來了，就繼續往下看，咱們給剛才的要求再加乙個條件，在div1裡放入乙個鏈結a，內容為「可容納內聯
元素和其他塊狀元素」顏色為白色。
css**如下：
#div1
#div2a
html**如下：
可容納內聯元素和其他塊狀元素
是不是下面的效果
到這裡，我們可以看得到div1這個塊狀元素裡面擁有兩個元素，乙個是塊狀元素div2，另乙個是內聯元素a，這就是塊狀元素概念裡面說的「一般是其他元 素的容器，可容納內聯元素和其他塊狀元素」，為什麼要說一般呢，因為塊狀元素不只是用來做容器，有時還有其他用途，比如利用塊狀元素將上下兩個元素隔開些 距離，再比如利用塊狀元素來實現父級元素的高度自適應，這方面的內容會在後面詳細講解，因為不屬於本節知識，就不多說。
好~！我們繼續加條件，在div1裡面div2的後面再放入乙個id為div3的長寬均為100畫素的藍色(#009)區域塊，**如
下css**如下：
#div1
#div2
#div3a
html**如下：
可容納內聯元素和其他塊狀元素
是不是下面這個效果
是不是和自己事先想象的不一樣，本以為藍色會處於綠色的右側，可是卻位於下側，如果你再加幾個div4，div5同樣的他們還是繼續位於前乙個下面，垂直 排列，這就是塊狀元素概念中說的「塊狀元素排斥其他元素與其位於同一行」說白了，就是塊狀元素比較霸道，誰都別想和他坐同一行，甭管你是和他有親戚關係的 塊狀元素還是毫無聯絡的內聯元素，都不行，都到下面一行待著去，看看例子中，綠色方塊和藍色方塊是不是各處同一行，內聯元素a也別想和他處一行，但是事情 是沒有絕對的，塊狀元素不是不允許其他元素和他處一行嘛，不是比較霸道嘛，沒關係，咱有辦法，具體什麼辦法，我們後面會詳細講解，知識不屬於本節內容，就 也不多說了，大家留意後面的教程唷~
到這裡，我想大家對「塊狀元素」的概念已經比較清楚了，下面通過例子給大家繼續解釋「內聯元素」的概念，當然還是繼續加條件，加個什麼條件呢，在a的後面再加乙個內容為「love css」的鏈結，所有鏈結的背景設定為淡橙色(#f93)
css**如下：
#div1
#div2
#div3a
html**如下：
可容納內聯元素和其他塊狀元素
love css
效果是不是下面這個
兩個連線a是不是處於同一行(不要忘記a是內聯元素喲~)，這就解釋了概念上說的「內聯元素允許其他內聯元素與其位於同一行」，為什麼不說「內聯元素允許 其他元素與其位於同一行」，因為其他元素包括兩種元素，內聯元素和塊狀元素，它如果和內聯元素在一塊那就肯定在一行了，如果和塊狀元素在一塊，即使它同 意，他後面的塊狀元素也不同意，塊狀元素會另起一行位於它的下一行。
我們繼續新增條件，現在大家給內聯元素a在css中加上寬度和高度，比如width:100px;height:50px;看看有什麼變化
css**
#div1
#div2
#div3a
看到效果了沒有，是不是沒有任何變化呢，這就說明了概念中的內聯元素的寬度(width)高度(height)不起作用，它的大小只隨內部文字或者其他內聯元素變化，具體證明算是給大家乙個作業，自己來證明一下。
如 果要讓定義好的寬度和高度對內聯元素起作用，有什麼辦法沒有？答案是：當然。因為事情沒有絕對的在css上面也成立，因為css中有兩種元素，內聯元素和 塊狀元素，但是寬度和高度只對塊狀元素起作用，內聯元素不起作用，如果我們把內聯元素轉化成塊狀元素，他不就具有了塊狀元素的特性了嘛，當然寬度和高度也 就起作用了，如果你能想到這個思路，證明你的大腦現在非常活躍喲，這時候我們只需要給相應的內聯元素加上乙個屬性display:block就可以了，如 下a
怎麼樣，起作用了吧，和下面的效果一樣嘛~
為什麼兩個a不處於同一行了呢，那是因為這兩個內聯元素a都被轉化成了塊狀元素，既然成功轉化為塊狀元素，就應該具有塊狀元素最顯著的乙個特點，不允許其他元素與他同一行，所以這兩個a垂直排列嘍~
那有沒有把法讓他們處於同一行？當然有啦，後面課程會告訴大家^_^
好了，到這裡，大家通過例項對內聯元素的概念理解的也應該很透徹了，後面就列出所有的內聯元素和塊狀元素，方便以後大家查閱
塊元素(block element)address - 位址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易，也是css layout的主要標籤
dl - 定義列表
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 - 非排序列表
內聯元素(inline element)a - 錨點abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
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 - 定義變數
CSS 塊狀元素和內斂聯元素詳解
我們先來分析一下塊級元素 內聯級元素的定義和解析 塊元素 block element 一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的...
CSS 塊狀元素和內聯元素
塊狀元素 一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位於同一行，寬度 width 高度 height 起作用。常見塊狀元素為div和p。內聯元素 內聯元素只能容納文字或者其他內聯元素，它允許其他內聯元素與其位於同一行，但寬度 width 高度 height 不起作用...
塊狀元素 內聯元素 和內聯塊狀元素的概念與區別
塊狀元素block 該元素前後會有換行符，可以設定margin和padding 內聯元素inline 元素前後沒有換行符，和其他元素在一行上，水平方向可以設定margin和padding，豎直方向不可以 而內聯元素inline block 既有塊狀元素的性質又有內聯元素的性質，即 1 和其他元素都在...