DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 2個重要概念塊狀元素和內聯元素
2個重要概念塊狀元素和內聯元素
編輯：CSS詳解     
在用CSS布局頁面的時候，我們會將Html標簽分成兩種，塊狀元素和內聯元素（我們平常用到的div和p就是塊狀元素，鏈接標簽a就是內聯元素）。是在CSS布局頁面中很重要的兩個概念，必須要理解透徹！既然說到概念就先看看塊狀元素和內聯元素的定義。

注：這節課看似挺長，其實內容很少，通過舉例子讓大家更容易理解而已，不要被眼前的文字和代碼嚇到喲~
塊狀元素
一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位於同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。
內聯元素
內聯元素只能容納文本或者其他內聯元素，它允許其他內聯元素與其位於同一行，但寬度(width)高度(height)不起作用。常見內聯元素為“a”。
做了個對比表，幫助大家更容易理解。

  塊狀元素 內聯元素 是否允許其他元素同處一行 no yes width和height是否起作用 yes no

對於上面的概念，我們用實例的方式給大家講明白，要注意聽喲~
要求：ID為div1的紅色(#900)區域，寬度和高度均為300像素，並且包含一個ID為div2的綠色區域，長度寬度
均為100像素的div2。
CSS代碼如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
Html代碼如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. </div>
為了方便初學者更好的學習，我把完整的代碼發出來
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
  3. <html XMLns="http://www.w3.org/1999/xHtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
  6. <title>CSS學習網---“可容納內聯元素和其他塊狀元素”</title>
  7. <style type="text/CSS">
  8. <!--
  9. #div1{width:300px; height:300px; background:#900;}
  10. #div2{width:100px; height:100px; background:#090;}
  11. -->
  12. </style>
  13. </head>
  14. <body>
  15. <div id="div1">
  16. <div id="div2"></div>
  17. </div>
  18. </body>
  19. </Html>
怎麼樣，是不是下面的效果
 

1.gif

如果你做出來了，就繼續往下看，咱們給剛才的要求再加一個條件，在div1裡放入一個鏈接a，內容為“可容納內聯
元素和其他塊狀元素”顏色為白色。
CSS代碼如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. a{color:#fff;}
Html代碼如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <a href="#">可容納內聯元素和其他塊狀元素</a>
  4. </div>
是不是下面的效果
 

2.gif

到這裡，我們可以看得到div1這個塊狀元素裡面擁有兩個元素，一個是塊狀元素div2，另一個是內聯元素a，這就是塊狀元素概念裡面說的“一般是其他元素的容器，可容納內聯元素和其他塊狀元素”，為什麼要說一般呢，因為塊狀元素不只是用來做容器，有時還有其他用途，比如利用塊狀元素將上下兩個元素隔開些距離，再比如利用塊狀元素來實現父級元素的高度自適應，這方面的內容會在後面詳細講解，因為不屬於本節知識，就不多說。

好~！我們繼續加條件，在div1裡面div2的後面再放入一個ID為div3的長寬均為100像素的藍色(#009)區域塊，代碼如
下
CSS代碼如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff;}
Html代碼如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <div id="div3"></div>
  4. <a href="#">可容納內聯元素和其他塊狀元素</a>
  5. </div>
是不是下面這個效果
 

3.gif

是不是和自己事先想象的不一樣，本以為藍色會處於綠色的右側，可是卻位於下側，如果你再加幾個div4，div5同樣的他們還是繼續位於前一個下面，垂直排列，這就是塊狀元素概念中說的“塊狀元素排斥其他元素與其位於同一行”說白了，就是塊狀元素比較霸道，誰都別想和他坐同一行，甭管你是和他有親戚關系的塊狀元素還是毫無聯系的內聯元素，都不行，都到下面一行待著去，看看例子中，綠色方塊和藍色方塊是不是各處同一行，內聯元素a也別想和他處一行，但是事情是沒有絕對的，塊狀元素不是不允許其他元素和他處一行嘛，不是比較霸道嘛，沒關系，咱有辦法，具體什麼辦法，我們後面會詳細講解，知識不屬於本節內容，就也不多說了，大家留意後面的教程唷~

到這裡，我想大家對“塊狀元素”的概念已經比較清楚了，下面通過例子給大家繼續解釋“內聯元素”的概念，當然還是繼續加條件，加個什麼條件呢，在a的後面再加一個內容為“Love CSS”的鏈接，所有鏈接的背景設置為淡橙色(#F93)
CSS代碼如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff; background:#F93;}
Html代碼如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <div id="div3"></div>
  4. <a href="#">可容納內聯元素和其他塊狀元素</a>
  5. <a href="#">Love CSS</a>
  6. </div>
效果是不是下面這個
 

4.gif

兩個連接a是不是處於同一行(不要忘記a是內聯元素喲~)，這就解釋了概念上說的“內聯元素允許其他內聯元素與其位於同一行”，為什麼不說“內聯元素允許其他元素與其位於同一行”，因為其他元素包括兩種元素，內聯元素和塊狀元素，它如果和內聯元素在一塊那就肯定在一行了，如果和塊狀元素在一塊，即使它同意，他後面的塊狀元素也不同意，塊狀元素會另起一行位於它的下一行。

我們繼續添加條件，現在大家給內聯元素a在CSS中加上寬度和高度，比如width:100px;height:50px;看看有什麼變化
CSS代碼
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff; background:#F93;width:100px;height:50px;}
看到效果了沒有，是不是沒有任何變化呢，這就說明了概念中的內聯元素的寬度(width)高度(height)不起作用，它的大小只隨內部文本或者其他內聯元素變化，具體證明算是給大家一個作業，自己來證明一下。

如果要讓定義好的寬度和高度對內聯元素起作用，有什麼辦法沒有？答案是：當然。因為事情沒有絕對的在CSS上面也成立，因為CSS中有兩種元素，內聯元素和塊狀元素，但是寬度和高度只對塊狀元素起作用，內聯元素不起作用，如果我們把內聯元素轉化成塊狀元素，他不就具有了塊狀元素的特性了嘛，當然寬度和高度也就起作用了，如果你能想到這個思路，證明你的大腦現在非常活躍喲，這時候我們只需要給相應的內聯元素加上一個屬性display:block就可以了，如下
  1. a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
怎麼樣，起作用了吧，和下面的效果一樣嘛~
 

5.gif

為什麼兩個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詳解
網站變黑白色CSS一行代碼實現
5．12地震給四川人民帶來了巨大災難，5月19日到5月21日為全國哀悼日，有很多網站界面今天都變成
簡化的CSS Reset:15套CSS重設實例
在當今網頁設計/開發實踐中，使用CSS來為語義化的(X)Html標記添加樣式風格是重要的關鍵。在設
通過語義化的標簽減少DIV簡化網頁代碼
如果你在生成頁面的時候過多的使用div，那你有必要閱讀這篇文章了。本文主要關注如何通過語義化的標簽

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
文字周圍閃爍特效的實現 CSS語法基礎 DIV布局規范中CSS類及id命名方式 CSS-派生選擇器 IE中用按鈕直接實現電腦的重啟或關機等功能 水中倒影的時間特效代碼 鼠標指向提示中有圖片的網頁特效代碼 CSS-選擇器的分組及繼承 IE7和FF浏覽器中右下角圖片廣告 CSS屬性behavior的語法
熱門推薦
Margin、Border、Padding屬性的區別和聯系 簡單理解em 網頁浏覽時間提示(登陸時間\\現在時間\\停留時間) CSS背景background屬性詳解 Web標准:關於DOCTYPE CSS 制作的三級菜單特效代碼 純CSS實現鼠標滑過顯示子菜單的二級菜單效果 CSS :active 偽類 元素被激活時的樣式 使用DIV解決固定寬度布局問題(2)
大家都在看
js同源策略詳解 一個精簡的JS DIV層tab切換代碼 手機端頁面rem寬度自適應腳本 JavaScript與Image加載事件(onload)、加載狀態(complete) 淺談nodeName,nodeValue,nodeType,typeof 的區別 設計理論:煙斗的故事 與眾不同的CSS3技巧 JS代碼實現百度地圖 畫圓 刪除標注
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved