css盒模型、元素類型
一、css盒模型的概念及組成
概念：盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.
盒模型的組成：邊框、外邊界/外邊距、補白/內填充、內容區。
二、盒子模型的相關元素
三、標準盒子大小計算方式
寬 =左右border+左右padding+width，
高 =上下border+上下padding+height，
例如：一個盒子的border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，
寬= border*2 + padding*2 + content.width = 1*2 + 10*2 +200 = 262px，
高= border*2 + padding*2 + content.height = 1*2 +10*2 + 50 = 112px，
怪異盒模型/IE盒子模型組成：margin+內容區
寬：width;
高:height;
四、盒模型注意事項
*margin值的解析：左右邊界累加，正常文檔流的上下邊界重合。
*在正常文檔流下，子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(子元素或父元素不設置任何浮動及定位的屬性，或父元素不設置邊框的情況下。)
我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後台私信我：前端，即可免費獲取
一個標記可以設置多個class名
語法：<標記 class="名稱1 名稱2 名稱3 " ></標記>
© 版權（圈C）
CSS元素類型
1、元素類型分類依據和元素類型分類
2、元素類型的轉換
3、inline-block元素類型的應用
4、置換和非置換元素的概念和應用案例
一、元素類型分類
根據css顯示分類，XHTML元素被分為
兩種類型:塊狀元素，內聯元素
1.塊狀元素（block element）
A）塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區域，常用的塊狀元素包塊div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,td,fieldset,legend,option,thead,tbody,tfoot,caption,th等；
B）默認情況下，塊狀元素都會獨占一行，通俗地說，兩個相鄰塊狀元素不會出現並列顯示的現象；默認情況下，塊狀元素會按順序自上而下排列。
C）塊狀元素都可以定義自己的寬度和高度。
D）塊狀元素一般都作為其他元素的容器，它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個盒子
注:p標籤是一個塊元素，但它只能作為內聯元素（inline element）的容器；
標題標籤之間不能互相嵌套
2.內聯元素（inline element）（或是行內元素）
A) 常見的內聯元素如：a,span,i,em,strong,b,u,del,s,br,sub,sup,img,input,select,textarea,button等
B) 內聯元素的表現形式是始終以行內逐個進行顯示；
C) 內聯元素沒有自己的形狀，不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定，它的最小內容單元也會呈現矩形形狀；
D)內聯元素也會遵循盒模型基本規則，如可以定義padding,border,margin等屬性，padding,border,margin上下的值沒有實際布局功能;
二、元素類型的轉換
元素可通過display屬性來改變元素的顯示類型
1）display屬性與屬性值 (18個屬性值)
屬性值：block/inline/inline-block（img,input,textarea,select）/none/list-item(li)/table-row(tr)/table(table)/table-cell(td)/table-header-group(thead)/table-footer-group(tfoot)/table-row-group(tbody),flex,inline-flex;
作用：塊狀元素和內聯元素之間的轉換。
說明：各屬性值的作用
1)Block塊狀顯示：類似在元素後面添加換行符，也就是說其他元素不能在其後面並列顯示。或者就是讓元素豎排顯示。
2)inline內聯顯示：在元素後面刪除換行符，多個元素可以在一行內並列顯示。或者就是讓元素橫排顯示。
3)Inline-block行內塊狀顯示：元素的內容以塊狀顯示，行內的其他元素顯示在同一行。
（此元素類型支持vertical-align屬性）img,input
4)none：隱藏元素。
5)list-item:列表 項，將元素轉換成列表。li的默認類型。
6）當元素設置了float屬性後，就相當於該元素加了display:block；
三、inline-block元素類型的應用
Inline-block行內塊元素顯示：元素的內容以塊狀顯示，行內的其他元素顯示在同一行。
（此元素類型可以支持vertical-align屬性）img,input
vertical-align:控制一行內的內聯元素的垂直對齊方式,也可以支持table-cell元素直接設置vertical-align的屬性，table-cell的元素不支持margin屬性
垂直對齊方式{vertical-align:baseline(基線對齊，默認值)vertical-align:top(元素的頂端與行中最高的元素頂端對齊)/bottom元素的底端與行中最低的元素底端對齊/middle/sub(與父元素的下標字體基線對齊)/super（與父元素的上標字體基線對齊）/text-top(與父元素的字體頂端對齊)/text-bottom(與父元素的字體底端對齊);}
四、置換和非置換元素的概念
拓展：
置換元素/替換元素 概念：一個內容不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，這些元素往往沒有實際的內容，即是一個空元素,置換元素就是瀏覽器根據元素的屬性和屬性值，來決定元素的具體顯示內容。大部分的置換元素的元素類型為inline-block;被稱之為置換元素。HTML中的img、input都是置換元素。 例如瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來。 又例如根據input標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。 非置換元素/不可置換元素 ：HTML中除了可替換元素外，其它都是不可替換元素（即其內容直接表現給用戶端例如瀏覽器） textarea select object
1、認識盒子模型
2、盒子模型的組成部分
3、學習盒子模型的相關元素 margin padding
1、padding的使用方法
說明：
填充：padding,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白或填充。
用法：
1）用來調整子元素在父元素中的位置。
註：padding屬性需要添加在父元素上。
2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性值
屬性值的4種方式：
四個值：上 右 下 左 {padding:0px 0px 0px 40px;}
三個值：上 左右 下 {padding:10px 20px 30px ;}
二個值：上下 左右 {padding:10px 20px ;}
一個值：四個方向 padding:2px;/*定義元素四周填充為2px*/
說明：可單獨設置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
2、margin的使用方法
說明：
邊界：margin,在元素外邊的空白區域，被稱為邊距/邊界。 「屬性值的用法同上」
margin-left:左邊界
margin-right:右邊界
margin-top:上邊界
margin-bottom:下邊界
屬性值的4種方式：
四個值：上 右 下 左
三個值：上 左右 下
二個值：上下 左右
一個值：四個方向 margin:2px;/*定義元素四邊邊界為2px*/
margin:0 auto;/*一個有寬度的元素在瀏覽器中橫向居中。
定義元素上、下邊界為2px，
說明：可單獨設置一方向邊界，如：margin-top:10px;
註：/*上下邊距重疊，左右邊距相加*/
原文連結：https://blog.csdn.net/ff186345/article/details/103755602
作者：ff186345