資訊專欄INFORMATION COLUMN
摘要：元素分類元素大的分為兩類塊級元素和行內(nèi)級元素但行內(nèi)元素可以進(jìn)一步分為行內(nèi)替換置換元素行內(nèi)非替換非置換元素。一塊級元素與塊元素塊級元素元素會新起一行，并獨占一行，如等。同時塊級元素可以定義元素的寬度和高度。塊元素塊元素是屬性值為的元素。
CSS元素分類
CSS元素大的分為兩類：塊級元素和行內(nèi)級元素
但行內(nèi)元素可以進(jìn)一步分為：行內(nèi)替換(置換)元素、行內(nèi)非替換(非置換)元素。
塊級元素：元素會新起一行，并獨占一行，如div、p、form等。display 屬性值為：block, list-item, table, flex, grid 時，都可以將一個元素設(shè)置成塊級元素。同時塊級元素可以定義元素的寬度和高度。
塊元素：塊元素是display屬性值為block的元素。因而二者是包含關(guān)系。
行內(nèi)級元素：行內(nèi)級不會以新行開始，在一行文檔流中排列，如果超過容器寬度，則折行顯示。display 屬性值為：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以將一個元素設(shè)置成行內(nèi)級元素。
行內(nèi)元素：行內(nèi)元素是display屬性值為inline的元素。
行內(nèi)塊元素：display屬性值為inline-table, inline-block, inline-flex, inline-grid的元素
行內(nèi)級元素分類：
1、 行內(nèi)級置換元素
???????一個元素不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此元素內(nèi)容的渲染，且元素本身一般擁有固有尺寸(寬度，高度，寬高比)的元素，被稱之為置換元素，如img、表單元素（包括input、select、textarea、select等）
行內(nèi)級置換元素寬度的定義：
若寬高的計算值為auto且元素有固有寬度，則width為固有寬度；
若寬度的計算值為auto且元素有固有寬度，則width為固有寬度；
若寬度的計算值為auto且高度有具體的計算值，同時知道高寬比，則可以計算出width=高度/高寬比；
除此之外，當(dāng) width 的計算值為 auto 時，則寬度的使用值為 300px。
行內(nèi)級置換元素高度的定義：
若寬高的計算值為auto且元素有固有高度，則height為固有高度；
若高度的計算值為auto且元素有固有高度，則height為固有高度；
若高度的計算值為auto且寬度有具體的計算值，同時知道高寬比，則可以計算出height=寬度*高寬比；
除此之外，當(dāng) height的計算值為 auto 時，使用值不能大于150px，且寬度不能大于長方形高度的2倍。
2、 行內(nèi)級非置換元素
???????無法給元素定義寬度和高度的行內(nèi)級元素，除了行內(nèi)級置換元素外剩余的元素都是行內(nèi)級非置換元素。
參考：http://blog.doyoe.com/2015/03...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113241.html
摘要：按照顯示元素分類行內(nèi)元素元素的高度，行高，頂?shù)走吘嘤稍厮膱D片或文字所決定，不可改變其寬度為內(nèi)容文字或圖片的寬度所決定，而其左右邊距可人為設(shè)置。按照顯示元素分類： 行內(nèi)元素（lnline-element）：元素的高度，行高，頂?shù)走吘嘤稍厮膱D片或文字所決定，不可改變；其寬度為內(nèi)容文字或圖片的寬度所決定，而其左右邊距可人為設(shè)置。?行內(nèi)元素的水平方向的padding-left,pa...
摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們...
摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重...
摘要：組件的外觀可以通用，但是位置卻不能。總結(jié)出現(xiàn)上述問題的愿意一個承擔(dān)的樣式太多。在使用等簡寫屬性時，注意其中關(guān)于位置和布局的樣式等布局和位置由單獨的布局類或單獨容器元素構(gòu)成。降低現(xiàn)有類名沖突使用規(guī)則進(jìn)行命名。 CSS模塊化規(guī)則 CSS模塊的設(shè)計原則： 可重用 可維護(hù) 可擴展 1 常見的問題 1.1 基于父組件直接修改樣式 .widget { background: yello...
閱讀 2311·2021-11-23 09:51
閱讀 3748·2021-11-11 10:57
閱讀 1391·2021-10-09 09:43
閱讀 2481·2021-09-29 09:35
閱讀 2013·2019-08-30 15:54
閱讀 1788·2019-08-30 15:44
閱讀 3179·2019-08-30 13:20
閱讀 1687·2019-08-30 11:19
