css定位中的固定定位

固定定位是比較重要的一個所以單獨來講。

固定定位（fixed）-重要

固定定位是絕對定位的一種特殊形式：（認死理型）如果說絕對定位是一個矩形那麼
固定定位就類似於正方形。

1. 完全脫標–完全不佔位置；
2. 只認瀏覽器的可是窗口 — 瀏覽器可視窗口 + 邊偏移屬性 來設置位置；
   1. 根腐元素沒有任何關係；
   2. 不隨滾動條滾動

命令顯示圖：

網頁示例圖：

注意：

1. 絕對定位/固定定位的盒子 不能通過設置 margin：auto 設置水平居中。
2. 堆疊順序 (z-index)

    堆疊順序  (z-index)
         在使用定位佈局時，可能會出現盒子重疊的情況。
         加了點位的盒子，默認後來居上，後面的盒子會壓住前面的盒子。
         應用z-index層疊等級屬性可以調整盒子的堆疊順序。
      z-index 的特性如下：
          1. 屬性值：正整數、負整數或0、默認值是0、數值越大，盒子越靠上；
          2. 如果屬性值相同，則按照書寫順序，後來居上；
          3. 數字後面不能加單位
     注意： 只能應用於相對定位、絕對定位和固定定位的元素，其他標準流、
         浮動和靜態定位無效。

命令顯示圖：

網頁示例圖：

3. 定位改變display屬性

display是顯示模式，可以改變顯示模式有以下方式；

1. 可以用inline-block轉換爲行內塊。
2. 可以用浮動float默認轉換爲行內塊（類似，並不完全一樣，因爲浮動是
  脫標的）。
3. 絕對定位和固定定位也和浮動類似，默認轉換的特性轉換爲行內塊。

所以說，一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子
直接設置寬度高度等。

同時注意：

浮動元素、絕對定位元素的都不會觸發外邊距合併的問題。也就是說，
我們給盒子改爲了浮動或者定位，就不會有垂直外邊距合併的問題了。

命令顯示圖：

網頁示例圖：

圓角矩形設置4個角：

圓角矩形可以爲4個角設置圓度，但是是有順序的

 border-top-left-radius:20px;
 border-top-tight-radius:20px;
 border-bottom-right-radius:20px;
 border-bottom-left-radius:20px;

如果4個角，數量相同：

border-redius：15px；

裏面數值不同，我們也可以按照簡寫的形式，具體格式如下：

border-radius: 左上角，右上角，右下角，左下角；
還是遵循的順時針。

注意：

1. 變偏移需要和定位模式聯合使用，單獨使用無效；
2. top和bottom不要同時使用；
3. left和right不要同時使用。

網頁佈局總結

一個完整的網頁，有標準流、浮動、定位一起完成佈局的。每個都有自己的專門用法。
1. 標準流

可以讓合資上下排列或者左右排列的。

2. 浮動

可以讓多個塊級元素一行顯示或者左右對齊盒子浮動的盒子就是按照順序左右排列。

3. 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示，但是每個盒子需要測量數值。

好了今天更新完了。。。