?

* { margin: 0; padding: 0 } body { padding: 30px; padding-top: 10px; line-height: 35px; font-family: "微軟雅黑" } h1,h2 { padding: 20px 0 } h3 { background: #00AA88; color: #FFFCF4; font-size: 20px; font-weight: 700; margin: 10px 0; padding: 5px 0px 5px 15px } p { line-height: 40px } ul li { list-style: none; line-height: 40px } span { color: #199475; font-weight: 700; display: block; padding: 10px; font-size: 18px; padding-left: 0px } em { font-style: normal; color: red } .other { color: #044D22 } .oo { color: red; display: inline; font-size: 18px; font-weight: normal } .marleft { margin-left: 30px } .marbtom { margin: 15px 0; font-weight: 600 } .borderbtm { border-bottom: solid 1px #eee; padding-bottom: 15px; margin-bottom: 15px } .textcon { margin: 10px 0; border: solid 1px #ddd; border-left-width: 6px; padding: 10px; border-color: #f60 } .oos { color: #000; font-weight: 800 }

5：CSS元素類型

學習目標

• 1、元素類型分類依據(jù)和元素類型分類
• 2、元素類型的轉(zhuǎn)換
• 3、inline-block元素類型的應(yīng)用
• 4、置換和非置換元素的概念和應(yīng)用案例

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

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

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

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

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

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

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

A) 常見的內(nèi)聯(lián)元素如：a,span,i,em,strong,b等
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等屬性，但個別屬性值不能正確顯示;
a - 錨點 i - 斜體 em - 傾斜
span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strong - 粗體強調(diào) b--加粗

?

3.內(nèi)聯(lián)塊狀元素

內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點，<img>、<input>標簽就是這種內(nèi)聯(lián)塊狀標簽。
inline-block元素特點：
A、和其他元素都在一行上；
B、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置

常見標簽：img input textarea
img - 圖片 input - 輸入框
textarea - 多行文本輸入框

?

4、可變元素

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

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

盒子模型可通過display屬性來改變默認的顯示類型

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

屬性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group

作用：塊狀元素和內(nèi)聯(lián)元素之間的轉(zhuǎn)換。
說明：各屬性值的作用
1)Block塊狀顯示：類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示。或者就是讓元素豎排顯示。
2)inline內(nèi)聯(lián)顯示：在元素后面刪除換行符，多個元素可以在一行內(nèi)并列顯示。或者就是讓元素橫排顯示。
3)當元素設(shè)置了float屬性后，就相當于該元素具備塊狀元素顯示的特點；

4)Inline-block行內(nèi)塊元素顯示：元素的內(nèi)容以塊狀顯示，行內(nèi)的其他元素顯示在同一行。
（只有這一個元素類型支持vertical-align屬性）img,input
垂直對齊方式{vertical-align:top/bottom/middle;}
5)none 此元素不會被顯示。
6)list-item:將元素轉(zhuǎn)換成列表。li的默認類型。

7）

A、大部分塊元素display屬性值默認為block，其中列表的默認值為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;}
常見應(yīng)用案例：不同大小的圖片在div當中垂直居中

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

拓展：

一、引題

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

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

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

例如：瀏覽器會根據(jù)<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(x)html代碼，則看不到圖片的實際內(nèi)容；<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素往往沒有實際的內(nèi)容，即是一個空元素。

置換元素在其顯示中生成了框，這也就是有的內(nèi)聯(lián)元素（img,input）能夠設(shè)置寬高的原因。

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

?

返回頂部

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的5：CSS元素类型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。