1.CSS盒模型

• 盒子模型有兩種须鼎，分別是標(biāo)準(zhǔn)盒子模型和IE盒子模型凡蜻。
• CSS 把盒模型分為兩種基本形態(tài)：Block（塊級(jí)元素）和 Inline（內(nèi)聯(lián)元素件豌，也有翻譯為“行內(nèi)”）战得。在默認(rèn)狀態(tài)下就斤，塊狀元素的寬度為 100％
• 當(dāng)我們?cè)诰W(wǎng)頁(yè)頂部加上doctype聲明的時(shí)候悍募，瀏覽器會(huì)使用標(biāo)準(zhǔn)盒子模型去解釋網(wǎng)頁(yè)。
  如果網(wǎng)頁(yè)沒(méi)有doctype聲明的時(shí)候洋机，ie瀏覽器會(huì)使用IE盒子模型去解釋網(wǎng)頁(yè)坠宴，而firefox, chrome等瀏覽器則仍然使用標(biāo)準(zhǔn)盒子模型區(qū)解釋網(wǎng)頁(yè)，這就出現(xiàn)了不兼容問(wèn)題绷旗。所以一般我們采用的是標(biāo)準(zhǔn)盒子模型啄踊。
  網(wǎng)頁(yè)穩(wěn)定性：
  Width 和height 最穩(wěn)定
  其次 padding
  最后才考慮margin

• 標(biāo)準(zhǔn)盒子模型(不帶邊）

  
  
  Paste_Image.png
• IE盒子模型（帶邊）

Paste_Image.png

1.1 重要性元素分類(lèi)

在講解CSS布局之前，我們需要提前知道一些知識(shí)刁标，在CSS中颠通，html中的標(biāo)簽元素大體被分為兩種等級(jí)：
1） 塊級(jí)元素
常用的塊級(jí)元素有：

<div>、<p>膀懈、<h1>...<h6>顿锰、<ol>、<ul>启搂、<dl>硼控、<table>、<address>胳赌、<blockquote> 牢撼、<form>

• 霸占一行，不能與其他任何元素并列
• 元素的高度疑苫、寬度熏版、行高以及頂和底邊距都可設(shè)置
• 如果不設(shè)置寬度纷责，那么寬度將默認(rèn)變?yōu)楦赣H的100%。

2） 行內(nèi)元素
常用的行內(nèi)元素有：

<a>撼短、<span>再膳、<br>、<i>曲横、<em>喂柒、<strong>、<label>禾嫉、<q>灾杰、<var>、<cite>熙参、<code>

· + 與其他行內(nèi)元素并排
·+ 元素的高度吭露、寬度、行高及頂部和底部邊距不可設(shè)置尊惰。默認(rèn)的寬度讲竿，就是文字或圖片的寬度。

Paste_Image.png

1.2塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換(display)

display：“顯示模式”;(block,none,inline)
塊級(jí)元素設(shè)置為行內(nèi)元素：display:inline-block;
行內(nèi)元素可以設(shè)置為塊級(jí)元素：display: block;
盒模型的顯示類(lèi)型可以使用 display 屬性來(lái)顯式定義弄屡。任何元素都可以通過(guò) display 屬性改變默
認(rèn)顯示類(lèi)型题禀，因此也會(huì)改變?cè)撛厮鶎?duì)應(yīng)的網(wǎng)頁(yè)布局結(jié)構(gòu)。
display 屬性共有 18 個(gè)選項(xiàng)值膀捷，詳細(xì)說(shuō)明如下：

• block：塊狀顯示迈嘹，在元素后面添加換行符，也就是說(shuō)其他元素不能在其后面并列顯示全庸。
• none：隱藏顯示秀仲，這與 visibility:hidden?聲明不同，display:none?聲明不會(huì)為被隱藏的元素保
  留位置壶笼。
• inline：內(nèi)聯(lián)顯示神僵，在元素后面刪除換行符，多個(gè)元素可以在一行內(nèi)并列顯示覆劈。
• inline-block：內(nèi)聯(lián)顯示保礼，但是元素的內(nèi)容以塊狀顯示，行內(nèi)其他內(nèi)聯(lián)元素還會(huì)顯示在同一
  行內(nèi)责语。
• compact：緊湊的塊狀顯示炮障，或基于內(nèi)容之上的內(nèi)聯(lián)顯示。
• marker：在容器對(duì)象之前或之后顯示坤候，該屬性值必須與:after 和:before 偽元素一起使用胁赢。
• inline-table：具有內(nèi)聯(lián)特征的表格顯示。
• list-item：具有塊狀特征的列表項(xiàng)目顯示白筹，并可以添加可選項(xiàng)目標(biāo)志智末。
• run-in：塊狀顯示或基于內(nèi)容之上的內(nèi)聯(lián)顯示谅摄。
• table：具有塊狀特征的表格顯示。
• table-caption：表格標(biāo)題顯示吹害。
• table-cell：表格單元格顯示
• table-column：表格列顯示。
• table-column-group：表格列組顯示虚青。
• table-header-group：表格標(biāo)題組顯示它呀。
• table-footer-group ：表格頁(yè)腳組顯示。
• table-row：表格行顯示棒厘。
• table-row-group：表格行組顯示纵穿。
• table：具有塊狀特征的表格顯示。
• table-caption：表格標(biāo)題顯示奢人。
• table-cell：表格單元格顯示
• table-column：表格列顯示谓媒。
• table-column-group：表格列組顯示。
• table-header-group：表格標(biāo)題組顯示何乎。
• table-footer-group ：表格頁(yè)腳組顯示句惯。
• table-row：表格行顯示。
• table-row-group：表格行組顯示支救。

注意：其中真正能夠應(yīng)用并獲得所有瀏覽器支持的取值只有 4 個(gè)：block抢野、none、inline各墨、list-item指孤。

1.3盒模型--邊框（一）

盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)贬堵、樣式和顏色(邊框三個(gè)屬性)恃轩。
border是一個(gè)復(fù)合的屬性，它可以同時(shí)定義上右下左四個(gè)邊框黎做，當(dāng)四個(gè)邊都是同個(gè)樣式時(shí)可以使用如下面代碼：

div{
border:2px  solid  red;
}
//為div來(lái)設(shè)置邊框粗細(xì)為2px叉跛、樣式為實(shí)心的、顏色為紅色的邊框

上面是border代碼的縮寫(xiě)形式蒸殿，也可以分開(kāi)寫(xiě)：

div{
border-width:2px;
border-style:solid;
border-color:red;
}

注意：
1昧互、border-style（邊框樣式）常見(jiàn)樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2伟桅、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色（也可以是rgb顏色）敞掘，如:
border-color:#888;//前面的井號(hào)不要忘掉。

1.4盒模型--邊框（二）

現(xiàn)在有一個(gè)問(wèn)題楣铁，如果有想為p標(biāo)簽單獨(dú)設(shè)置下邊框玖雁，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實(shí)現(xiàn)其它三邊上盖腕、右赫冬、左邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
總結(jié)：
如果四個(gè)邊的樣式不是相同一般會(huì)有下面幾種情況

/*邊框樣式浓镜、寬度、顏色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*邊框樣式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}
/*邊框?qū)挾炔煌?/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:solid #FF00FF;
border-width:1px 2px 1px 1px;
}
/*邊框顏色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*還有就是有些邊框是沒(méi)有的劲厌，比如只有底邊*/
.div1{
border:1px #FF00FF;
border-style:none none solid;
}

注意：如果提供全部四個(gè)參數(shù)值膛薛，將按上－右－下－左的順序作用于四邊。

1.5盒模型--邊框（三）

按方向還能再拆一層补鼻，就是把每個(gè)方向的哄啄，每個(gè)要素拆開(kāi)，一共12條語(yǔ)句（顏色可以不寫(xiě)默認(rèn)黑色风范，但是線形跟粗細(xì)不寫(xiě)就出不來(lái)）：

border-top-color:red;
border-top-width:10px;
border-top-stylr:solid;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

1.6 盒模型--外邊距

margin是“外邊距”咨跌，兄弟間的距離（標(biāo)準(zhǔn)流有塌陷現(xiàn)象，距離不疊加硼婿，取最大锌半，但是如果浮動(dòng)脫離標(biāo)準(zhǔn)文檔流，margin的距離就可以疊加）寇漫。margin 屬性接受任何長(zhǎng)度單位刊殉，可以是像素、英寸州胳、毫米或 em冗澈，可以使用負(fù)值。邊界也是可分為上陋葡、右亚亲、下、左腐缤。margin 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有外邊距屬性捌归。該屬性可以有 1 到 4 個(gè)值。如下代碼：

//上外邊距是 10px,右外邊距是 5px,下外邊距是 15px,左外邊距是 20px
margin:10px 5px 15px 20px;

也可以分開(kāi)寫(xiě)：

div{
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20px;
}

//如果上下左右的邊界都為10px;可以這么寫(xiě)：
div{ margin:10px;}

//如果上下邊界一樣為10px岭粤，左右一樣為20px惜索，可以這么寫(xiě)：
div{ margin:10px 20px;}

//上外邊距是 10px,右外邊距和左外邊距都是 5px,下外邊距是 15px:
margin:10px 5px 15px;

//為 margin 設(shè)置一個(gè)百分比數(shù)值,百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的。
//下面這個(gè)例子為 p 元素設(shè)置的外邊距是其父元素的 width 的 10%剃浇。:
p {margin : 10%;}

總結(jié)：
CSS 定義了一些規(guī)則巾兆，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：
如果缺少左外邊距的值虎囚，則使用右外邊距的值角塑。
如果缺少下外邊距的值，則使用上外邊距的值淘讥。
如果缺少右外邊距的值圃伶，則使用上外邊距的值。

注意：標(biāo)準(zhǔn)流有哪些微觀現(xiàn)象？
1） 空白折疊現(xiàn)象：
比如窒朋，如果我們想讓img標(biāo)簽之間沒(méi)有空隙搀罢，必須緊密連接,代碼如下：

![](images/0.jpg)![](images/1.jpg)![](images/2.jpg)

2）頁(yè)面從上到下，文本之間高低不齊侥猩，底邊對(duì)齊榔至。（文本包括：文字，圖片和表單元素）
3） 自動(dòng)換行欺劳，一行寫(xiě)不滿(mǎn)唧取，換行寫(xiě)。

1.7盒模型--內(nèi)邊距

• padding是“內(nèi)邊距”的意思杰标，在盒子原有的height基礎(chǔ)上疊加上去兵怯，也就是說(shuō) 盒模型的padding彩匕，絕對(duì)不是直接作用在文字上的腔剂，而是作用在“行”line-height上的,用于父子間的距離。
• 為了嚴(yán)格保證字在行里面居中驼仪，行高掸犬、字號(hào)，一般都是偶數(shù)绪爸。這樣湾碎，它們的差，就是偶數(shù)奠货，就能夠被2整除介褥。

Paste_Image.png

如下代碼：

div{padding:20px 10px15px 30px;}

也可以分開(kāi)寫(xiě)上面代碼：

div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}

//如果上、右递惋、下柔滔、左的值都為10px,可以這么寫(xiě)
div{padding:10px;}

//如果上下填充一樣為10px，左右一樣為20px萍虽，可以這么寫(xiě)：
div{padding:10px 20px;}

//可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值睛廊。百分?jǐn)?shù)值是相對(duì)于其父元素的 width 計(jì)算的，
//這一點(diǎn)與外邊距一樣杉编。所以超全，如果父元素的 width 改變，它們也會(huì)改變邓馒。
//下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%：
p {padding: 10%;}

注意：

• 內(nèi)邊距 會(huì)影響盒子大小
• 行內(nèi)元素 盡量不用 上下的padding和margin （會(huì)有幾像素默認(rèn)間距）
• 繼承的寬度 padding不會(huì)擠開(kāi)嘶朱，所以繼承的要給寬度才能用

盒模型總結(jié)：

• margin 總是透明的，padding 也是透明的光酣，但 padding 受背景影響见咒，能夠顯示背景色或背景
  圖像，所以部分初學(xué)者會(huì)誤認(rèn)為補(bǔ)白不透明挂疆。
• border 不透明改览，這是因?yàn)閷?shí)線邊框的遮蓋下翎。當(dāng)你定義虛線或點(diǎn)線邊框時(shí)，在部分瀏覽器中可以看到被邊框遮蓋的背景宝当。盒模型背景可以深入到 padding 和 border 區(qū)域视事，但部分瀏覽器不
  支持 border 區(qū)域背景顯示，如 IE 和 Netscape 瀏覽器庆揩。
• margin 可以定義負(fù)值俐东，但 border 和 padding 不支持負(fù)值。
• margin订晌、border 和 padding 都是可選的虏辫，它們默認(rèn)值為 0。我們可以單獨(dú)定義一邊或統(tǒng)一定
  義盒子四邊的屬性值锈拨。
• 如果需要砌庄，每一條可見(jiàn)邊框都可以定義不同的寬度，但前提是要定義 border-style 屬性為可
  見(jiàn)樣式奕枢。
• 每一個(gè)盒子所占頁(yè)面區(qū)域的寬度和高度等于 margin 外沿的寬度和高度娄昆。盒子的大小并不總

2. css布局模型

清楚了CSS 盒模型的基本概念、 盒模型類(lèi)型缝彬， 我們就可以深入探討網(wǎng)頁(yè)布局的基本模型了萌焰。布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念谷浅。 但布局模型是建立在盒模型基礎(chǔ)之上扒俯，又不同于我們常說(shuō)的 CSS 布局樣式或 CSS 布局模板。
在網(wǎng)頁(yè)中一疯，元素有三種布局模型：
1撼玄、流動(dòng)模型（Flow）
2、浮動(dòng)模型 (Float)
3违施、層模型（Layer）

2.1流動(dòng)模型（一）

流動(dòng)（Flow）：自上而下互纯。
先來(lái)說(shuō)一說(shuō)流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式磕蒲。也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的留潦。
流動(dòng)布局模型具有2個(gè)比較典型的特征：

• 第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布辣往，因?yàn)樵谀J(rèn)狀態(tài)下兔院，塊狀元素的寬度都為100%。實(shí)際上站削，塊狀元素都會(huì)以行的形式占據(jù)位置坊萝。
• 第二點(diǎn)，在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示十偶。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
  內(nèi)聯(lián)元素標(biāo)簽a菩鲜、span、em惦积、strong都是內(nèi)聯(lián)元素接校。

2.2浮動(dòng)模型

塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示狮崩，怎么辦呢蛛勉？
標(biāo)準(zhǔn)流做不出網(wǎng)頁(yè)：因?yàn)槟懿⑴诺牟荒芨膶捀摺Ｋ阅啦瘢撾x標(biāo)準(zhǔn)流诽凌。
浮動(dòng)宏觀的看，就是做“并排”的坦敌。有幾個(gè)性質(zhì)：脫標(biāo)侣诵、貼邊、字圍恬试、收縮窝趣。
使脫離文檔流疯暑，塊級(jí)元素可以并排训柴，行內(nèi)元素可以設(shè)寬高
收縮：一個(gè)浮動(dòng)的元素，如果沒(méi)有設(shè)置width妇拯，那么將自動(dòng)收縮為文字的寬度（這點(diǎn)非常像行內(nèi)元素）幻馁。
永遠(yuǎn)不是一個(gè)東西單獨(dú)浮動(dòng)，浮動(dòng)都是一起浮動(dòng)越锈，要浮動(dòng)仗嗦，大家都浮動(dòng)。浮動(dòng)猶如空中漂浮的白云甘凭，而流動(dòng)更像地面上依勢(shì)而下的流水稀拐，不能簡(jiǎn)單地把流動(dòng)與浮動(dòng)混淆起來(lái)，否則布局非出問(wèn)題不可丹弱。
左浮動(dòng)：float:left
如下代碼可以實(shí)現(xiàn)兩個(gè)div元素一行顯示德撬。

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

注意：設(shè)置浮動(dòng)的同時(shí)一定要先設(shè)置塊狀元素的寬度，且需要浮動(dòng)的幾個(gè)元素寬度加起來(lái)一定要小于容器元素的寬度躲胳。

2.3層模型（定位）

什么是層布局模型蜓洪？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作坯苹，但在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域隆檀，由于網(wǎng)頁(yè)大小的活動(dòng)性，層布局沒(méi)能受到熱捧。但是在網(wǎng)頁(yè)上局部使用層布局還是有其方便之處的恐仑。下面我們來(lái)學(xué)習(xí)一下html中的層布局泉坐。
如何讓html元素在網(wǎng)頁(yè)中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作裳仆。CSS定義了一組定位（positioning）屬性來(lái)支持層布局模型坚冀。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2鉴逞、相對(duì)定位(position: relative)
3记某、固定定位(position: fixed)

• 層模型--絕對(duì)定位（相對(duì)于父類(lèi)）
  如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)构捡，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)液南，然后使用left、right勾徽、top滑凉、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊喘帚，則相對(duì)于body元素畅姊，即相對(duì)于瀏覽器窗口。
  如下面代碼可以實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px吹由，向下移動(dòng)50px若未。

div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>

注意：

• 絕對(duì)定位top是距離頁(yè)面左上角0,0的距離（可以伸縮的放大放小的頁(yè)面，隨滾動(dòng)條上滾的頁(yè)面倾鲫，不是瀏覽器）粗合，bottom是距離左下角的距離，以文檔為基準(zhǔn)點(diǎn)乌昔。
  注意：
• 絕對(duì)定位的盒子隙疚，是脫離標(biāo)準(zhǔn)文檔流的。所以磕道，所有的標(biāo)準(zhǔn)文檔流的性質(zhì)供屉，絕對(duì)定位之后都不遵守了。標(biāo)簽不區(qū)分所謂的行內(nèi)元素溺蕉、塊級(jí)元素了伶丐，不需要display:block;就可以設(shè)置寬、高了
• 一個(gè)絕對(duì)定位的元素焙贷，如果父輩元素中出現(xiàn)了也定位了的元素撵割，那么將以父輩這個(gè)元素，為參考點(diǎn)辙芍。（一般是子絕父相（父親的位置占著啡彬，不會(huì)被下面的擠上去）羹与，子絕父絕的話，父也脫標(biāo)庶灿，位置會(huì)讓下一個(gè)盒子占去纵搁。主要看是否能夠占得位置，或者 是有個(gè)爺爺是相往踢，爸爸跟兒子都是絕腾誉，具體看情況而定）
• 要聽(tīng)最近的已經(jīng)定位的祖先元素的，不一定是父親峻呕，可能是爺爺
• 絕對(duì)定位的盒子居中
  絕對(duì)定位之后利职，所有標(biāo)準(zhǔn)流的規(guī)則，都不適用了瘦癌。所以margin:0 auto;失效猪贪。方法如下

Paste_Image.png

然后再用margin-left，使其平分

用途：用于覆蓋且脫標(biāo)

• 層模型--相對(duì)定位（相對(duì)于以前）

如果想為元素設(shè)置層模型中的相對(duì)定位讯私，需要設(shè)置position:relative（表示相對(duì)定位）热押，它通過(guò)left、right斤寇、top桶癣、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))娘锁，然后相對(duì)于以前的位置移動(dòng)牙寞，移動(dòng)的方向和幅度由left、right致盟、top碎税、bottom屬性確定尤慰，偏移前的位置保留不動(dòng)馏锡。
position:relative;（相對(duì)定位）：就是微調(diào)元素位置的。讓元素相對(duì)自己原來(lái)的位置伟端，進(jìn)行位置調(diào)整杯道。
left、right责蝠、bottom党巾、top是指要相對(duì)的位置

- position:relative;   → 必須先聲明，自己要相對(duì)定位了霜医，
- left:100px;       → 然后進(jìn)行調(diào)整齿拂。
- top:150px;       → 然后進(jìn)行調(diào)整。

性質(zhì)：
不脫標(biāo)肴敛，老家留坑署海。形影分離吗购，相當(dāng)于靈魂出竅。
脫離標(biāo)準(zhǔn)流砸狞，位置移到別的地方捻勉，但是他的位置還在，不會(huì)讓別的盒子占領(lǐng)刀森。
用途 ：
相對(duì)定位有坑踱启，所以一般不用于做“壓蓋”效果。頁(yè)面中研底，效果極小埠偿。就兩個(gè)作用：
1） 微調(diào)元素
2）做絕對(duì)定位的參考，子絕父相（父親是絕對(duì)定位榜晦，兒子是相對(duì)定位胚想，這時(shí)候絕對(duì)定位就不是相對(duì)于頁(yè)面（窗口-body）的位置，而是相對(duì)于父親的位置）

• 層模型--固定定位（相對(duì)于網(wǎng)頁(yè)窗口）

固定住某一坐標(biāo)芽隆。
fixed：表示固定定位浊服，與absolute定位類(lèi)型類(lèi)似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身胚吁。由于視圖本身是固定的牙躺，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置腕扶，或改變?yōu)g覽器窗口的顯示大小孽拷，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響半抱，這與background-attachment:fixed?屬性功能相同脓恕。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px窿侈。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變炼幔。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}

position:fixed;（脫離標(biāo)準(zhǔn)流， 參考點(diǎn)為瀏覽器可視區(qū)內(nèi)邊框）
固定定位史简，就是相對(duì)瀏覽器窗口定位乃秀。頁(yè)面如何滾動(dòng)，這個(gè)盒子顯示的位置不變圆兵。相當(dāng)于凍結(jié)窗口
固定定位脫標(biāo)跺讯！要寫(xiě)寬高，脫標(biāo)了就不是 行塊了殉农。并且脫離標(biāo)準(zhǔn)流之后刀脏，他后面的元素會(huì)以為他不存在，占了他的位置超凳。（跟他浮動(dòng)愈污，后面元素沒(méi)浮動(dòng)的效果一樣）
用途：標(biāo)題欄危队、返回頂部

2.4包含塊(子絕父相的用分法）

CSS 包含塊是標(biāo)準(zhǔn)布局中的一個(gè)重要概念， 它是絕對(duì)定位的基礎(chǔ)钙畔。 請(qǐng)讀者注意包含塊與父元素茫陆、包含框或包含元素等概念存在本質(zhì)的區(qū)別。那么什么是包含塊呢擎析？

• 包含塊就是為絕對(duì)定位元素提供坐標(biāo)偏移和顯示范圍的參照物簿盅，即確定絕對(duì)定位的偏移起點(diǎn)和百分比長(zhǎng)度的參考。在默認(rèn)狀態(tài)下揍魂，body 元素就是一個(gè)大的包含塊桨醋，所有絕對(duì)定位的元素都是根據(jù)窗口來(lái)確定自己所處的位置和百分比大小顯示的。但是如果我們定義了包含元素為包含塊以后现斋，對(duì)于被包含的絕對(duì)定位元素來(lái)說(shuō)喜最，就會(huì)根據(jù)最接近的具有定位功能的上級(jí)包含元素來(lái)決定自己的顯示位置。
• 簡(jiǎn)而言之就是設(shè)置成 相對(duì)定位的元素是設(shè)置成絕定定位的元素位置移動(dòng)的參考點(diǎn)庄蹋，而這個(gè)唄設(shè)成相對(duì)定位的元素瞬内，就是我們所說(shuō)的包含塊

2.4.1Relative與Absolute組合使用

必須遵守下面規(guī)范：
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1">
<div id="box2">相對(duì)參照元素進(jìn)行定位</div>
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）限书。
2虫蝶、參照定位的元素必須加入position:relative;

box1{

width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute倦西，便可以使用top能真、bottom、left扰柠、right來(lái)進(jìn)行偏移定位了粉铐。

box2{

position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）卤档。