ss盒模型、元素類型

一、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