????????????????????????????????????????????盒子模型

盒子的寬度=??width?+左右邊框?+?左右內(nèi)邊距

盒子的高度=??height?+上下邊框?+?上下的內(nèi)邊距

....................................................................................................................................

使用width來設(shè)置盒子內(nèi)容區(qū)的寬度

使用height來設(shè)置盒子內(nèi)容區(qū)的高度

width和height只是設(shè)置的盒子內(nèi)容區(qū)的大小，而不是盒子的整個(gè)大小，盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定

....................................................................................................................................

為元素設(shè)置邊框

要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式

border-width:邊框的寬度

border-color:邊框顏色

border-style:邊框的樣式

....................................................................................................................................

使用border-width可以分別指定四個(gè)邊框的寬度

如果在border-width指定了四個(gè)值

則四個(gè)值會(huì)分別設(shè)置給上、右、下、左，按照順時(shí)針的方向設(shè)置的

如果指定三個(gè)值

則三個(gè)值會(huì)分別設(shè)置給上、左右、下

如果指定兩個(gè)值

則兩個(gè)值會(huì)分別設(shè)置給上下、左右

如果指定一個(gè)值，則四邊全都是該值

除了border-width，CSS中還提供了四個(gè)border-xxx-width

xxx的值可能是top right bottom left

專門用來設(shè)置指定邊的寬度

....................................................................................................................................

設(shè)置邊框的顏色

和寬度一樣，color也提供四個(gè)方向的樣式，可以分別指定顏色

border-xxx-color

....................................................................................................................................

設(shè)置邊框的樣式

可選值：

none，默認(rèn)值，沒有邊框

solid 實(shí)線

dotted 點(diǎn)狀邊框

dashed 虛線

double 雙線

....................................................................................................................................

style也可以分別指定四個(gè)邊的邊框樣式，規(guī)則和width一致，同時(shí)它也提供border-xxx-style四個(gè)樣式，來分別設(shè)置四個(gè)邊

border-style: double;

....................................................................................................................................

????????????????????????????????????????????????邊框

設(shè)置邊框

大部分的瀏覽器中，邊框的寬度和顏色都是有默認(rèn)值，而邊框的樣式默認(rèn)值都是none

border-width: 10px;

border-color: red;

border-style: solid;?

....................................................................................................................................

border

- 邊框的簡寫樣式，通過它可以同時(shí)設(shè)置四個(gè)邊框的樣式，寬度，顏色

- 而且沒有任何的順序要求

- border一指定就是同時(shí)指定四個(gè)邊不能分別指定

border-top border-right border-bottom border-left

可以單獨(dú)設(shè)置四個(gè)邊的樣式，規(guī)則和border一樣，只不過它只對(duì)一個(gè)邊生效

....................................................................................................................................

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?內(nèi)邊距

內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離，一共有四個(gè)方向：

padding-top

padding-right

padding-bottom

padding-left

內(nèi)邊距會(huì)影響盒子的可見框的大小，元素的背景會(huì)延伸到內(nèi)邊距

盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定

盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width

盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

設(shè)置上內(nèi)邊距

padding-top: 100px;

設(shè)置右內(nèi)邊距

padding-right: 100px;

padding-bottom: 100px;

padding-left: 100px;

....................................................................................................................................

使用padding可以同時(shí)設(shè)置四個(gè)邊框的樣式，規(guī)則和border-width一致

padding: 100px;

padding: 100px 200px;

padding: 100px 200px 300px;

padding: 100px 200px 300px 400px;

....................................................................................................................................

? ??????????????????????????????????????????????外邊距

外邊距指的是當(dāng)前盒子與其他盒子之間的距離，他不會(huì)影響可見框的大小，而是會(huì)影響到盒子的位置

盒子有四個(gè)方向的外邊距：

margin-top

margin-right

margin-bottom

margin-left

由于頁面中的元素都是靠左靠上擺放的，所以注意當(dāng)我們?cè)O(shè)置上和左外邊距時(shí)，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會(huì)改變其他盒子的位置

....................................................................................................................................

設(shè)置上外邊距，即盒子的上邊框與其他盒子的距離

margin-top: 100px;

左外邊距

margin-left: 100px;

設(shè)置右和下外邊距

margin-right: 100px;

margin-bottom: 100px;

....................................................................................................................................

外邊距也可以指定為一個(gè)負(fù)值，如果外邊距設(shè)置的是負(fù)值，則元素會(huì)向反方向移動(dòng)

....................................................................................................................................

margin-left: -100px;

margin-top: -100px;

margin-bottom: -100px;

margin-bottom: -100px;

....................................................................................................................................

margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin

如果只指定，左外邊距或右外邊距的margin為auto則會(huì)將外邊距設(shè)置為最大值

垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)就是0

如果將left和right同時(shí)設(shè)置為auto，則會(huì)將兩側(cè)的外邊距設(shè)置為相同的值，就可以使元素自動(dòng)在父元素中居中

所以我們經(jīng)常將左右外邊距設(shè)置為auto，以使子元素在父元素中水平居中

....................................................................................................................................

margin-left: auto;

margin-right: auto

margin-top: auto;

....................................................................................................................................

外邊距同樣可以使用簡寫屬性 margin，可以同時(shí)設(shè)置四個(gè)方向的外邊距,規(guī)則和padding一樣

....................................................................................................................................

margin: 10px 20px 30px 40px;

margin: 0 auto;

....................................................................................................................................

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 外邊距的重疊

垂直外邊距的重疊

在網(wǎng)頁中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距的重疊

所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是取和

如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會(huì)設(shè)置給父元素

...................................................................................................................................