? ? ? ? 昨天晚上進(jìn)行了測試，真是一塌糊涂。戒驕戒躁，不懼前行。加油！
? ? ? ? 學(xué)了定位總結(jié)：子絕父相 ，萬事不行，開定位。
? ??????????當(dāng)我們滾動(dòng)窗口的時(shí)候，盒子是固定屏幕某個(gè)位置的。
? ? ? ? ? ? 比如淘寶的側(cè)邊欄，或者說讓一個(gè)盒子固定到某一個(gè)位置，這時(shí)就需要定位了。
? ? ? ? ? ? 定位跟浮動(dòng)的區(qū)別：
? ? ? ? ? ? ? ? 1.浮動(dòng)可以讓多個(gè)塊級盒子一行沒有縫隙排列顯示， 經(jīng)常用于橫向排列盒子。
????????????????2.定位則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置，并且可以壓住其他盒子。
? ? ? ? ? ??定位：將盒子定在某一個(gè)位置，所以定位也是在擺放盒子， 按照定位的方式移動(dòng)盒子
?????????????定位也是用來布局的，它有兩部分組成：
? ??????????定位 = 定位模式 + 邊偏移
? ??????????定位模式 用于指定一個(gè)元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。
? ??????????邊偏移（方位名詞）
? ??? ??邊偏移 就是定位的盒子移動(dòng)到最終位置。有 top、bottom、left 和 right 4 個(gè)屬性。
toptop: 80px頂端偏移量，定義元素相對于其父元素上邊線的距離。
bottombottom: 80px底部偏移量，定義元素相對于其父元素下邊線的距離。
leftleft: 80px左側(cè)偏移量，定義元素相對于其父元素左邊線的距離。
rightright: 80px右側(cè)偏移量，定義元素相對于其父元素右邊線的距離
定位模式 (position)
選擇器 {
? ? position: 屬性值;
} //屬性值有四種
static? ? ? ? ? ? ??靜態(tài)定位
relative? ? ? ? ??相對定位
absolute? ? ? ??絕對定位
fixed? ? ? ? ? ? ??固定定位
靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思。它相當(dāng)于 border 里面的none，靜態(tài)定位static，不要定位的時(shí)候用。
選擇器 { position: static; }
靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移。靜態(tài)定位在布局時(shí)我們幾乎不用的
相對定位(relative) - 重要
選擇器 { position: relative; }
1.它是相對于自己原來的位置來移動(dòng)的（移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來的位置）。
2.原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它。
因此，相對定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對定位當(dāng)?shù)摹?。?/p>
絕對定位(absolute) - 重要
絕對定位是元素在移動(dòng)位置的時(shí)候，是相對于它祖先元素來說的（拼爹型）。
選擇器 { position: absolute; }
1.完全脫標(biāo) —— 完全不占位置；
2.父元素沒有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）
3.元素將依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進(jìn)行定位。
絕對定位的特點(diǎn)總結(jié)：（務(wù)必記?。?/p>
1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為基準(zhǔn)定位（Document 文檔）。
2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點(diǎn)移動(dòng)位置。
3.絕對定位不再占有原先的位置。所以絕對定位是脫離標(biāo)準(zhǔn)流的。（脫標(biāo)）
固定定位(fixed) - 重要
選擇器 { position: fixed; }
以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素。
跟父元素沒有任何關(guān)系
不隨滾動(dòng)條滾動(dòng)。
粘性定位(sticky) - 了解
選擇器 { position: sticky; top: 10px; }
粘性定位的特點(diǎn)：
1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）
2.粘性定位占有原先的位置（相對定位特點(diǎn)）
3.必須添加 top 、left、right、bottom 其中一個(gè)才有效
跟頁面滾動(dòng)搭配使用。 兼容性較差，IE 不支持。
堆疊順序（z-index）????
選擇器 { z-index: 1; }
z-index 只能應(yīng)用于相對定位、絕對定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無效。
定位特殊特性
絕對定位和固定定位也和浮動(dòng)類似。
1.行內(nèi)元素添加絕對或者固定定位，可以直接設(shè)置高度和寬度。
2.塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小。
前面我們講過， display 是 顯示模式， 可以改變顯示模式有以下方式:
可以用inline-block? 轉(zhuǎn)換為行內(nèi)塊
可以用浮動(dòng) float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因?yàn)楦?dòng)是脫標(biāo)的）
絕對定位和固定定位也和浮動(dòng)類似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。
所以說， 一個(gè)行內(nèi)的盒子，如果加了浮動(dòng)、固定定位和絕對定位，不用轉(zhuǎn)換，就可以給這個(gè)盒子直接設(shè)置寬度和高度等。
脫標(biāo)的盒子不會觸發(fā)外邊距塌陷
浮動(dòng)元素、絕對定位(固定定位）元素的都不會觸發(fā)外邊距合并的問題。 （我們以前是用padding border overflow解決的）
也就是說，我們給盒子改為了浮動(dòng)或者定位，就不會有垂直外邊距合并的問題了。
絕對定位（固定定位）會完全壓住盒子
浮動(dòng)元素不同，只會壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）
但是絕對定位（固定定位） 會壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。
浮動(dòng)之所以不會壓住文字，因?yàn)楦?dòng)產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會圍繞浮動(dòng)元素
網(wǎng)頁布局總結(jié)
通過盒子模型，清楚知道大部分html標(biāo)簽是一個(gè)盒子。
通過CSS浮動(dòng)、定位 可以讓每個(gè)盒子排列成為網(wǎng)頁。
一個(gè)完整的網(wǎng)頁，是標(biāo)準(zhǔn)流、浮動(dòng)、定位一起完成布局的，每個(gè)都有自己的專門用法。
?標(biāo)準(zhǔn)流
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標(biāo)準(zhǔn)流布局。
?浮動(dòng)
可以讓多個(gè)塊級元素一行顯示或者左右對齊盒子，多個(gè)塊級盒子水平顯示就用浮動(dòng)布局
?定位
定位最大的特點(diǎn)是有層疊的概念，就是可以讓多個(gè)盒子前后疊壓來顯示。如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局。
元素的顯示與隱藏
display: none 隱藏對象
display：block 除了轉(zhuǎn)換為塊級元素之外，同時(shí)還有顯示元素的意思。
特點(diǎn)： display 隱藏元素后，不再占有原來的位置。
visibility 可見性 （了解）
visibility 屬性用于指定一個(gè)元素應(yīng)可見還是隱藏。
visibility：visible ; 元素可視
visibility：hidden; 元素隱藏
特點(diǎn)：visibility 隱藏元素后，繼續(xù)占有原來的位置。（停職留薪）
如果隱藏元素想要原來位置， 就用 visibility：hidden
如果隱藏元素不想要原來位置， 就用 display：none? (用處更多 重點(diǎn)）
overflow 溢出（重點(diǎn)）
屬性值描述
visible不剪切內(nèi)容也不添加滾動(dòng)條
hidden不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉
scroll不管超出內(nèi)容否，總是顯示滾動(dòng)條
auto超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條
顯示與隱藏總結(jié)
display 顯示 （重點(diǎn)）隱藏對象，不保留位置配合后面js做特效，比如下拉菜單，原先沒有，鼠標(biāo)經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛
visibility 可見性 （了解）隱藏對象，保留位置使用較少
overflow 溢出（重點(diǎn)）只是隱藏超出大小的部分1. 可以清除浮動(dòng)? 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍
