1. 程式人生 > >元素類型

元素類型

table dset 部分 所有 item 總結 lds span 不顯示

塊狀元素
1.塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示為矩形區域
常用的塊狀元素包塊div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等;
2.塊元素的特點:
①默認情況下,塊狀元素都會獨占一行,塊狀元素會按順序自上而下排列。
②塊狀元素都可以直接定義自己的寬度和高度。?
③塊狀元素遵循盒模型的所有規則,一般都作為其他元素的容器,它可以容納其它內聯元素和其它塊狀元素。(p標簽除外)

內聯元素
1.常見的內聯元素如:a,span,i,em,strong,b等
2.內聯元素的特點:
①內聯元素其後如果是內聯元素則會在一行內逐個進行顯示;

②內聯元素顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,不能直接定義它的寬和高,它的最小內容單元也會呈現矩形形狀;
③內聯元素也會遵循盒模型基本規則,但個別屬性不能正確顯示;

元素類型的轉換
1.display的作用:設置或檢索元素的類型。
屬性值19個:block/inline/inline-block/nlone/list-item/table-header-group/table-footer-group....
2.屬性值中有5個最常用的屬性值
①Block 塊元素的display默認屬性值,當給元素加display:block後元素變為塊元素。
(註:當元素設置了float屬性後,就相當於給該元素加了display:block;屬性;)

②inline 內聯元素的display默認屬性值,當給元素加display:inline元素變為內聯元素
③inline-block 內聯塊元素默認屬性值:行內的其他元素顯示在同一行,但可以直接設置寬高,
如:img,input(註:只有這一個元素類型支持vertical-align屬性)
4.none 元素被隱藏不顯示
5.list-item 將元素轉換成列表。li的display默認屬性值;

總結
1、大部分塊元素display屬性值默認為block,其中li默認值為list-item。
2、大部分內聯元素(行內元素、行間元素)的display屬性值默認為inline,其中img,input,默認為inline-block。

元素類型