盒子模型
CSS處理網(wǎng)頁時费尽，它認為每個元素都包含在一 個不可見的盒子里帽撑。
為什么要想象成盒子呢褒搔？因為如果把所有的元 素都想象成盒子脸甘，那么我們對網(wǎng)頁的布局就相 當于是擺放盒子恳啥。
我們只需要將相應的盒子擺放到網(wǎng)頁中相應的 位置即可完成網(wǎng)頁的布局。
-
一個盒子我們會分成幾個部分：
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
圖片1.png
內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域丹诀，也就是元素 中的文本內(nèi)容钝的，子元素都是存在于內(nèi)容區(qū)中的翁垂。
如果沒有為元素設置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認和盒子大小是一致的硝桩。
通過width和height兩個屬性可以設置內(nèi)容區(qū)的大 小沮峡。
width和height屬性只適用于塊元素。
內(nèi)邊距
顧名思義亿柑，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。
默認情況下width和height不包含padding的大小棍弄。
使用padding屬性來設置元素的內(nèi)邊距望薄。
例如：
padding:10px 20px 30px 40px
這樣會設置元素的上、右呼畸、下痕支、左四個方向的內(nèi)邊距。
padding:10px 20px 30px;
分別指定上蛮原、左右卧须、下四個方向的內(nèi)邊距
padding:10px 20px;
分別指定上下、左右四個方向的內(nèi)邊距
padding:10px;
同時指定上左右下四個方向的內(nèi)邊距
同時在css中還提供了padding-top儒陨、padding-right花嘶、padding-
left、padding-bottom分別用來指定四個方向的內(nèi)邊距蹦漠。
邊框
- 可以在元素周圍創(chuàng)建邊框椭员，邊框是元素可見框的最外部。
可以使用border屬性來設置盒子的邊框：
border:1px red solid;
上邊的樣式分別指定了邊框的寬度笛园、顏色和樣式隘击。
也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。
和padding一樣研铆，默認width和height并包括邊框的寬度埋同。
如果要指定上下左的邊框，可以這么描述棵红；
border: red solid 10px;
border-right:none
- 邊框的樣式
邊框可以設置多種樣式：
none（沒有邊框）
dotted（點線）
dashed（虛線）
solid（實線）
double（雙線）
groove（槽線）
ridge（脊線）
inset（凹邊）
outset（凸邊）
外邊距
外邊距是元素邊框與周圍元素相距的空間凶赁。
使用margin屬性可以設置外邊距。
用法和padding類似窄赋，同樣也提供了四個方向的 margin-top/right/bottom/left哟冬。
當將左右外邊距設置為auto時，瀏覽器會將左右外 邊距設置為相等忆绰，所以這行代碼margin:0 auto可 以使元素居中浩峡。
display
我們不能為行內(nèi)元素設置width、height错敢、 margin-top和margin-bottom翰灾。
我們可以通過修改display來修改元素的性 質(zhì)缕粹。
可選值：
block：設置元素為塊元素
inline：設置元素為行內(nèi)元素
inline-block：設置元素為行內(nèi)塊元素
none：隱藏元素（元素將在頁面中完全消失）
overflow
當相關(guān)標簽里面的內(nèi)容超出了樣式的寬度 和高度是，就會發(fā)生一些奇怪的事情纸淮，瀏 覽器會讓內(nèi)容溢出盒子平斩。
可以通過overflow來控制內(nèi)容溢出的情況。
可選值：
visible：默認值
scroll：添加滾動條
auto：根據(jù)需要添加滾動條
hidden：隱藏超出盒子的內(nèi)容
文檔流
文檔流指的是文檔中可現(xiàn)實的對象在排列時所占用的位置咽块。
將窗體自上而下分成一行行绘面，并在每行中按從左至右的順序排 放元素，即為文檔流侈沪。
也就是說在文檔流中元素默認會緊貼到上一個元素的右邊揭璃，如 果右邊不足以放下元素，元素則會另起一行亭罪，在新的一行中繼 續(xù)從左至右擺放瘦馍。
這樣一來每一個塊元素都會另起一行，那么我們?nèi)绻朐谖臋n 流中進行布局就會變得比較麻煩应役。
浮動
所謂浮動指的是使元素脫離原來的文本流情组，在父元素中浮動起來。
浮動使用float屬性箩祥。
可選值：
none：不浮動
left：向左浮動
right：向右浮動
塊級元素和行內(nèi)元素都可以浮動院崇，當一個行內(nèi)元素浮動以后將會自動變?yōu)橐?個塊級元素。
當一個塊級元素浮動以后袍祖，寬度會默認被內(nèi)容撐開亚脆，所以當漂浮一個塊級元 素時我們都會為其指定一個寬度。
當一個元素浮動以后盲泛，其下方的元素會上移濒持。元素中的內(nèi)容將會圍繞 在元素的周圍。
浮動會使元素完全脫離文本流寺滚，也就是不再在文檔中在占用位置柑营。
元素設置浮動以后，會一直向上漂浮直到遇到父元素的邊界或者其他 浮動元素村视。
元素浮動以后即完全脫離文檔流官套，這時不會再影響父元素的高度。也 就是浮動元素不會撐開父元素蚁孔。
浮動元素默認會變?yōu)閴K元素奶赔，即使設置display:inline以后其依然是個 塊元素。
清除浮動
clear屬性可以用于清除元素周圍的浮動對元素的影響杠氢。
也就是元素不會因為上方出現(xiàn)了浮動元素而改變位置站刑。
可選值：
left：忽略左側(cè)浮動
right：忽略右側(cè)浮動
both：忽略全部浮動
none：不忽略浮動，默認值
解決高度坍塌的方法
方法一（推薦使用）：
.clearfix:after{
/*添加一個內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個塊元素*/
display: block;
/*清除兩側(cè)的浮動*/
clear: both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*通過after偽類鼻百，選中box1的后邊*/
/*
可以通過after偽類向元素的最后添加一個空白的塊元素绞旅，然后對其清除浮動摆尝，
這樣做和添加一個div的原理一樣，可以達到一個相同的效果因悲，
而且不會在頁面中添加多余的div堕汞，這是我們最推薦使用的方式，幾乎沒有副作用
*/
.clearfix:after{
/*添加一個內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個塊元素*/
display: block;
/*清除兩側(cè)的浮動*/
clear: both;
}
/*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理*/
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
方法二（不推薦）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解決高度塌陷</title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
解決高度塌陷方案二：
可以直接在高度塌陷的父元素的最后晃琳，添加一個空白的div讯检，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的
然后再對其進行清除浮動卫旱，這樣可以通過這個空白的div來撐開父元素的高度视哑，基本沒有副作用
使用這種方式雖然可以解決問題，但是會在頁面中添加多余的結(jié)構(gòu)
*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
根據(jù)W3C的標準誊涯，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊的格式化環(huán)境）簡稱BFC，該屬性可以設置打開或者關(guān)閉蒜撮，默認是關(guān)閉的
當開啟元素的BFC以后暴构，元素將會具有如下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素
如何開啟元素的BFC
1.設置元素浮動
- 使用這種方式開啟，雖然可以撐開父元素段磨，但是會導致父元素的寬度丟失取逾，而且使用這種方式也會導致下邊的元素上移，不能解決問題
2.設置元素絕對定位
3.設置元素為inline-block
- 可以解決問題苹支，但是會導致寬度丟失砾隅，不推薦使用這種方式
4.將元素的overflow設置為一個非visible的值
推薦方式：將overflow設置為hidden是副作用最小的開啟BFC的方式
定位
position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。
可以使用position屬性把一個元素放置到網(wǎng) 頁中的任何位置债蜜。
偏移量一般選擇兩個晴埂，水平方向選一個，垂直方向選一個
可選值：
static：靜態(tài)定位
relative：相對定 位 不會脫離文檔流
absolute：絕對定位 脫離文檔流
fixed：固定定位
- 相對定位
每個元素在頁面的文檔流中都有一個自然位置寻定。相 對于這個位置對元素進行移動就稱為相對定位儒洛。周 圍的元素完全不受此影響。
當將position屬性設置為relative時狼速，則開啟了元素 的相對定位琅锻。
當開啟了相對定位以后，可以使用top向胡、right恼蓬、 bottom、left四個屬性對元素進行定位僵芹。
相對定位的特點
如果不設置元素的偏移量处硬，元素位置不會發(fā)生改變。
相對定位不會使元素脫離文本流拇派。元素在文本流中 的位置不會改變郁油。
相對定位不會改變元素原來的特性本股。
相對定位會使元素的層級提升，使元素可以覆蓋文 本流中的元素桐腌。 - 絕對定位
絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位拄显。
當將position屬性設置為absolute時，則開啟 了元素的絕對定位案站。
當開啟了絕對定位以后躬审，可以使用top、right蟆盐、 bottom承边、left四個屬性對元素進行定位。
絕對定位的特點
絕對定位會使元素完全脫離文本流石挂。
絕對定位的塊元素的寬度會被其內(nèi)容撐開博助。
絕對定位會使行內(nèi)元素變成塊元素。
一般使用絕對定位時會同時為其父元素指定一 個相對定位痹愚，以確保元素可以相對于父元素進 行定位富岳。
固定定位
固定定位的元素會被鎖定在屏幕的某個位置上，當 訪問者滾動網(wǎng)頁時拯腮，固定元素會在屏幕上保持不動窖式。
當將position屬性設置為fixed時，則開啟了元素的 固定定位动壤。
當開啟了固定定位以后萝喘，可以使用top、right琼懊、
bottom阁簸、left四個屬性對元素進行定位。
固定定位的其他特性和絕對定位類似哼丈。
z-index
當元素開啟定位以后就可以設置z-index這 個屬性强窖。沒有開啟定位不可以使用z-index
這個屬性可以提升定位元素所在的層級。
z-index可以指定一個整數(shù)作為參數(shù)削祈，值越 大元素顯示的優(yōu)先級越高翅溺，也就是z-index 值較大的元素會顯示在網(wǎng)頁的最上層。
父元素層級高于子元素髓抑，但不能用z-index蓋住子元素咙崎。
相對定位是相對于自己原來的位置進行定位，絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位吨拍，固定定位是相對于網(wǎng)頁窗口定位褪猛。
opacity: 05.;設置透明0.5
此方法不兼容ie6，所以要用以下方法：
filter: alpha(opacity=50)羹饰；
