一骑疆、盒子模型
1贿肩、盒子
CSS處理網(wǎng)頁時座哩，它認為每個元素都包含在一 個不可見的盒子里苍凛，我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相應(yīng)的 位置即可完成網(wǎng)頁的布局
2趣席、盒子模型
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
-
內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容醇蝴，子元素都是存在于內(nèi)容區(qū)中的宣肚，如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認和盒子大小是一致的
通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大小 -
內(nèi)邊距
內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間悠栓。
使用padding屬性來設(shè)置元素的內(nèi)邊距
例如：padding:10px 20px 30px 40px
這樣會設(shè)置元素的上霉涨、右、下惭适、左四個方向的內(nèi)邊距
padding:10px 20px 30px
分別指定上笙瑟、左右、下四個方向的內(nèi)邊距
padding:10px 20px
分別指定上下腥沽、左右四個方向的內(nèi)邊距
padding:10px
同時指定上左右下四個方向的內(nèi)邊距
同時在css中還提供了padding-top逮走、padding-left、padding-right、padding-bottom分別用來指定四個方向的內(nèi)邊
-
邊框
可以在元素周圍創(chuàng)建邊框师溅，邊框是元素可見框的最外部
可以使用border屬性來設(shè)置盒子的邊框
border:1px red solid
上邊的樣式分別指定了邊框的寬度茅信、顏色和樣式
也可以使用border-top/left/right/bottom分別指定上右下左四個方向的邊框
- 邊框的樣式
none（沒有邊框）
dotted（點線）
dashed（虛線）
solid（實線）
double（雙線）
groove（槽線）
ridge（脊線）
inset（凹邊）
outset（凸邊） -
外邊距
外邊距是元素邊框與周圍元素相距的空間
使用margin屬性可以設(shè)置外邊距
用法和padding類似，同樣也提供了四個方向的 margin-top/right/bottom/left
當將左右外邊距設(shè)置為auto時墓臭，瀏覽器會將左右外 邊距設(shè)置為相等蘸鲸，所以這行代碼margin:0 auto可 以使元素居中
垂直外邊距的重疊：在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊，所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷∽畲笾刀皇侨『土保绻缸釉氐拇怪蓖膺吘嘞噜徚俗靡。瑒t子元素的外邊距會設(shè)置給父元素
3、瀏覽器默認樣式
瀏覽器為了在頁面中沒有樣式時嗡载，也可以有一個比較好的顯示效果窑多，所以為很多的元素都設(shè)置了一些默認的margin和padding，而它的這些默認樣式洼滚，正常情況下我們是不需要使用的埂息。所以我們往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統(tǒng)統(tǒng)的去掉
*{
margin: 0;
padding: 0;
}
4、內(nèi)聯(lián)元素的盒模型
內(nèi)聯(lián)元素不能設(shè)置width和height遥巴，可以設(shè)置水平方向的內(nèi)邊距
padding-left: 100px;
padding-right: 100px
還可以設(shè)置邊框千康，外邊距
border: 1px blue solid
margin-left:100px
margin-right: 100px
水平方向的相鄰元素的外邊距不會重疊，會求和铲掐；
內(nèi)聯(lián)元素不支持垂直外邊距
5拾弃、display
我們不能為行內(nèi)元素設(shè)置width、height摆霉、margin-top和margin-bottom豪椿，我們可以通過修改display來修改元素的性質(zhì)
可選值：
block：設(shè)置元素為塊元素
inline：設(shè)置元素為行內(nèi)元素
inline-block：設(shè)置元素為行內(nèi)塊元素（可以使一個元素既有行內(nèi)元素的特點又有塊元素的特點，既可以設(shè)置寬高携栋，又不會獨占一行）
none：隱藏元素砂碉，不會繼續(xù)占有位置（元素將在頁面中完全消失）
6、visibility
visibility屬性主要用于元素是否可見刻两，和display不同，使用visibility隱藏一個元 素滴某，隱藏后其在文檔中所占的位置會依然保持磅摹，不會被其他元素覆蓋
可選值：
visible：可見的，默認值霎奢，元素默認會在頁面顯示
hidden：隱藏的户誓，位置會依然保持
7、overflow
當相關(guān)標簽里面的內(nèi)容超出了樣式的寬度和高度時幕侠，可以通過overflow來控制內(nèi)容溢出的情況
可選值：
visible：默認值帝美，不會對溢出內(nèi)容做處理，元素會在父元素以外的位置顯示
scroll：會為父元素添加滾動條晤硕，通過拖動滾動條來查看完整內(nèi)容（該屬性不論內(nèi)容是否溢出悼潭，都會添加水平和垂直雙方向的滾動條）
auto：會根據(jù)需求自動添加滾動條庇忌，需要水平就添加水平，需要垂直就添加垂直舰褪，都不需要就都不加
hidden：隱藏超出盒子的內(nèi)容皆疹，溢出的內(nèi)容，會被修剪占拍，不會顯示
8略就、 文檔流
文檔流指的是文檔中可現(xiàn)實的對象在排列時所占用的位置，將窗體自上而下分成一行行晃酒，并在每行中按從左至右的順序排 放元素表牢，即為文檔流，這樣一來每一個塊元素都會另起一行贝次，那么我們?nèi)绻朐谖臋n 流中進行布局就會變得比較麻煩
- 元素在文檔流中的特點：
塊元素：1.塊元素在文檔流中會獨占一行崔兴，塊元素會自上向下排列；2.塊元素在文檔流中默認寬度是父元素的100%浊闪；3.塊元素在文檔流中的高度默認被內(nèi)容撐開
內(nèi)聯(lián)元素：1.內(nèi)聯(lián)元素在文檔流中只占自身的大小恼布，會默認從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素搁宾，則換到下一行折汞，繼續(xù)自左向右贴彼；2.在文檔流中绽族，內(nèi)聯(lián)元素的寬度和高度默認都被內(nèi)容撐開
9了讨、浮動
- 當一個元素浮動以后球凰，其下方的元素會上移殴蓬。元素中的內(nèi)容將會圍繞在元素的周圍
- 浮動會使元素完全脫離文本流纵揍，也就是不再在文檔中在占用位置
- 元素設(shè)置浮動以后蛔屹，會一直向上漂浮直到遇到父元素的邊界或者其他浮動元素
- 元素浮動以后即完全脫離文檔流灌具，這時不會再影響父元素的高度茂卦。也就是浮動元素不會撐開父元素
- 浮動元素默認會變?yōu)閴K元素何什，即使設(shè)置display:inline以后其依然是個塊元素
-
文字饒圖
浮動的元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍等龙，所以我們可以通過浮動來設(shè)置文字環(huán)繞圖片的效果 - 塊元素脫離文檔流以后处渣，高度和寬度都被內(nèi)容撐開，也就是子元素多高蛛砰，父元素就多高
10罐栈、高度塌陷
在文檔流中，父元素的高度默認是被子元素撐開的泥畅，也就是子元素多高荠诬，父元素就多高，但是當為子元素設(shè)置浮動以后，子元素會完全脫離文檔流柑贞，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度方椎，導(dǎo)致父元素的高度塌陷，由于父元素的高度塌陷了凌外，則父元素下的所有元素都會向上移動辩尊，這樣將會導(dǎo)致頁面布局混亂，所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題康辑。
-
解決方案一
根據(jù)W3C的標準摄欲，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊的格式化環(huán)境）簡稱BFC，該屬性可以設(shè)置打開或者關(guān)閉疮薇，默認是關(guān)閉的胸墙，當開啟元素的BFC以后，元素將會具有如下的特性：1.父元素的垂直外邊距不會和子元素重疊按咒；2.開啟BFC的元素不會被浮動元素所覆蓋迟隅；3.開啟BFC的元素可以包含浮動的子元素
如何開啟BFC：
1.設(shè)置元素浮動（ 使用這種方式開啟，雖然可以撐開父元素励七，但是會導(dǎo)致父元素的寬度丟失智袭，而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題）掠抬；
2吼野、設(shè)置元素絕對定位；
3两波、設(shè)置元素為inline-block（可以解決問題瞳步，但是會導(dǎo)致寬度丟失，不推薦使用這種方式）腰奋；
4单起、將元素的overflow設(shè)置為一個非visible的值，推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式
在IE6中雖然沒有BFC劣坊，但是具有另一個隱含的屬性叫做hasLayout嘀倒，該屬性的作用和BFC類似，所在IE6瀏覽器可以通過開hasLayout來解決該問題局冰，直接將元素的zoom設(shè)置為1即可括儒。zoom表示放大的意思，后邊跟著一個數(shù)值锐想，寫幾就將元素放大幾倍，zoom:1表示不放大元素乍狐，但是通過該樣式可以開啟hasLayout赠摇，zoom這個樣式，只在IE中支持，其他瀏覽器都不支持 -
解決方案二
可以直接在高度塌陷的父元素的最后藕帜，添加一個空白的div烫罩，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的洽故，然后再對其進行清除浮動贝攒，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用时甚，使用這種方式雖然可以解決問題隘弊，但是會在頁面中添加多余的結(jié)構(gòu) -
解決方案三
可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動荒适，這樣做和添加一個div的原理一樣梨熙，可以達到一個相同的效果，而且不會在頁面中添加多余的div刀诬，這是我們最推薦使用的方式咽扇，幾乎沒有副作用。在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理
11陕壹、 清除浮動
clear屬性可以用于清除元素周圍的浮動對元素的影響质欲，也就是元素不會因為上方出現(xiàn)了浮動元素而改變位置，當開啟元素的BFC以后糠馆，元素將會具有如下的特性：
可選值：
left：忽略左側(cè)浮動
right：忽略右側(cè)浮動
both：忽略全部浮動 none：不忽略浮動嘶伟，默認值
二、定位
position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素榨惠，可以使用position屬性把一個元素放置到網(wǎng)頁中的任何位置奋早，使用定位會使元素的優(yōu)先級高于文檔流
可選值：
static：默認值，不開啟定位
relative： 相對定位赠橙，元素框偏移某個距離耽装。元素仍保持其未定位前的形狀，它原本所占的空間仍保留（left:200px 相對于原來的位置期揪，偏離原來位置左邊200像素）
absolute： **絕對定位 **元素框從文檔流完全刪除掉奄，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊凤薛。元素原先在正常文檔流中所占的空間會關(guān)閉姓建，就好像元素原來不存在一樣。元素定位后生成一個塊級框缤苫，而不論原來它在正常流中生成何種類型的框
fixed：元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute速兔，不過其包含塊是視窗本身
1、相對定位
每個元素在頁面的文檔流中都有一個自然位置活玲。相對于這個位置對元素進行移動就稱為相對定位涣狗；
當將position屬性設(shè)置為relative時谍婉，則開啟了元素的相對定位；
當開啟了相對定位以后镀钓，可以使用top穗熬、right、 bottom丁溅、left四個屬性對元素進行定位
-
特點：
1唤蔗、如果不設(shè)置元素的偏移量，元素位置不會發(fā)生改變窟赏；
2妓柜、相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變饰序；
3领虹、相對定位不會改變元素原來的特性；
4求豫、相對定位會使元素的層級提升塌衰，使元素可以覆蓋文本流中的元素
2、絕對定位
絕對定位是相對于離他最近的蝠嘉、開啟了定位的祖先元素進行定位的（一般情況最疆，開啟了子元素的絕對定位，都會同時開啟父元素的相對定位）蚤告，如果所有的祖先元素都沒有開啟定位努酸，則會相對于瀏覽器窗口進行定位
當將position屬性設(shè)置為absolute時，則開啟了元素的絕對定位杜恰；
當開啟了絕對定位以后获诈，可以使用top、right心褐、 bottom舔涎、left四個屬性對元素進行定位
-
特點：
1、絕對定位會使元素完全脫離文本流
2逗爹、絕對定位的塊元素的寬度和高度默認會被其內(nèi)容撐開
3亡嫌、絕對定位會使行內(nèi)元素變成塊元素
4、一般使用絕對定位時會同時為其父元素指定一個相對定位掘而，以確保元素可以相對于父元素進行定位
3挟冠、固定定位
固定定位的元素會被鎖定在屏幕的某個位置上，當訪問者滾動網(wǎng)頁時袍睡，固定元素會在屏幕上保持不動知染；
當將position屬性設(shè)置為fixed時，則開啟了元素的固定定位斑胜；
當開啟了固定定位以后持舆，可以使用top色瘩、right、bottom逸寓、left四個屬性對元素進行定位；
固定定位的其他特性和絕對定位類似覆山，不同的是竹伸，固定定位永遠都會相對于瀏覽器窗口進行定位，固定定位會固定在瀏覽器窗口某個位置簇宽，不會隨滾動條滾動
4勋篓、z-index
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的魏割；
當元素開啟定位以后就可以設(shè)置z-index這個屬性譬嚣；
這個屬性可以提升定位元素所在的層級；
z-index可以指定一個整數(shù)作為參數(shù)钞它，值越大元素顯示的優(yōu)先級越高拜银，也就是z-index 值較大的元素會顯示在網(wǎng)頁的最上層；
父元素的優(yōu)先級再高也不會蓋住子元素
