HTMLCSS學(xué)習(xí)筆記(六)-- 元素類型

　　元素類型

　　根據(jù)css顯示分類，XHTML元素被分為

　　三種類型:

　　塊狀元素，內(nèi)聯(lián)元素，可變元素

　　&&

　　三種類型：

　　塊狀元素，內(nèi)聯(lián)元素，內(nèi)聯(lián)塊元素(css2.1增加)

　　塊狀元素的特點(diǎn)

　　A:塊狀元素在網(wǎng)頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域，

　　B:默認(rèn)情況下，塊狀元素都會(huì)占據(jù)一行，通俗地說，兩個(gè)相鄰塊狀元素不會(huì)出現(xiàn)并列顯示的現(xiàn)象;默認(rèn)情況下，塊狀元素會(huì)按順序自上而下排列。

　　C:塊狀元素都可以定義自己的寬度和高度。

　　D:塊狀元素一般都作為其他元素的容器，它可以容納其它內(nèi)聯(lián)元素和其它塊狀元素。我們可以把這種容器比喻為一個(gè)子。

　　內(nèi)聯(lián)元素的特點(diǎn)

　　A:內(nèi)聯(lián)元素的表現(xiàn)形式是始終以行內(nèi)逐個(gè)進(jìn)行顯示;

　　B:內(nèi)聯(lián)元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據(jù)所包含內(nèi)容的高度和寬度來確定，它的最小內(nèi)容單元也會(huì)呈現(xiàn)矩形形狀;

　　C:內(nèi)聯(lián)元素也會(huì)遵循盒模型基本規(guī)則，如可以定義padding,border,margin,background等屬性，但個(gè)別屬性不能正確顯示;(padding-top:;margin-top/bottom:;)

　　可變元素

　　需要根據(jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素。

　　常見的標(biāo)簽

　　塊

　　div -最常用的塊級元素

　　dl - 和dt-dd 搭配使用的塊級元素

　　form - 交互表單

　　h1 -h6- 大標(biāo)題

　　hr - 水平分隔線

　　ol – 有序列表

　　p - 段落

　　ul - 無序列表

　　li

　　fieldset - 表單字段集

　　colgroup-col - 表單列分組元素

　　table-tr-td 表格及行-單元格

　　內(nèi)聯(lián)

　　a –超鏈接(錨點(diǎn))

　　b - 粗體(不推薦)

　　br - 換行

　　i - 斜體

　　em - 強(qiáng)調(diào)

　　img - 圖片

　　input - 輸入框

　　label - 表單標(biāo)簽

　　span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

　　strong - 粗體強(qiáng)調(diào)

　　sub - 下標(biāo)

　　sup - 上標(biāo)

　　textarea - 多行文本輸入框

　　u - 下劃線

　　select - 項(xiàng)目選擇

　　元素類型的轉(zhuǎn)換

　　display屬性

　　盒子模型可通過display屬性來改變默認(rèn)的顯示類型

　　A、大部分塊元素display屬性值默認(rèn)為block，其中列表li的默認(rèn)值為list-item。

　　B、大部分內(nèi)聯(lián)元素的display屬性值默認(rèn)為inline,其中img,input，默認(rèn)為inline-block(行內(nèi)塊元素)。

　　inline-block ( 行內(nèi)塊元素 )

　　設(shè)置一個(gè)元素在一個(gè)容器中垂直居中，必須更改默認(rèn)的display屬性值為inline-block;并加上同級元素(標(biāo)尺)

　　(同級元素[標(biāo)尺]樣式設(shè)置為vertical-align:middle;width:0;height:100%;display:inline-block;)

　　三個(gè)條件：

　　1. 必須給容器(父元素)加上text-align:center;

　　2. 必須給當(dāng)前元素轉(zhuǎn)成行內(nèi)塊元素(display:inline-block;)再給當(dāng)前元素加上vertical-align:middle;

　　3. 在當(dāng)前元素的后面(沒有回車)加上同級元素span;并對span進(jìn)行vertical-align:middle;width:0;height:100%;display:inline-block

　　元素類型案例

　　置換元素

　　一、引題

　　在之前的淺談HTML中的塊級元素和內(nèi)聯(lián)元素中了解到了內(nèi)聯(lián)元素一般是不能設(shè)置寬高的，但是也有特殊。比如img是內(nèi)聯(lián)元素，但可以設(shè)置寬高，這肯定讓不少人迷惑。這樣我們就要引入HTML中置換元素的概念(非置換元素在w3c中沒有給出明確的解釋，姑且我們就把除置換元素外的元素當(dāng)作非置換元素吧)。

　　二、置換元素與非置換元素

　　a) 置換元素：瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。

　　b) 不可替換元素(非置換元素)：(x)html 的大多數(shù)元素是不可替換元素，即其內(nèi)容直接表現(xiàn)給用戶端(如瀏覽器)。