在用CSS布局頁面的時候,我們會將HTML標籤分成兩種,塊狀元素和內嵌元素(我們平常用到的div和p就是塊狀元素,連結標籤a就是內嵌元素)。是在CSS布局頁面中很重要的兩個概念,必須要理解透徹!既然說到概念就先看看塊狀元素和內嵌元素的定義。
註:這節課看似挺長,其實內容很少,通過舉例子讓大家更容易理解而已,不要被眼前的文字和代碼嚇到喲~
引用:
塊狀元素
一般是其他元素的容器,可容納內嵌元素和其他塊狀元素,塊狀元素排斥其他元素與其位於同一行,寬度(width)高度(height)起作用。常見塊狀元素為div和p。
引用:
內嵌元素
內嵌元素只能容納文本或者其他內嵌元素,它允許其他內嵌元素與其位於同一行,但寬度(width)高度(height)不起作用。常見內嵌元素為“a”。
做了個對比表,協助大家更容易理解。
對於上面的概念,我們用執行個體的方式給大家講明白,要注意聽喲~
要求:ID為div1的紅色(#900)地區,寬度和高度均為300像素,並且包含一個ID為div2的綠色地區,長度寬度均為100像素的div2。
CSS代碼如下:
複製內容到剪貼簿
代碼:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
HTML代碼如下:
複製內容到剪貼簿
代碼:
<div id="div1">
<div id="div2"></div>
</div>
為了方便初學者更好的學習,我把完整的代碼發出來
複製內容到剪貼簿
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS學習網---“可容納內嵌元素和其他塊狀元素”</title>
<style type="text/css">
<!--
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
怎麼樣,是不是下面的效果
如果你做出來了,就繼續往下看,咱們給剛才的要求再加一個條件,在div1裡放入一個連結a,內容為“可容納內嵌元素和其他塊狀元素”顏色為白色。
CSS代碼如下:
複製內容到剪貼簿
代碼:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}
HTML代碼如下:
複製內容到剪貼簿
代碼:
<div id="div1">
<div id="div2"></div>
<a href="#">可容納內嵌元素和其他塊狀元素</a>
</div>
是不是下面的效果
到這裡,我們可以看得到div1這個塊狀元素裡面擁有兩個元素,一個是塊狀元素div2,另一個是內嵌元素a,這就是塊狀元素概念裡面說的“一般是其他元素的容器,可容納內嵌元素和其他塊狀元素”,為什麼要說一般呢,因為塊狀元素不只是用來做容器,有時還有其他用途,比如利用塊狀元素將上下兩個元素隔開些距離,再比如利用塊狀元素來實現父級元素的高度自適應,這方面的內容會在後面詳細講解,因為不屬於本節知識,就不多說。
好~!我們繼續加條件,在div1裡面div2的後面再放入一個ID為div3的長寬均為100像素的藍色(#009)地區塊,代碼如下
CSS代碼如下:
複製內容到剪貼簿
代碼:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff;}
HTML代碼如下:
複製內容到剪貼簿
代碼:
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容納內嵌元素和其他塊狀元素</a>
</div>
是不是下面這個效果
是不是和自己事先想象的不一樣,本以為藍色會處於綠色的右側,可是卻位於下側,如果你再加幾個div4,div5同樣的他們還是繼續位於前一個下面,垂直排列,這就是塊狀元素概念中說的“塊狀元素排斥其他元素與其位於同一行”說白了,就是塊狀元素比較霸道,誰都別想和他坐同一行,甭管你是和他有親戚關係的塊狀元素還是毫無聯絡的內嵌元素,都不行,都到下面一行待著去,看看例子中,綠色方塊和藍色方塊是不是各處同一行,內嵌元素a也別想和他處一行,但是事情是沒有絕對的,塊狀元素不是不允許其他元素和他處一行嘛,不是比較霸道嘛,沒關係,咱有辦法,具體什麼辦法,我們後面會詳細講解,知識不屬於本節內容,就也不多說了,大家留意後面的教程唷~
到這裡,我想大家對“塊狀元素”的概念已經比較清楚了,下面通過例子給大家繼續解釋“內嵌元素”的概念,當然還是繼續加條件,加個什麼條件呢,在a的後面再加一個內容為“Love CSS”的連結,所有連結的背景設定為淡橙色(#F93)
CSS代碼如下:
複製內容到剪貼簿
代碼:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;}
HTML代碼如下:
複製內容到剪貼簿
代碼:
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<a href="#">可容納內嵌元素和其他塊狀元素</a>
<a href="#">Love CSS</a>
</div>
效果是不是下面這個
兩個串連a是不是處於同一行(不要忘記a是內嵌元素喲~),這就解釋了概念上說的“內嵌元素允許其他內嵌元素與其位於同一行”,為什麼不說“內嵌元素允許其他元素與其位於同一行”,因為其他元素包括兩種元素,內嵌元素和塊狀元素,它如果和內嵌元素在一塊那就肯定在一行了,如果和塊狀元素在一塊,即使它同意,他後面的塊狀元素也不同意,塊狀元素會另起一行位於它的下一行。
我們繼續添加條件,現在大家給內嵌元素a在css中加上寬度和高度,比如width:100px;height:50px;看看有什麼變化
CSS代碼
複製內容到剪貼簿
代碼:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;width:100px;height:50px;}
看到效果了沒有,是不是沒有任何變化呢,這就說明了概念中的內嵌元素的寬度(width)高度(height)不起作用,它的大小隻隨內部文本或者其他內嵌元素變化,具體證明算是給大家一個作業,自己來證明一下。
如果要讓定義好的寬度和高度對內嵌元素起作用,有什麼辦法沒有?答案是:當然。因為事情沒有絕對的在CSS上面也成立,因為CSS中有兩種元素,內嵌元素和塊狀元素,但是寬度和高度只對塊狀元素起作用,內嵌元素不起作用,如果我們把內嵌元素轉化成塊狀元素,他就具有了塊狀元素的特性了嘛,當然寬度和高度也就起作用了,如果你能想到這個思路,證明你的大腦現在非常活躍喲,這時候我們只需要給相應的內嵌元素加上一個屬性display:block就可以了,如下
複製內容到剪貼簿
代碼:
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
怎麼樣,起作用了吧,和下面的效果一樣嘛~
為什麼兩個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 - 定義變數
作者:kwoojan 出自:CSS學習論壇