CSS基本語法（三）
CSS基礎語法（三）
十五、CSS定位
1、為什麼要使用定位
浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用於橫向排列盒子
定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，並且可以壓住其他盒子
2、定位組成
定位：將盒子定在某個位置，所以定位也是在擺放盒子，按照定位的方式拖動盒子
定位 = 定位模式 + 邊偏移
- 定位模式用於指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置
定位模式
定位模式決定元素的定位方式，它通過CSS的position屬性來設置，其值可以為
| 值 | 語義 |
|---|---|
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
靜態定位
靜態定位是元素默認定位方式，無定位的方式
選擇器 { position: static; }
靜態定位按照標準流特性擺放位置，它沒有邊偏移
靜態定位在布局時很少用到
相對定位
相對定位是元素在移動位置的時候，是相對原來的位置來說的（自戀型）
選擇器 { position: relative; }
特點
- 它是相對自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）
- 原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它（不脫標，繼續保留原來的位置）
絕對定位**
絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的（拼爹型）
選擇器 { position: absolute; }
絕對定位特點
- 如果沒有父元素或者祖先元素沒有定位，則以瀏覽器為準定位
- 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置
- 絕對定位不再佔用原來的位置（脫標）
固定定位
固定定位是元素固定於瀏覽器可視化的位置，主要使用場景：可以在瀏覽器頁面滾動時，元素位置不會改變
選擇器 { position: fixed; }
特點
- 以瀏覽器的可視窗口為參照點移動元素
- 跟父元素沒有任何關係
- 不隨滾動條滾動
- 固定定位不在佔有原先的位置
- 固定定位也是脫標的，其實，固定定位也可以看做一種特殊的絕對定位
小技巧
- 讓固定定位的盒子
left: 50%走到瀏覽器可視區（也可以看做版心）的一半位置- 讓固定定位的盒子
margin-left: 版心寬度的一半距離，多走版心寬度的一半位置，就可以讓固定定位的盒子貼着版心向右側對齊了
粘性定位
粘性定位可以被認為是相對定位和固定定位的混合
選擇器 {
position: sticky;
top: 80px;
}
粘性定位的特點
- 以瀏覽器的可視窗口為參照點移動元素（固定定位特點）
- 粘性定位佔有原先的位置（相對定位的特點）
- 必須添加
top、left、bottom、right其中一個才可以- 跟網頁滾動搭配使用，兼容性較差，IE不支持
邊偏移
邊偏移就是定位的盒子移動到最終位置。有top、bottom、left和right4個屬性
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量，定義元素相對於去父元素上邊線的距離 |
| bottom | 底端偏移量，定義元素相對於去父元素下邊線的距離 |
| left | 左側偏移量，定義元素相對於去父元素左邊線的距離 |
| right | 右端偏移量，定義元素相對於去父元素右邊線的距離 |
子絕父相
子級是絕對定位，父級是相對定位
- 子級絕對定位，不會佔有位置，可以放到父盒子裏面的任何一個位置，不會影響其他的兄弟盒子
- 父盒子需要加定位限制盒子在父盒子內顯示
- 父盒子布局時，需要佔有位置，因此父親只能是相對定位
因為父級需要佔有位置，因此是相對定位；子盒子不需要佔有位置，則是絕對定位
當然，子絕父相不是永遠不變的，如果父元素不需要佔有位置，子絕父絕也會遇到
3、定位的疊放次序
在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前後次序（z軸）
選擇器 { z-index: 1; }
數值可以是正整數、負整數或0，默認是auto，數值越大。盒子越靠上
如果屬性值相同，則按照書寫順序，後來居上
數字後面不能加單位
只有定位的盒子才有這個屬性
4、拓展
絕對定位的盒子居中
加了絕對定位的盒子不能通過margin: 0 auto;水平居中，但是可以通過以下計算方法實現水平和垂直居中
left: 50%：讓盒子的左側移動到父級元素的水平居中的位置margin-left: 100px：讓盒子向左移動自身寬度的一半
定位特殊特性
絕對定位和固定定位、浮動類似
- 行內元素添加絕對或者固定定位，可以直接設置寬度和高度
- 塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認是內容大小
脫標的盒子不會觸發外邊距塌陷
浮動元素、絕對定位（固定定位）元素的都不會觸發外邊距合併的問題
絕對定位會完全壓住盒子
浮動元素不同，只會壓住它下面標準流的盒子，但是不會壓住下面標準流盒子裏面的文字
但是絕對定位（固定定位）會壓住下面標準流所有內容
浮動之所以不會壓住文字，因為浮動產生的目的最初是為了做文字環繞效果的。文字會圍繞浮動元素
5、網頁布局總結
通過盒子模型，清楚知道大部分HTML標籤是一個盒子
通過CSS浮動、定位可以讓每一個盒子排列成為網頁
一個完整的網頁，是標準流、浮動、定位一起去完成布置的，每個都有自己的專門用法
-
標準流
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局
-
浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局
-
定位
定位的最大特點是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示。如果元素自由在某個盒子內移動就用定位布局
十六、元素的顯示與隱藏
類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現
本質：讓一個元素在頁面中隱藏或者顯示出來
1、 display顯示隱藏**
display用於設置一個元素應如何顯示
display: none; /* 隱藏對象 */
display: block; /* 除轉換為塊級元素之外，同時還有顯示元素的意思 */
display隱藏元素後，不再佔有原來的位置
2、 visibility可見性
visibility屬性用於指定一個元素應可見還是隱藏
visibility: visible; /* 元素可視 */
visibility: hidden; /* 元素隱藏 */
visibility隱藏元素後，繼續佔有原來的位置
- 如果隱藏元素想要原來的位置，就用
visibility: hidden;- 如果隱藏元素不想要原來的位置，就用
display: none
3、 overflow溢出
overflow屬性指定了如果內容溢出一個元素的框（超出其指定高度及寬度）時，會發生什麼
overflow: visible; /* 顯示溢出（默認） */
overflow: hidden; /* 隱藏溢出部分 */
overflow: scroll; /* 溢出部分顯示滾動條，不溢出也顯示滾動條 */
overflow: auto; /* 自動判別，如果需要，就使用滾動條 */
一般情況下我們都不想讓溢出內容顯示出來，因為溢出部分會影響布局
但是如果有定位的盒子，請慎用
overflow: hidden因為它會隱藏多餘部分
