成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS元素分類(lèi)

Travis / 426人閱讀

摘要：元素分類(lèi)元素大的分為兩類(lèi)塊級(jí)元素和行內(nèi)級(jí)元素但行內(nèi)元素可以進(jìn)一步分為行內(nèi)替換置換元素行內(nèi)非替換非置換元素。一塊級(jí)元素與塊元素塊級(jí)元素元素會(huì)新起一行，并獨(dú)占一行，如等。同時(shí)塊級(jí)元素可以定義元素的寬度和高度。塊元素塊元素是屬性值為的元素。

CSS元素分類(lèi)

CSS元素大的分為兩類(lèi)：塊級(jí)元素和行內(nèi)級(jí)元素
但行內(nèi)元素可以進(jìn)一步分為：行內(nèi)替換(置換)元素、行內(nèi)非替換(非置換)元素。

一、塊級(jí)元素與塊元素

塊級(jí)元素：元素會(huì)新起一行，并獨(dú)占一行，如div、p、form等。display 屬性值為：block, list-item, table, flex, grid 時(shí)，都可以將一個(gè)元素設(shè)置成塊級(jí)元素。同時(shí)塊級(jí)元素可以定義元素的寬度和高度。

塊元素：塊元素是display屬性值為block的元素。因而二者是包含關(guān)系。

二、行內(nèi)級(jí)元素與行內(nèi)元素

行內(nèi)級(jí)元素：行內(nèi)級(jí)不會(huì)以新行開(kāi)始，在一行文檔流中排列，如果超過(guò)容器寬度，則折行顯示。display 屬性值為：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以將一個(gè)元素設(shè)置成行內(nèi)級(jí)元素。

行內(nèi)元素：行內(nèi)元素是display屬性值為inline的元素。
行內(nèi)塊元素：display屬性值為inline-table, inline-block, inline-flex, inline-grid的元素

行內(nèi)級(jí)元素分類(lèi)：

1、 行內(nèi)級(jí)置換元素
???????一個(gè)元素不受CSS視覺(jué)格式化模型控制，CSS渲染模型并不考慮對(duì)此元素內(nèi)容的渲染，且元素本身一般擁有固有尺寸(寬度，高度，寬高比)的元素，被稱(chēng)之為置換元素，如img、表單元素（包括input、select、textarea、select等）

行內(nèi)級(jí)置換元素寬度的定義：

若寬高的計(jì)算值為auto且元素有固有寬度，則width為固有寬度；

若寬度的計(jì)算值為auto且元素有固有寬度，則width為固有寬度；

若寬度的計(jì)算值為auto且高度有具體的計(jì)算值，同時(shí)知道高寬比，則可以計(jì)算出width=高度/高寬比；

除此之外，當(dāng) width 的計(jì)算值為 auto 時(shí)，則寬度的使用值為 300px。

行內(nèi)級(jí)置換元素高度的定義：

若寬高的計(jì)算值為auto且元素有固有高度，則height為固有高度；

若高度的計(jì)算值為auto且元素有固有高度，則height為固有高度；

若高度的計(jì)算值為auto且寬度有具體的計(jì)算值，同時(shí)知道高寬比，則可以計(jì)算出height=寬度*高寬比；

除此之外，當(dāng) height的計(jì)算值為 auto 時(shí)，使用值不能大于150px，且寬度不能大于長(zhǎng)方形高度的2倍。

2、 行內(nèi)級(jí)非置換元素
???????無(wú)法給元素定義寬度和高度的行內(nèi)級(jí)元素，除了行內(nèi)級(jí)置換元素外剩余的元素都是行內(nèi)級(jí)非置換元素。

參考：http://blog.doyoe.com/2015/03...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113241.html

相關(guān)文章

  • css中元素的分類(lèi)

    摘要：按照顯示元素分類(lèi)行內(nèi)元素元素的高度，行高，頂?shù)走吘嘤稍厮膱D片或文字所決定，不可改變其寬度為內(nèi)容文字或圖片的寬度所決定，而其左右邊距可人為設(shè)置。按照顯示元素分類(lèi)： 行內(nèi)元素（lnline-element）：元素的高度，行高，頂?shù)走吘嘤稍厮膱D片或文字所決定，不可改變；其寬度為內(nèi)容文字或圖片的寬度所決定，而其左右邊距可人為設(shè)置。?行內(nèi)元素的水平方向的padding-left,pa...

    harryhappy 評(píng)論0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分類(lèi)

    摘要：深入布局盒模型元素分類(lèi)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。從元素的布局特性來(lái)分，主要可以分為三類(lèi)元素塊級(jí)元素，行內(nèi)元素，行內(nèi)塊級(jí)元素。行內(nèi)級(jí)元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類(lèi) ? ? ? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們...

    ky0ncheng 評(píng)論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類(lèi)

    摘要：深入布局盒模型元素分類(lèi)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類(lèi) ????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重...

    blankyao 評(píng)論0 收藏0

  • CSS || 功能分類(lèi)

    摘要：組件的外觀可以通用，但是位置卻不能?？偨Y(jié)出現(xiàn)上述問(wèn)題的愿意一個(gè)承擔(dān)的樣式太多。在使用等簡(jiǎn)寫(xiě)屬性時(shí)，注意其中關(guān)于位置和布局的樣式等布局和位置由單獨(dú)的布局類(lèi)或單獨(dú)容器元素構(gòu)成。降低現(xiàn)有類(lèi)名沖突使用規(guī)則進(jìn)行命名。 CSS模塊化規(guī)則 CSS模塊的設(shè)計(jì)原則： 可重用 可維護(hù) 可擴(kuò)展 1 常見(jiàn)的問(wèn)題 1.1 基于父組件直接修改樣式 .widget { background: yello...

    xuhong 評(píng)論0 收藏0

  • CSS選擇器的分類(lèi)

    摘要：每個(gè)聲明是一個(gè)屬性和該屬性的值的組合元素選擇器最常見(jiàn)的選擇器往往是元素。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符類(lèi)選擇器要應(yīng)用樣式而不考慮具體涉及的元素，最常用的方法就是使用類(lèi)選擇器。 《PHP 面試問(wèn)答》 結(jié)合實(shí)際 PHP 面試，系統(tǒng)的匯總面試中的各種各樣的問(wèn)題，嘗試提供簡(jiǎn)潔準(zhǔn)確的答案。如果你在 PHP 面試中遇到問(wèn)題，歡迎提 Issues 交流。包含網(wǎng)絡(luò)協(xié)議、數(shù)據(jù)結(jié)構(gòu)與算法、...

    jiekechoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<