好程序員web前端分享CSS元素類型

好程序員web前端教程分享CSS元素類型

學習目標

一、元素類型分類依據和元素類型分類

二、元素類型的轉換

三、inline-block元素類型的應用

四、置換和非置換元素的概念和應用案例

1、元素類型分類依據和元素類型分類

根據css顯示分類，XHTML元素被分爲
三種類型:塊狀元素，內聯元素
1.塊狀元素（block element） 

A）塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示爲矩形區域，經常使用的塊狀元素包塊div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,td,等；

B）默認狀況下，塊狀元素都會佔據一行，通俗地說，兩個相鄰塊狀元素不會出現並列顯示的現象；默認狀況下，塊狀元素會按順序自上而下排列。

C）塊狀元素均可以定義本身的寬度和高度。

D）塊狀元素通常都做爲其餘元素的容器，它能夠容納其它內聯元素和其它塊狀元素。咱們能夠把這種容器比喻爲一個盒子

注:p標籤是一個塊元素，但它只能做爲內聯元素（inline element）的容器；

2.內聯元素（inline element）（或是行內元素）

A) 常見的內聯元素如：a,span,i,em,strong,b,u,del,s,input,img,br,sub,sup等
B) 內聯元素的表現形式是始終以行內逐個進行顯示；
C) 內聯元素沒有本身的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來肯定，它的最小內容單元也會呈現矩形形狀；
D)內聯元素也會遵循盒模型基本規則，如能夠定義padding,border,margin,background等屬性，padding,border,margin上下的值沒有實際功能;

 

2、元素類型的轉換

元素可經過display屬性來改變元素的默認顯示類型

1）display屬性與屬性值 (18個屬性值)

屬性值：block/inline/inline-block（img,input）/none/list-item(li)/table-row/table(table)/table-cell(td)/table-header-group(thead)/table-footer-group(tfoot);

做用：塊狀元素和內聯元素之間的轉換。
說明：各屬性值的做用

1)Block塊狀顯示：相似在元素後面添加換行符，也就是說其餘元素不能在其後面並列顯示。或者就是讓元素豎排顯示。
2)inline內聯顯示：在元素後面刪除換行符，多個元素能夠在一行內並列顯示。或者就是讓元素橫排顯示。

3)Inline-block行內塊狀顯示：元素的內容以塊狀顯示，行內的其餘元素顯示在同一行。
（此元素類型支持vertical-align屬性）img,input
4)none：隱藏元素， 此元素不會被顯示。
5)list-item:將元素轉換成列表。li的默認類型。

6）當元素設置了float屬性後，就至關於該元素加了display:block；

注：A、大部分塊元素display屬性值默認爲block，其中li列表的默認值爲list-item。

       B、大部份內聯元素的display屬性值默認爲inline,其中img,input，默認爲inline-block。

3、inline-block元素類型的應用

Inline-block行內塊元素顯示：元素的內容以塊狀顯示，行內的其餘元素顯示在同一行。
（此元素類型能夠支持vertical-align屬性）img,input
垂直對齊方式{vertical-align:top(元素的頂端與行中最高的元素頂端對齊)/bottom元素的底端與行中最低的元素底端對齊/middle/sub(與父元素的下標字體基線對齊)/super（與父元素的上標字體基線對齊）/text-top(與父元素的字體頂端對齊)/text-bottom(與父元素的字體底端對齊);}

4、置換和非置換元素的概念

拓展：

置換元素/替換元素 概念：一個內容不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素自己通常擁有固有尺寸（寬度，高度，寬高比）的元素，這些元素每每沒有實際的內容，便是一個空元素,置換元素就是瀏覽器根據元素的屬性和屬性值，來決定元素的具體顯示內容。大部分的置換元素的元素類型爲inline-block;被稱之爲置換元素。HTML中的img、input都是置換元素。 例如瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來。 又例如根據input標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。 非置換元素/不可置換元素 ：HTML中除了可替換元素外，其它都是不可替換元素（即其內容直接表現給用戶端例如瀏覽器）