什么是盒模型

在講盒模型之前先給大家說(shuō)一下盒模型在前端里作用以及盒模型的概念：

? ? ??在前端中盒模型可謂是十分重要的，它是CSS進(jìn)行頁(yè)面布局的基石，在頁(yè)面CSS布局中盒模型規(guī)定了網(wǎng)頁(yè)元素如何排列顯示以及元素之間的相互關(guān)系。在H5中CSS樣樣式定義所有的元素都可以擁有像盒子一樣的平面空間和外形。（如下圖所示）整個(gè)盒模型包含了：內(nèi)容區(qū)（content）、補(bǔ)白或填充（因叫法不同；padding）、邊框（border）、邊界或外邊距（margin）這就是盒模型。

盒子組成部分的屬性及用法

? ? ??從盒模型的定義中我們了解到了盒模型是由內(nèi)容區(qū)（content）、填充區(qū)（padding）（注：在本文中就稱填充區(qū)）、邊框（border）及外邊距（margin）（注：在本文中就稱外邊距）4個(gè)部分組成，那么它們是怎么來(lái)定義的，每個(gè)組成部分的屬性用法又是什么？

? ? ??Content（內(nèi)容區(qū)）：它是整個(gè)元素的寬和高，是屬于元素內(nèi)容的區(qū)域

? ? ??border（邊框）：它是盒子的邊緣既是邊框

? ? ??Padding（填充區(qū)）：它是盒子邊框與內(nèi)容之間的間距，或者說(shuō)是父元素與子元素之間的內(nèi)邊距

? ? ??Margin（外邊距）：它是盒子邊框以外的外邊距，或者說(shuō)是同輩元素之間的間距

一、邊框的屬性：

邊框?qū)挾龋?/b>

? ? ??border-width:1px; ：設(shè)置邊框的寬度的，在設(shè)置邊框?qū)挾葧r(shí)會(huì)用到此屬性默認(rèn)為1px，在網(wǎng)頁(yè)中很多修飾性線條都是由邊框來(lái)實(shí)現(xiàn)的，在給屬性加值得時(shí)候需要加上單位，如px（像素），em...

邊框線型：

? ? ??border-style:solid: ：設(shè)置邊框的線型樣式，邊框線性也有多個(gè)值，如：border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)...

邊框顏色：

? ? ??border-color:; ；設(shè)置邊框的顏色，默認(rèn)為黑色。

? ? ??Border-style:none; ；取消邊框，在css樣式中如盒子有單一方向用不到邊框可用此屬性取消邊框

? ? ??擴(kuò)展：border-style:none;的應(yīng)用場(chǎng)景：加了超鏈接的插入圖片，在IE低版本瀏覽器會(huì)出現(xiàn)邊框。解決方法：給img 這個(gè)標(biāo)簽添加border-style:none;。

邊框有四個(gè)方向，必要時(shí)可單獨(dú)設(shè)置一方向邊框?qū)傩裕?/p>

? ? ??1：border-top: ?????上邊框，可給邊框設(shè)置寬度、線型、顏色。

? ? ??2：border-right: ????右邊框，可給邊框設(shè)置寬度、線型、顏色。

? ? ??3：border-bottom: ??底邊框，可給邊框設(shè)置寬度、線型、顏色。

? ? ??4：border-left: ?????左邊框，可給邊框設(shè)置寬度、線型、顏色。

? ? ??為盒子寫邊框?qū)傩詴r(shí)，為方便書寫，有復(fù)合式寫法：

設(shè)置邊框?qū)挾葟?fù)合式寫法：

? ? ??1：border-top-width:10px ; ???????上邊框的寬度

? ? ??2：border-right-width:20px; 右邊框的寬度

? ? ??3：border-bottom-width:30px; ???下邊框的寬度

? ? ??4：border-left-width: 40px; ??????左邊框的寬度

? ? ??border-width:10px 20px 30px 40px; ?border-width 的復(fù)合式寫法

設(shè)置邊線型度復(fù)合式寫法：

? ? ??1：border-top-style:solid; ???????????上邊框的線型

? ? ??2：border-right-style:dashed; ????????右邊框的線型

? ? ??3：border-bottom-style:double; ??????下邊框的線型

? ? ??4：border-left-style:dotted; ??????????左邊框的線型

? ? ??邊框樣式：border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)可單獨(dú)設(shè)置一方向邊框

? ? ??border-style:solid dashed dotted double; ???border-style 的復(fù)合式寫法

設(shè)置邊框顏色復(fù)合式寫法：

? ? ??1：border-top-color:#f00; ??????????上邊框的顏色

? ? ??2：border-right-color:#ff0; ??????????右邊框的顏色

? ? ??3：border-bottom-color:#00f; ???????下邊框的顏色

? ? ??4：border-left-color:#fff; ??????????左邊框的顏色

? ? ??border-color:#f00 #ff0 #00f #fff; ?border-color 的復(fù)合式寫法

單一屬性值復(fù)合式寫法：

? ? ??如果邊框的屬性值我用1、2、3、4、來(lái)代替，那么它們的復(fù)合式寫法可有以下幾種：

? ? ??1：border:1；2；3；4； ：1、上 ；2、右 ；3、下； 4、左

? ? ??2：border:1；2；3； ???：1、上；2、左和右3、下

? ? ??3：border:1；2； ??????：1、上和下；2、左和右

? ? ??4：border:1； ?????????：1、上、下、左、右 ?

多屬性值復(fù)合式寫法：

? ? ??復(fù)合式寫法：分開設(shè)置每個(gè)邊的邊框樣式

? ? ??1：border-top:#f00 solid 10px; ??

? ? ??2：border-right:#0f0 dotted 20px;

? ? ??3：border-bottom:#00f dashed 30px;

? ? ??4：border-left:#fff double 40px;

? ? ??border：10px solid #ff0; ?????代表四個(gè)邊框樣式是統(tǒng)一的，最復(fù)合式的寫法；

注：邊框的大小，是會(huì)添加在元素原有大小之外的，會(huì)改變?cè)卦镜拇笮?；也就是說(shuō)邊框是占位置的（在標(biāo)準(zhǔn)盒模型的情況下）。

二、padding屬性

padding在盒子里的屬性作用：

? ? ??可以用來(lái)控制父元素和子元素之間的位置關(guān)系

? ? ??可以用來(lái)控制元素和內(nèi)容之間的位置關(guān)系

padding的特點(diǎn)：

? ? ??再給盒子添加了padding值之后，padding值會(huì)把元素原有的盒子大小撐大，如果讓元素原本盒子大小不變得話，需要在元素的寬高上減掉所加的padding值。 padding屬性對(duì)背景圖片是不起作用的，可以說(shuō)背景圖片的位置，是不受padding的影響的。如果元素本身有背景色，那么背景色會(huì)延展到padding區(qū)域。

padding的使用方法

方法一：給盒子單個(gè)方向加padding值

? ? ??1：padding-top:10px; ????????上填充

? ? ??2：padding-right:10px; ???????右填充

? ? ??3：padding-bottom:10px; ?????下填充

? ? ??4：padding-left:10px; ?????????左填充

?方法二：給盒子所有方向加padding值（復(fù)合式寫法）

? ? ??1：padding： 1 ??2 ???3 ??4 ?： ?1、上；2、右；3、下；4、左

? ? ??2：padding： 1 ??2 ???3 ?????： ?1、上；2、左和右；3、下

? ? ??3：padding： 1 ??2 ??????????： ?1、上和下；2、左和右

? ? ??4：padding： 1 ??????????????： ?1、上 、右、 下、 左

三、margin屬性

margin在盒子里屬性的作用：

? ? ??用來(lái)控制同輩元素之間的位置關(guān)系。

margin的特點(diǎn)：?

? ? ??margin是顯示在元素邊框以外的空白區(qū)的，給元素加上的margin值是不需要減去的，而且margin屬性的值可以施加負(fù)值。

magin的使用方法：

方法一：給盒子單個(gè)方向加margin值

? ? ??1：margin-top:10px; ????????上外邊距

? ? ??2：margin-right:10px; ???????右外邊距

? ? ??3：margin-bottom:10px; ?????下外邊距

? ? ??4：margin-left:10px; ????????左外邊距

方法二：給盒子所有方向加margin值（復(fù)合式寫法）

? ? ??margin：1 ??2 ???3 ??4 ???????：1、上；2、右；3、下；4、左

? ? ??margin：1 ??2 ???3 ???????????：1、上；2、左和右；3、下

? ? ??margin：1 ??2 ????????????????：1、上和下；2、左和右

? ? ??margin：1 ????????????????????：1、上、右、下、左

? ? ??在盒模型中margin屬性除了可以設(shè)置外邊距以外，還可實(shí)現(xiàn)元素水平居中：margin：0 auto；、margin-left:auto;、margin-right:auto;共三種屬性值。

margin的特性：

? ? ??在盒模型中margin屬性是可以寫負(fù)值的，可以用此來(lái)實(shí)現(xiàn)元素位置調(diào)整，而且margin的值是不會(huì)影響到元素的實(shí)際大小，但是會(huì)影響到其他元素所占區(qū)域。

補(bǔ)充：盒模型margin屬性的bug

? ? ??盒模型中如果給多個(gè)元素設(shè)置margin值，上下兩個(gè)相鄰元素之間的margin值會(huì)重疊顯示，會(huì)用相鄰元素margin的最大值顯示

? ? ??在盒模型中當(dāng)給元素里第一個(gè)子元素（塊狀元素）添加margin-top值的時(shí)候，會(huì)錯(cuò)誤的把這個(gè)margin-top值添加給父元素。此條件建立在當(dāng)前元素下沒(méi)有浮動(dòng)和邊框的條件下。

? ? ??這兩種bug都可以用BFC解決，其中bug2給大家推薦幾種方法：

? ? ??方法1：給父元素添加overflow：hidden；屬性（比較好用）

? ? ??方法2：給父元素添加邊框

? ? ??方法3：把元素中的margin屬性改用padding屬性

? ? ??方法3：給父元素和子元素添加浮動(dòng)屬性

? ? ??最后給大家提示一下：margin就是用來(lái)控制同輩元素之間的位置關(guān)系；padding就是用來(lái)控制父子元素之間的位置關(guān)系。

? ? ??標(biāo)準(zhǔn)盒模型和怪異盒模型

? ? ??標(biāo)準(zhǔn)盒模型和怪異盒模型區(qū)別就在于他們的組成部分

? ? ??標(biāo)準(zhǔn)盒模型所占位置組成：

? ? ??寬高組成content+padding+border+margin

? ? ??元素寬度實(shí)際占有的位置大小：寬+左右padding+左右border+左右margin

? ? ??元素高度實(shí)際占有的位置大?。焊?上下padding+上下border+上下margin

? ? ??怪異盒模型：

? ? ??元素的寬度：width（content+border+padding）+margin

? ? ??屬性：box-sizing: border-box（怪異盒模型）/content-box（標(biāo)準(zhǔn)盒模型）

? ? ??相較而言，標(biāo)準(zhǔn)盒模型的組成屬性是分開組成的，而怪異盒模型的content、border、padding屬性可以看做一個(gè)組成部分，再加上margin屬性由此構(gòu)成了整個(gè)怪異盒模型

盒模型的大小計(jì)算

? ? ??從盒模型的定義中我們了解到了盒模型是由4個(gè)部分組成，那么盒子的大該如何計(jì)算呢？由定義我們可以想到盒子的大小應(yīng)該是：內(nèi)容區(qū)（content）+填充區(qū)（padding）+邊框（border）+外邊距（margin）=盒子大小。但是，在盒模型這四個(gè)屬性中除了content屬性其余屬性值都有4個(gè)屬性，那么盒子的寬高大小可以用此方法計(jì)算：

盒子元素的寬度:

? ? ??由margin-left+border-left+padding-left+width(content內(nèi)容元素的寬度)+padding-right+border-right+margin-right=元素的總寬度。如下圖2-1、2-2所示

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖2-1

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 圖2-2

盒子元素的高度:

? ? ??由margin-top+border-top+padding-top+height(content內(nèi)容元素的高度)+padding-right+border-right+margin-right=元素的總寬度。如下圖2-3、2-4所示

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖2-3

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖2-4

感謝閱讀

? ? ?? 作為一名新手，在H5中我只是初入，可謂是入門都沒(méi)有踏進(jìn)，所以在后面的日子里需要去努力成長(zhǎng)，去拼搏，當(dāng)然這些都是我個(gè)人的想法，此外感謝看到這里大佬和朋友，在這里看了一段白話，因?yàn)楸救宋牟刹⒉皇翘貏e好，又是初入H5，所以文中有些不順望大家諒解。