seo黑帽技術(shù)工具陜西seo顧問服務(wù)
目錄
目標(biāo)
1. 定位
1.1 為什么需要定位
1.2 定位組成
1. 定位模式
2. 邊偏移
1.3 靜態(tài)定位 static（了解）
1.4 相對(duì)定位 relative（重要）
1.5 絕對(duì)定位 absolute（重要）
1.6 子絕父相的由來（重要）
1.7 固定定位 fixed （重要）
1.8 粘性定位 sticky（了解）
1.9 定位的總結(jié)
1.10 定位疊放次序 z-index
1.11 定位的拓展
1. 絕對(duì)定位的盒子居中
2. 定位特殊特性
3. 脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷
4. 絕對(duì)定位（固定定位）會(huì)完全壓住盒子
2. 綜合案例
3. 網(wǎng)頁布局總結(jié)
4. 元素的顯示與隱藏
4.1 display 屬性
4.2 visibility 可見性
4.3 overflow 溢出
5. 綜合案例
總結(jié)一下吧~本章對(duì)我的收獲巨大，希望對(duì)你也是！！！到此，CSS基礎(chǔ)部分也算是全部更新完成了，后門進(jìn)入進(jìn)階部分~
目標(biāo)
1.能夠說出為什么要用定位
2.能夠說出定位的4種分類
3.能夠說出4種定位各自的特點(diǎn)
4.能夠說出為什么常用子絕父相布局
5.能夠?qū)懗鎏詫気啿D布局
6.能夠說出顯示隱藏的2種方式以及區(qū)別
1. 定位
1.1 為什么需要定位
提問： 以下情況使用標(biāo)準(zhǔn)流或者浮動(dòng)能實(shí)現(xiàn)嗎？
1. 某個(gè)元素可以自由的在一個(gè)盒子內(nèi)移動(dòng)位置，并且壓住其他盒子
2. 當(dāng)我們滾動(dòng)窗口的時(shí)候，盒子是固定屏幕某個(gè)位置的。
以上效果，標(biāo)準(zhǔn)流或浮動(dòng)都無法快速實(shí)現(xiàn)，此時(shí) 需要定位來實(shí)現(xiàn) 。
所以：
1. 浮動(dòng)可以讓多個(gè)塊級(jí)盒子一行沒有縫隙排列顯示， 經(jīng)常用于橫向排列盒子。
2. 定位則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置，并且可以壓住其他盒子。
1.2 定位組成
定位 ：將盒子 定 在某一個(gè) 位 置，所以 定位也是在擺放盒子， 按照定位的方式移動(dòng)盒子。
定位 = 定位模式 + 邊偏移 。
定位模式 用于指定一個(gè)元素在文檔中的定位方式。 邊偏移 則決定了該元素的最終位置。
1. 定位模式
定位模式?jīng)Q定元素的定位方式 ，它通過 CSS 的 position 屬性來設(shè)置，其值可以分為四個(gè)：
| 值 | 語義 |
| static | 靜態(tài)定位 |
| relative | 相對(duì)定位 |
| absolute | 絕對(duì)定位 |
| fixed | 固定定位 |
2. 邊偏移
邊偏移就是定位的盒子移動(dòng)到最終位置。有 top、bottom、left 和 right 4 個(gè)屬性。
| 邊偏移屬性 | 示例 | 描述 |
| top | top:80px | 頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離 |
| bottom | bottom:80px | 底部偏移量，定義元素相對(duì)于其父元素下邊線的距離 |
| left | left:80px | 左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離 |
| right | right:80px | 右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離 |
1.3 靜態(tài)定位 static（了解）
靜態(tài)定位是元素的 默認(rèn)定位方式 ， 無定位的意思 。
語法：
選擇器 { position: static; }
1.? 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移
2.? 靜態(tài)定位在布局時(shí)很少用到
1.4 相對(duì)定位 relative（重要）
相對(duì)定位 是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它 原來的位置 來說的（自戀型）
語法：
選擇器 { position: relative; }
相對(duì)定位的特點(diǎn)：（務(wù)必記住）
1. 它是相對(duì)于自己原來的位置來移動(dòng)的（移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來的位置）。2. 原來 在標(biāo)準(zhǔn)流的 位置 繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。因此，相對(duì)定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)摹??！?/span>
1.5 絕對(duì)定位 absolute（重要）
絕對(duì)定位 是元素在移動(dòng)位置的時(shí)候，是相對(duì)于它 祖先元素 來說的（拼爹型）。
語法：
選擇器 { position: absolute; }
絕對(duì)定位的特點(diǎn)：（務(wù)必記住）
1. 如果 沒有祖先元素 或者 祖先元素沒有定位 ，則以瀏覽器為準(zhǔn)定位（Document 文檔）。
2. 如果祖先元素有定位（相對(duì)、絕對(duì)、固定定位），則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。
3. 絕對(duì)定位 不再占有原先的位置 。（脫標(biāo)）
所以絕對(duì)定位是脫離標(biāo)準(zhǔn)流的.
問題
1. 絕對(duì)定位和相對(duì)定位到底有什么使用場景呢？
2. 為什么說相對(duì)定位給絕對(duì)定位當(dāng)?shù)哪?#xff1f;
1.6 子絕父相的由來（重要）
弄清楚這個(gè)口訣，就明白了絕對(duì)定位和相對(duì)定位的使用場景。
這個(gè)“子絕父相”太重要了，是我們學(xué)習(xí)定位的口訣，是定位中最常用的一種方式這句話的意思是： 子級(jí)是絕對(duì)定位的話，父級(jí)要用相對(duì)定位 。
為了讓藍(lán)盒子飄起來，而且只能再粉色盒子內(nèi)移動(dòng)，那么藍(lán)色盒子就只能以粉色盒子為定位進(jìn)行移動(dòng)，那么藍(lán)色盒子就是一個(gè)絕對(duì)定位(absolution) ，那么粉色盒子就必須也要擁有定位，因?yàn)樗{(lán)色盒子以粉色盒子為標(biāo)準(zhǔn)。又為了不讓綠色盒子會(huì)占用粉色盒子的位置，那么粉色盒子就只能是相對(duì)定位(relative)，因?yàn)橹挥羞@樣，粉色盒子原來的位置才不會(huì)被占用，還是屬于粉色盒子自己的位置。
① 子級(jí)絕對(duì)定位，不會(huì)占有位置，可以放到父盒子里面的任何一個(gè)地方，不會(huì)影響其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。
③ 父盒子布局時(shí)，需要占有位置，因此父親只能是相對(duì)定位。
這就是子絕父相的由來，所以 相對(duì)定位經(jīng)常用來作為絕對(duì)定位的父級(jí) 。
總結(jié)： 因?yàn)楦讣?jí)需要占有位置，因此是相對(duì)定位， 子盒子不需要占有位置，則是絕對(duì)定位
當(dāng)然，子絕父相不是永遠(yuǎn)不變的，如果父元素不需要占有位置， 子絕父絕 也會(huì)遇到。
1.7 固定定位 fixed （重要）
固定定位 是元素 固定于瀏覽器可視區(qū)的位置 。主要使用場景： 可以在瀏覽器頁面滾動(dòng)時(shí)元素的位置不會(huì)改變
語法：
選擇器 { position: fixed; }
固定定位的特點(diǎn)：（務(wù)必記住）
1. 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素。
? ?? 跟父元素沒有任何關(guān)系
? ?? 不隨滾動(dòng)條滾動(dòng)。
2. 固定定位 不在占有原先的位置 。
固定定位也是脫標(biāo)的，其實(shí)固定定位也可以看做是一種特殊的絕對(duì)定位。
固定定位小技巧： 固定在版心右側(cè)位置。
小算法：
1. 讓固定定位的盒子 left: 50%. 走到瀏覽器可視區(qū)（也可以看做版心） 的一半位置。
2. 讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置
就可以讓固定定位的盒子貼著版心右側(cè)對(duì)齊了。
1.8 粘性定位 sticky（了解）
粘性定位 可以被認(rèn)為是相對(duì)定位和固定定位的混合。 Sticky 粘性的
語法：
選擇器 { position: sticky; top: 10px; }
粘性定位的特點(diǎn)：
1. 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）
2. 粘性定位 占有原先的位置 （相對(duì)定位特點(diǎn)）
3. 必須添加 top 、left、right、bottom 其中一個(gè)才有效
跟頁面滾動(dòng)搭配使用。 兼容性較差，IE 不支持。
1.9 定位的總結(jié)
| 定位模式 | 是否脫標(biāo) | 移動(dòng)位置 | 是否常用 |
| static靜態(tài)定位 | 否 | 不能使用邊偏移 | 很少 |
| relative相對(duì)定位 | 否(占有位置) | 相對(duì)自身位置移動(dòng) | 常用 |
| absolute絕對(duì)定位 | 是(不占有位置) | 帶有定位的父級(jí) | 常用 |
| fixed固定定位 | 是(不占有位置) | 瀏覽器可視區(qū) | 常用 |
| sticky粘性定位 | 否(占有位置) | 瀏覽器可視區(qū) | 很少用 |
1. 一定記住 相對(duì)定位、固定定位、絕對(duì)定位 兩個(gè)大的特點(diǎn)： 1. 是否占有位置（脫標(biāo)否） 2. 以誰為基準(zhǔn)點(diǎn)移動(dòng)位置
2. 學(xué)習(xí)定位重點(diǎn)學(xué)會(huì)子絕父相。
1.10 定位疊放次序 z-index
在使用定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況。此時(shí)，可以使用 z-index 來控制盒子的前后次序 (z軸)
語法：
選擇器 { z-index: 1; }
?1.數(shù)值可以是正整數(shù)、負(fù)整數(shù)或 0, 默認(rèn)是 auto，數(shù)值越大，盒子越靠上?2. 如果屬性值相同，則按照書寫順序，后來居上?3. 數(shù)字后面不能加單位?4. 只有定位的盒子才有 z-index 屬性
1.11 定位的拓展
1. 絕對(duì)定位的盒子居中
加了絕對(duì)定位的盒子不能通過 margin:0 auto 水平居中，但是可以通過以下計(jì)算方法實(shí)現(xiàn)水平和垂直居中。
① left: 50%;：讓盒子的左側(cè)移動(dòng)到父級(jí)元素的水平中心位置。
② margin-left: -100px;：讓盒子向左移動(dòng)自身寬度的一半。
2. 定位特殊特性
絕對(duì)定位和固定定位也和浮動(dòng)類似。
1. 行內(nèi)元素添加絕對(duì)或者固定定位，可以直接設(shè)置高度和寬度。2. 塊級(jí)元素添加絕對(duì)或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小。
3. 脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷
浮動(dòng)元素、絕對(duì)定位(固定定位）元素的都不會(huì)觸發(fā)外邊距合并的問題
?
4. 絕對(duì)定位（固定定位）會(huì)完全壓住盒子
浮動(dòng)元素不同，只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）
但是絕對(duì)定位（固定定位） 會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。
浮動(dòng)之所以不會(huì)壓住文字，因?yàn)楦?dòng)產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會(huì)圍繞浮動(dòng)元素
2. 綜合案例
案例：淘寶焦點(diǎn)圖布局
1. 大盒子我們類名為： tb-promo 淘寶廣告2. 里面先放一張圖片。3. 左右兩個(gè)按鈕 用鏈接就好了。 左箭頭 prev 右箭頭 next4. 底側(cè)小圓點(diǎn)ul 繼續(xù)做。 類名為 promo-nav
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}.prev {position: absolute;top: 50%;left: 0;margin-top: -15px;/* 加了絕對(duì)定位的盒子可以直接設(shè)置高度和寬度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-decoration: none;text-align: center;line-height: 30px;color: #fff;/* 將矩形的右上角和右下角改為圓角 */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {position: absolute;top: 50%;right: 0;margin-top: -15px;/* 加了絕對(duì)定位的盒子可以直接設(shè)置高度和寬度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-decoration: none;text-align: center;line-height: 30px;color: #fff;/* 將矩形的右上角和右下角改為圓角 */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(225, 225, 225, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}.promo-nav .selected {background-color: #ff5000;}</style>
</head><body><div class="tb-promo"><img src="images/tb.jpg" alt=""><!-- 左側(cè)按鈕箭頭 --><a href="#" class="prev"><</a><a href="#" class="next">></a><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>3. 網(wǎng)頁布局總結(jié)
通過盒子模型，清楚知道大部分html標(biāo)簽是一個(gè)盒子。
通過CSS浮動(dòng)、定位 可以讓每個(gè)盒子排列成為網(wǎng)頁。
一個(gè)完整的網(wǎng)頁，是標(biāo)準(zhǔn)流、浮動(dòng)、定位一起完成布局的，每個(gè)都有自己的專門用法。
1. 標(biāo)準(zhǔn)流
可以讓盒子上下排列或者左右排列， 垂直的塊級(jí)盒子顯示就用標(biāo)準(zhǔn)流布局。
2. 浮動(dòng)
可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子， 多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局。
3. 定位
定位最大的特點(diǎn)是有層疊的概念，就是可以讓多個(gè)盒子前后疊壓來顯示。 如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局。
4. 元素的顯示與隱藏
類似網(wǎng)站廣告，當(dāng)我們點(diǎn)擊關(guān)閉就不見了，但是我們重新刷新頁面，會(huì)重新出現(xiàn)！
本質(zhì)： 讓一個(gè)元素在頁面中隱藏或者顯示出來 。
1. display 顯示隱藏
2. visibility 顯示隱藏
3. overflow 溢出顯示隱藏
4.1 display 屬性
display 屬性用于設(shè)置一個(gè)元素應(yīng)如何顯示。
? ?? display: none ；隱藏對(duì)象
? ?? display：block ； 除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思
display 隱藏元素后，不再占有原來的位置。
后面應(yīng)用及其廣泛，搭配 JS 可以做很多的網(wǎng)頁特效
4.2 visibility 可見性
visibility 屬性用于指定一個(gè)元素應(yīng)可見還是隱藏。
? ? visibility：visible ; 元素可視
? ? visibility：hidden; 元素隱藏
visibility 隱藏元素后，繼續(xù)占有原來的位置。
如果隱藏元素想要原來位置， 就用 visibility：hidden
如果隱藏元素不想要原來位置， 就用 display：none (用處更多 重點(diǎn)）
4.3 overflow 溢出
overflow 屬性指定了如果內(nèi)容溢出一個(gè)元素的框（超過其指定高度及寬度） 時(shí)，會(huì)發(fā)生什么。
| 屬性值 | 描述 |
| visible | 不剪切內(nèi)容，也不添加滾動(dòng)條 |
| hidden | 不顯示超過對(duì)象尺寸的內(nèi)容，超出的部分隱藏掉 |
| scroll | 不管超出的內(nèi)容，總是顯示滾動(dòng)條 |
| auto | 超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條 |
一般情況下，我們都不想讓溢出的內(nèi)容顯示出來，因?yàn)橐绯龅牟糠謺?huì)影響布局。
但是如果有定位的盒子， 請(qǐng)慎用overflow:hidden 因?yàn)樗鼤?huì)隱藏多余的部分
5. 綜合案例
案例：土豆網(wǎng)鼠標(biāo)經(jīng)過顯示遮罩
1. 練習(xí)元素的顯示與隱藏
2. 練習(xí)元素的定位
核心原理： 原先半透明的黑色遮罩看不見， 鼠標(biāo)經(jīng)過 大盒子，就顯示出來。
遮罩的盒子不占有位置， 就需要用絕對(duì)定位 和 display 配合使用。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;}/* 當(dāng)我們鼠標(biāo)經(jīng)過tudou的盒子就顯示出 里面 的遮罩層 */.tudou:hover .mask {display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>