盒子模型

使用width來設(shè)置盒子內(nèi)容區(qū)的寬度
使用height來設(shè)置盒子內(nèi)容區(qū)的高度
width和height只是設(shè)置的盒子內(nèi)容區(qū)的大小麦向，而不是盒子的整個大小沉眶，盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定

為元素設(shè)置邊框

要為一個元素設(shè)置邊框必須指定三個樣式
border-width:邊框的寬度
border-color:邊框顏色
border-style:邊框的樣式
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值
則四個值會分別設(shè)置給上璧榄、右稽亏、下、左福青，按照順時針的方向設(shè)置的
如果指定三個值
則三個值會分別設(shè)置給上摄狱、左右脓诡、下
如果指定兩個值
則兩個值會分別設(shè)置給上下、左右
如果指定一個值媒役，則四邊全都是該值
除了border-width祝谚，CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left
專門用來設(shè)置指定邊的寬度

設(shè)置邊框的顏色

和寬度一樣，color也提供四個方向的樣式酣衷，可以分別指定顏色
border-xxx-color

設(shè)置邊框的樣式

可選值：
none交惯，默認(rèn)值，沒有邊框
solid 實(shí)線
dotted 點(diǎn)狀邊框
dashed 虛線
double 雙線
style也可以分別指定四個邊的邊框樣式，規(guī)則和width一致席爽，同時它也提供border-xxx-style四個樣式意荤，來分別設(shè)置四個邊

設(shè)置邊框

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

border

邊框的簡寫樣式玖像，通過它可以同時設(shè)置四個邊框的樣式，寬度齐饮，顏色
而且沒有任何的順序要求
border一指定就是同時指定四個邊不能分別指定
border-top border-right border-bottom border-left
可以單獨(dú)設(shè)置四個邊的樣式捐寥，規(guī)則和border一樣，只不過它只對一個邊生效

邊距

一祖驱、內(nèi)邊距

內(nèi)邊距（padding）握恳，指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離，一共有四個方向：
padding-top
padding-right
padding-bottom
padding-left
內(nèi)邊距會影響盒子的可見框的大小捺僻，元素的背景會延伸到內(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è)置四個邊框的樣式，規(guī)則和border-width一致

二匕坯、外邊距

外邊距指的是當(dāng)前盒子與其他盒子之間的距離就珠，他不會影響可見框的大小，而是會影響到盒子的位置
盒子有四個方向的外邊距：
margin-top
margin-right
margin-bottom
margin-left
由于頁面中的元素都是靠左靠上擺放的醒颖，所以注意當(dāng)我們設(shè)置上和左外邊距時妻怎，會導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會改變其他盒子的位置
設(shè)置上外邊距泞歉，即盒子的上邊框與其他盒子的距離
margin-top: 100px;
左外邊距
margin-left: 100px;
設(shè)置右和下外邊距
margin-right: 100px;
margin-bottom: 100px;
外邊距也可以指定為一個負(fù)值逼侦，如果外邊距設(shè)置的是負(fù)值，則元素會向反方向移動
margin-left: -100px;
margin-top: -100px;
margin-bottom: -100px;
margin-bottom: -100px;
margin還可以設(shè)置為auto腰耙，auto一般只設(shè)置給水平方向的margin
如果只指定榛丢，左外邊距或右外邊距的margin為auto則會將外邊距設(shè)置為最大值
垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)就是0
如果將left和right同時設(shè)置為auto挺庞，則會將兩側(cè)的外邊距設(shè)置為相同的值晰赞，就可以使元素自動在父元素中居中
所以我們經(jīng)常將左右外邊距設(shè)置為auto，以使子元素在父元素中水平居中
margin-left: auto;
margin-right: auto;
margin-top: auto;
外邊距同樣可以使用簡寫屬性 margin选侨，可以同時設(shè)置四個方向的外邊距,規(guī)則和padding一樣
margin: 10px 20px 30px 40px;

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

盒模型分成內(nèi)容區(qū)掖鱼、內(nèi)邊距 、邊框 援制、外邊距四個部分
內(nèi)聯(lián)元素不能設(shè)置width和height
width: 100px;
height: 100px;
設(shè)置水平內(nèi)邊距,內(nèi)聯(lián)元素可以設(shè)置水平方向的內(nèi)邊距*/
padding-left: 100px;
padding-right: 100px;

display和visibility

display

將一個內(nèi)聯(lián)元素變成塊元素
通過display樣式可以修改元素的類型
可選值：
inline：可以將一個元素作為內(nèi)聯(lián)元素顯示
block: 可以將一個元素設(shè)置塊元素顯示
inline-block：將一個元素轉(zhuǎn)換為行內(nèi)塊元素
可以使一個元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)戏挡，既可以設(shè)置寬高，又不會獨(dú)占一行
none: 不顯示元素晨仑，并且元素不會在頁面中繼續(xù)占有位置
display: none;
使用該方式隱藏的元素褐墅，不會在頁面中顯示拆檬，并且不再占據(jù)頁面的位置

visibility

visibility
可以用來設(shè)置元素的隱藏和顯示的狀態(tài)
可選值：
visible 默認(rèn)值，元素默認(rèn)會在頁面顯示
hidden 元素會隱藏不顯示
使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示妥凳，
但是它的位置會依然保持

overflow

子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中竟贯，理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小
如果子元素的大小超過了父元素的內(nèi)容區(qū)，則超過的大小會在父元素以外的位置顯示
超出父元素的內(nèi)容逝钥，我們稱為溢出的內(nèi)容
父元素默認(rèn)是將溢出內(nèi)容澄耍，在父元素外邊顯示
通過overflow可以設(shè)置父元素如何處理溢出內(nèi)容：
可選值：
visible，默認(rèn)值晌缘，不會對溢出內(nèi)容做處理齐莲，元素會在父元素以外的位置顯示
hidden, 溢出的內(nèi)容，會被修剪磷箕，不會顯示
scroll, 會為父元素添加滾動條选酗，通過拖動滾動條來查看完整內(nèi)容
該屬性不論內(nèi)容是否溢出，都會添加水平和垂直雙方向的滾動條
auto岳枷，會根據(jù)需求自動添加滾動條芒填，需要水平就添加水平，需要垂直就添加垂直空繁，都不需要就都不加

文檔流

文檔流
文檔流處在網(wǎng)頁的最底層殿衰，它表示的是一個頁面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中
元素在文檔流中的特點(diǎn)
塊元素
1.塊元素在文檔流中會獨(dú)占一行盛泡，塊元素會自上向下排列
2.塊元素在文檔流中默認(rèn)寬度是父元素的100%
3.塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開
內(nèi)聯(lián)元素
1.內(nèi)聯(lián)元素在文檔流中只占自身的大小闷祥，會默認(rèn)從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素傲诵，則換到下一行凯砍，繼續(xù)自左向右。
2.在文檔流中拴竹，內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開
當(dāng)元素的寬度的值為auto時悟衩，此時指定內(nèi)邊距不會影響可見框的大小，而是會自動修改寬度栓拜，以適應(yīng)內(nèi)邊距

浮動

塊元素在文檔流中默認(rèn)垂直排列座泳，所以這個三個div自上至下依次排開
如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流
使用float來使元素浮動幕与，從而脫離文檔流
可選值：
none挑势，默認(rèn)值，元素默認(rèn)在文檔流中排列
left纽门，元素會立即脫離文檔流薛耻，向頁面的左側(cè)浮動
right营罢，元素會立即脫離文檔流赏陵，向頁面的右側(cè)浮動
當(dāng)為一個元素設(shè)置浮動以后（float屬性是一個非none的值）饼齿，元素會立即脫離文檔流，元素脫離文檔流以后蝙搔，它下邊的元素會立即向上移動
元素浮動以后缕溉，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素
如果浮動元素上邊是一個沒有浮動的塊元素吃型，則浮動元素不會超過塊元素

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

在文檔流中证鸥，子元素的寬度默認(rèn)占父元素的全部
當(dāng)元素設(shè)置浮動以后，會完全脫離文檔流.
塊元素脫離文檔流以后勤晚，高度和寬度都被內(nèi)容撐開
開啟span的浮動
內(nèi)聯(lián)元素脫離文檔流以后會變成塊元素