CSS核心屬性6---元素類型轉(zhuǎn)換

根據(jù)css顯示分類,HTML元素被分為三種類型:塊狀元素,內(nèi)聯(lián)元素,可變元素

1.塊狀元素(block element)

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

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

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

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


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

1) 常見的內(nèi)聯(lián)元素如:a,span,i,em,strong,b等

2) 內(nèi)聯(lián)元素的表現(xiàn)形式是始終以行內(nèi)逐個(gè)進(jìn)行顯示;

3) 內(nèi)聯(lián)元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據(jù)所包含內(nèi)容的高度和寬度來確定,它的最小內(nèi)容單元也會呈現(xiàn)矩形形狀;

4)內(nèi)聯(lián)元素也會遵循盒模型基本規(guī)則,如可以定義padding,border,margin,background等屬性,但個(gè)別屬性不能正確顯示;


3、可變元素

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


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

盒子模型可通過display屬性來改變默認(rèn)的顯示類型

1)display屬性與屬性值 (18個(gè)屬性值)

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

作用:該屬性設(shè)置或檢索對象元素應(yīng)該生成的盒模型的類型。

說明:各屬性值的作用

1)Block塊狀顯示:類似在元素后面添加換行符,也就是說其他元素不能在其后面并列顯示。

2)inline內(nèi)聯(lián)顯示:在元素后面刪除換行符,多個(gè)元素可以在一行內(nèi)并列顯示。

3)當(dāng)元素設(shè)置了float屬性后,就相當(dāng)于給該元素加了display:block;屬性;

4)Inline-block行內(nèi)塊元素顯示:元素的內(nèi)容以塊狀顯示,行內(nèi)的其他元素顯示在同一行。(只有這一個(gè)元素類型支持vertical-align屬性)img,input。

5)none 此元素不會被顯示。

6)list-item:將元素轉(zhuǎn)換成列表。li的默認(rèn)類型。

7)大部分塊元素display屬性值默認(rèn)為block,其中列表的默認(rèn)值為list-item。大部分內(nèi)聯(lián)元素的display屬性值默認(rèn)為inline,其中img,input,默認(rèn)為inline-block。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評論 1 92
  • CSS盒模型 在CSS中盒模型被分為兩種,第一種是W3C的標(biāo)準(zhǔn)模型,第二種是IE怪異盒模型。兩種盒子模型都包括pa...
    _空空閱讀 3,583評論 0 3
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,750評論 0 30
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號、顏色等樣式屬性。下面我們來看一個(gè)例...
    張文靖同學(xué)閱讀 1,373評論 0 3
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 1,120評論 0 1

友情鏈接更多精彩內(nèi)容