這篇文章主要講解了“CSS元素類型的詳細介紹”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS元素類型的詳細介紹”吧！

目前成都創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、龍山網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

目標

• 1、元素類型分類依據(jù)和元素類型分類

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

• 3、inline-block元素類型的應(yīng)用

• 4、置換和非置換元素的概念和應(yīng)用案例

一、元素類型分類依據(jù)和元素類型分類

根據(jù)css顯示分類，XHTML元素被分為
三種類型:塊狀元素，內(nèi)聯(lián)元素
1.塊狀元素（block element） 

A）塊狀元素在網(wǎng)頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域，常用的塊狀元素包塊div,dl,dt,dd,ol,ul,li,(h2-h7),p,form,hr,table,tr,td,等；

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

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

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

注:p標簽是一個塊元素，但它只能作為內(nèi)聯(lián)元素（inline element）的容器；

2.內(nèi)聯(lián)元素（inline element）（或是行內(nèi)元素）

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

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

元素可通過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);

作用：塊狀元素和內(nèi)聯(lián)元素之間的轉(zhuǎn)換。
說明：各屬性值的作用

1)Block塊狀顯示：類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示?；蛘呔褪亲屧刎Q排顯示。
2)inline內(nèi)聯(lián)顯示：在元素后面刪除換行符，多個元素可以在一行內(nèi)并列顯示。或者就是讓元素橫排顯示。

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

6）當元素設(shè)置了float屬性后，就相當于該元素加了display:block；

注：A、大部分塊元素display屬性值默認為block，其中l(wèi)i列表的默認值為list-item。

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

三、inline-block元素類型的應(yīng)用

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

四置換和非置換元素的概念

拓展：

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

感謝各位的閱讀，以上就是“CSS元素類型的詳細介紹”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS元素類型的詳細介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站題目：CSS元素類型的詳細介紹
瀏覽地址：http://aaarwkj.com/article10/igjcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、建站公司、ChatGPT、電子商務(wù)、定制網(wǎng)站、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)