盒子模型

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

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

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

要為一個(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

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

設(shè)置邊框的樣式

* 可選值：

* none，默認(rèn)值，沒(méi)有邊框

* solid 實(shí)線

* dotted 點(diǎn)狀邊框

* dashed 虛線

* double 雙線

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

border-style: double;

border-style: solid dotted dashed double;

邊框

設(shè)置邊框

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

border

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

- 而且沒(méi)有任何的順序要求

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

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

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

內(nèi)邊距

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

padding-top

padding-right

padding-bottom

padding-left

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

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

盒子可見(jiàn)框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width

盒子可見(jiàn)框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

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

外邊距

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

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

margin-top

margin-right

margin-bottom

margin-left

由于頁(yè)面中的元素都是靠左靠上擺放的，所以注意當(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;

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

外邊距的重疊

垂直外邊距的重疊

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

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

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

瀏覽器的默認(rèn)樣式

瀏覽器為了在頁(yè)面中沒(méi)有樣式時(shí)，也可以有一個(gè)比較好的顯示效果，所以為很多的元素都設(shè)置了一些默認(rèn)的margin和padding，而它的這些默認(rèn)樣式，正常情況下我們是不需要使用的。

所以我們往往在編寫樣式之前需要將瀏覽器中的默認(rèn)的margin和padding統(tǒng)統(tǒng)的去掉

*{

margin: 0;

padding: 0;

}

內(nèi)聯(lián)元素的盒模型

/*盒模型分成內(nèi)容區(qū)、內(nèi)邊距 、邊框 、外邊距四個(gè)部分*/

/*內(nèi)聯(lián)元素不能設(shè)置width和height*/

/*設(shè)置水平內(nèi)邊距,內(nèi)聯(lián)元素可以設(shè)置水平方向的內(nèi)邊距*/

padding-left: 100px;

padding-right: 100px;

/*垂直方向內(nèi)邊距，內(nèi)聯(lián)元素可以設(shè)置垂直方向內(nèi)邊距，但是不會(huì)影響頁(yè)面的布局*/

/*padding-top: 50px;

padding-bottom: 50px;*/

/*為元素設(shè)置邊框,內(nèi)聯(lián)元素可以設(shè)置邊框，但是垂直的邊框不會(huì)影響到頁(yè)面的布局*/

border: 1px blue solid;

/*水平外邊距，內(nèi)聯(lián)元素支持水平方向的外邊距*/

margin-left:100px;

margin-right: 100px;

display和visibility.html

將一個(gè)內(nèi)聯(lián)元素變成塊元素

通過(guò)display樣式可以修改元素的類型

可選值：

inline：可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示

block: 可以將一個(gè)元素設(shè)置塊元素顯示

inline-block：將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素

- 可以使一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)，既可以設(shè)置寬高，又不會(huì)獨(dú)占一行

none: 不顯示元素，并且元素不會(huì)在頁(yè)面中繼續(xù)占有位置

display: none;

使用該方式隱藏的元素，不會(huì)在頁(yè)面中顯示，并且不再占據(jù)頁(yè)面的位置

visibility

* - 可以用來(lái)設(shè)置元素的隱藏和顯示的狀態(tài)

* - 可選值：

* visible 默認(rèn)值，元素默認(rèn)會(huì)在頁(yè)面顯示

* hidden 元素會(huì)隱藏不顯示

*

* 使用 visibility:hidden;隱藏的元素雖然不會(huì)在頁(yè)面中顯示，

* 但是它的位置會(huì)依然保持

visibility: hidden;

overliow.html

子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中，理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小

如果子元素的大小超過(guò)了父元素的內(nèi)容區(qū)，則超過(guò)的大小會(huì)在父元素以外的位置顯示

超出父元素的內(nèi)容，我們稱為溢出的內(nèi)容

父元素默認(rèn)是將溢出內(nèi)容，在父元素外邊顯示

通過(guò)overflow可以設(shè)置父元素如何處理溢出內(nèi)容：

可選值：

- visible，默認(rèn)值，不會(huì)對(duì)溢出內(nèi)容做處理，元素會(huì)在父元素以外的位置顯示

- hidden, 溢出的內(nèi)容，會(huì)被修剪，不會(huì)顯示

- scroll, 會(huì)為父元素添加滾動(dòng)條，通過(guò)拖動(dòng)滾動(dòng)條來(lái)查看完整內(nèi)容

- 該屬性不論內(nèi)容是否溢出，都會(huì)添加水平和垂直雙方向的滾動(dòng)條

- auto，會(huì)根據(jù)需求自動(dòng)添加滾動(dòng)條，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

文檔流

文檔流

文檔流處在網(wǎng)頁(yè)的最底層，它表示的是一個(gè)頁(yè)面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中

元素在文檔流中的特點(diǎn)

塊元素

1.塊元素在文檔流中會(huì)獨(dú)占一行，塊元素會(huì)自上向下排列

2.塊元素在文檔流中默認(rèn)寬度是父元素的100%

3.塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開(kāi)

內(nèi)聯(lián)元素

1.內(nèi)聯(lián)元素在文檔流中只占自身的大小，會(huì)默認(rèn)從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素，則換到下一行，繼續(xù)自左向右。

2.在文檔流中，內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)

當(dāng)元素的寬度的值為auto時(shí)，此時(shí)指定內(nèi)邊距不會(huì)影響可見(jiàn)框的大小，而是會(huì)自動(dòng)修改寬度，以適應(yīng)內(nèi)邊距

浮動(dòng)

塊元素在文檔流中默認(rèn)垂直排列，所以這個(gè)三個(gè)div自上至下依次排開(kāi)

如果希望塊元素在頁(yè)面中水平排列，可以使塊元素脫離文檔流

使用float來(lái)使元素浮動(dòng)，從而脫離文檔流

可選值：

none，默認(rèn)值，元素默認(rèn)在文檔流中排列

left，元素會(huì)立即脫離文檔流，向頁(yè)面的左側(cè)浮動(dòng)

right，元素會(huì)立即脫離文檔流，向頁(yè)面的右側(cè)浮動(dòng)

當(dāng)為一個(gè)元素設(shè)置浮動(dòng)以后（float屬性是一個(gè)非none的值），元素會(huì)立即脫離文檔流，元素脫離文檔流以后，它下邊的元素會(huì)立即向上移動(dòng)

元素浮動(dòng)以后，會(huì)盡量向頁(yè)面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動(dòng)元素

如果浮動(dòng)元素上邊是一個(gè)沒(méi)有浮動(dòng)的塊元素，則浮動(dòng)元素不會(huì)超過(guò)塊元素

float: left;

文字繞圖

浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍，所以我們可以通過(guò)浮動(dòng)來(lái)設(shè)置文字環(huán)繞圖片的效果

*/

float: left;

內(nèi)聯(lián)元素的浮動(dòng)

在文檔流中，子元素的寬度默認(rèn)占父元素的全部

當(dāng)元素設(shè)置浮動(dòng)以后，會(huì)完全脫離文檔流.

塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開(kāi)

開(kāi)啟span的浮動(dòng)

內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊元素

簡(jiǎn)單布局

/*清除默認(rèn)樣式*/

*{

margin: 0;

padding: 0;

}

設(shè)置格式一樣以此圖為例

/*設(shè)置主體內(nèi)部*/

.content{

/*設(shè)置居中*/

margin: 10px auto;

}

/*設(shè)置content中小div的樣式*/

.left{

/*向左浮動(dòng)*/

float: left;

}

.center{

/*向左浮動(dòng)*/

float: left;

/*設(shè)置水平外邊距0*/

margin: 0 10px;

}

.right{

/*向左浮動(dòng)*/

float: left;

}

/*設(shè)置頁(yè)腳*/

.footer{

/*設(shè)置居中*/

margin: 0 auto;

}