Day5 CSS元素型別

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

2、元素型別的轉換

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

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

根據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）的容器；

a) 常見的內聯元素如：a,span,i,em,strong,b,u,del,s,input,img,br,sub,sup等

b) 內聯元素的表現形式是始終以行內逐個進行顯示；

c) 內聯元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀；

d)內聯元素也會遵循盒模型基本規則，如可以定義padding,border,margin等屬性，padding,border,margin上下的值沒有實際功能;

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；

（此元素型別可以支援vertical-align屬性）img,input

垂直對齊方式

拓展：置換元素/替換元素 概念：乙個內容不受css視覺格式化模型控制，css渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，這些元素往往沒有實際的內容，即是乙個空元素,置換元素就是瀏覽器根據元素的屬性和屬性值，來決定元素的具體顯示內容。大部分的置換元素的元素型別為inline-block;被稱之為置換元素。html中的img、input都是置換元素。 例如瀏覽器會根據img標籤的src屬性的值來讀取資訊並顯示出來。 又例如根據input標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。 非置換元素/不可置換元素 ：html中除了可替換元素外，其它都是不可替換元素（即其內容直接表現給使用者端例如瀏覽器）

前端菜鳥筆記 Day 5 CSS 高階

內容引用 css 選擇器 htmlh2,p.important p.warning important.warning 選擇同時擁有這兩個類名的元素 introa href a href title a href p class important warning 完全匹配的屬性內容 p class...

前端菜鳥筆記 Day 5 CSS 高階

內容引用 css 選擇器 htmlh2,p.important p.warning important.warning 選擇同時擁有這兩個類名的元素 introa href a href title a href p class important warning 完全匹配的屬性內容 p class...

前端菜鳥筆記 Day 5 CSS 高階

內容引用 css 選擇器 htmlh2,p.important p.warning important.warning 選擇同時擁有這兩個類名的元素 introa href a href title a href p class important warning 完全匹配的屬性內容 p class...