前端（六）

一css定位

css定位有三種：絕對定位、相對定位、固定定位。

position: absolute;  <!-- 絕對定位 -->

position: relative;  <!-- 相對定位 -->

position: fixed;     <!-- 固定定位 -->複製代碼

相對定位

讓元素相對於本身原來的位置，進行位置調整（可用於盒子的位置微調）。

相對定位：不脫標，老家留坑，別人不會把它的位置擠走。也就是說，相對定位的真實位置還在老家，只不過影子出去了，能夠處處飄。

相對定位的定位值

• left：盒子右移

• right：盒子左移

• top：盒子下移

• bottom：盒子上移

PS：負數表示相反的方向。

絕對定位

定義橫縱座標。父容器有定位樣式原點在父容器左上角或左下角；父容器沒有定位樣式原點在網頁的左上角或左下角。橫座標用left表示，縱座標用top或者bottom表示。

絕對定位： 脫標，因此，全部的標準文檔流的性質，絕對定位以後都不遵照了。絕對定位以後，標籤就不區分所謂的行內元素、塊級元素了，不須要display:block就能夠設置寬、高了。

若是用top描述，那麼參考點就是頁面或父控件左上角，原點是會動的。

若是用bottom描述，那麼參考點就是頁面或者父親就控件左下角，原點也是會動的。這樣定位的div都會跟隨網頁移動。

tips：絕對定位，無視參考的那個盒子的padding。

固定定位

就是相對瀏覽器窗口進行定位。不管頁面如何滾動，這個盒子顯示的位置不變。他也是脫標了。

z-index屬性

z-index屬性：表示誰壓着誰。數值大的壓蓋住數值小的。

有以下特性：

• 屬性值大的位於上層，屬性值小的位於下層。
• z-index值沒有單位，就是一個正整數。默認的z-index值是0。
• 若是你們都沒有z-index值，或者z-index值同樣，那麼在HTML代碼裏誰寫在後面，誰就在上面能壓住別人。定位了的元素，永遠可以壓住沒有定位的元素。
• 只有定位了的元素，纔能有z-index值。也就是說，無論相對定位、絕對定位、固定定位，均可以使用z-index值。而浮動的元素不能用。
• 從父現象：父親慫了，兒子再牛逼也沒用。意思是，若是父親1比父親2大，那麼，即便兒子1比兒子2小，兒子1也能在最上層。

二css中經常使用的小知識

2.1隱藏盒子

（1）方式一：

overflow：hidden;   //隱藏盒子超出的部分
複製代碼

（2）方式二：

display: none;	  隱藏盒子，並且不佔位置(用的最多)複製代碼

（3）方式三：

visibility: hidden;   //隱藏盒子，佔位置。
visibility: visible;   //讓盒子從新顯示

複製代碼

2.2超連接

href=""                    //刷新頁面

href="#"                   //跳轉到當前頁面的頂部（不會刷新）
複製代碼

2.3設置盒子的半透明

• background: rgba(0,0,0,0.3);

• background: rgba(0,0,0,.3);

2.4網頁地址和映射地址區別

站點的訪問都是經過後臺的Controller層去訪問，好比訪問地址爲：

http://192.168.1.166:8080/project/web/a.html

對應的後臺應爲

//對外暴漏的地址，
@RequestMapping("/a.html")
 public String e(){
     //html映射地址，和訪問地址無關。
     return "index";
 } 複製代碼

如index頁面有一個超連接代碼以下:

<a href="/project/web/b.html?name=zhangsan" target="_blank">跳轉頁面二</a>複製代碼

那麼對應的Controller層應該還有一個處理方法：

//對外暴漏的地址，
@RequestMapping("/b.html")
public String f(Model model, String name){
    //獲取傳遞過來的參數，而後放入網頁，固然還能夠查詢數據庫獲得更多的數據，再放入網頁
    model.addAttribute("name",name);
     //html映射地址，和訪問地址無關。
     return "test";
}複製代碼

這個時候在test頁面獲取數據，寫法爲：${name}

實際項目開發的過程當中，要限制部分網頁不能經過瀏覽器直接訪問，要經過內部頁面跳轉，才能訪問。

三練習

跟着慕課網視頻去練習css佈局用法：www.imooc.com/video/1489