CSS基礎之浮動定位、顯示、游標、定位

1、浮動定位
  1、定位
    簡單點說，定位就是改變元素在頁面上的預設位置
  2、定位的分類
    按照定位的效果，可以分成以下幾類：
    1、普通流定位（預設）
    2、浮動定位
    3、相對定位
    4、絕對位置
    5、固定定位
  3、定位方式-普通流定位
    普通流定位，又稱為“文檔流定位”，頁面中所有元素預設定位方式
    所有元素預設都是在其父元素的左上方開始出現，


    頁面中所有的區塊層級元素，按照從上到下的方式排列，每個元素獨佔一行


    頁面中所有的行內元素，按照從左至右的方式排列，
    多個元素在一行內顯示，顯示不下自動換行


    問題：多個區塊層級元素想在一行內顯示。。。<核心>-浮動定位
  4、定位方式-浮動定位
    1、浮動定位的概述 & 特點
      如果將元素的定位方式設定為浮動定位的話，那麼元素將具備以下特徵
      1、元素會排除在文檔流之外即脫離文檔流，所有脫離文檔流即不佔據頁面空間（但是可以顯示在頁面中）。
      其他剩餘元素要上前補位。
      2、浮動元素會停靠在父元素的左邊或者右邊，或者其他已浮動元素的邊緣上
      3、浮動只在當前行浮動
      4、浮動元素依然位於父元素包含框之內
      5、浮動元素處理的問題-能夠讓多個區塊層級元素在一行顯示
    2、文法
      屬性：float
      取值：
        1、none
          預設值，即無浮動效果
        2、left
          左浮動，停靠在父元素的左邊，或挨著左側已有的浮動元素
        3、right
          右浮動，停靠在父元素的右邊，或挨著右側易用的浮動元素
    3、浮動引發的特殊效果
      1、當父元素的寬度顯示不下所有的已浮動子項目，
      那麼最後一個將換行，但，有可能被卡
      2、元素一旦浮動起來之後，寬度將變成自適應（由內容來決定寬度）
      3、元素一旦浮動起來之後，那麼將變成區塊層級元素，尤其對行內元素影響最大
        區塊層級元素：能修改尺寸
        行內元素：不能修改尺寸
      4、文本，行內元素，行內塊元素是採用環繞的方式排列的，是不會被浮動元素壓在底下的，

      而會巧妙的避開浮動元素

向右浮動效果：

向左浮動效果：

    4、清除浮動
      元素浮動起來之後，會對後續的元素帶來位置的影響。如果後續元素不想受到任何影響的話，
      可以通過清除浮動的方式來解決。清除浮動後，元素不會上前佔位。
      屬性：clear
      取值：
        1、none
          預設值，不做任何清除操作
        2、left
          清除當前元素前一個元素左浮動帶來的影響
        3、right
          清除當前元素前一個元素右浮動帶來的影響
        4、both

          清除當前元素前一個元素左或右浮動帶來的影響     5、浮動元素對父元素高度的影響
      由於浮動元素會脫離文檔流，所以會導致元素不會佔據父元素的控制項，
      會對父元素的高度帶來一定的影響。父元素高度是以沒有浮動子項目的高度
      為準。（如果全是浮動子項目，那麼父元素的高度為0）
      解決方案：
      1、直接設定父元素高度
        弊端：必須知道父元素的高度是多少
      2、設定父元素也浮動
        弊端：不是任何時候父元素都需要浮動，元素浮動後會影響後續元素的位置
      3、為父元素設定overflow屬性
        取值為：hidden 或者 auto
        弊端：如果內容中有東西要溢出顯示（如彈出框）
        那麼也會一同被隱藏
      4、父元素中，追加塊級空子項目（必須是塊級），並設定其clear屬性為both
      5、... ...
2、顯示
  1、顯示方式
    顯示方式決定了元素在頁面中預設的定位方式
    屬性：display
    取值：
      1、none
        讓產生的元素不顯示，並且脫離文檔流
      2、block
        讓元素表現的和區塊層級元素一樣
      3、inline
        讓元素表現的和行內元素一樣
      4、inline-block
        讓元素表現的和行內塊一樣
        多個行內塊在一行內顯示，並且允許修改尺寸
        （radio,checkbox除外）
  2、顯示效果
      1、visibility
      作用：可見度
      屬性：visibility
      取值：
        1、visible
          預設值，可見的
        2、hidden
          隱藏的，依然佔據頁面空間
        3、collapse
          用在表格中，刪除一行或一列時，不影響表格整體布局


      visibility:hidden 與 display:none的區別
      display:none;脫離文檔流，所以不佔頁面空間
      visibility:hidden；沒有脫離文檔流，所以占頁面空間，不顯示內容而已
      2、opacity
        作用：指定元素的透明度
        屬性：opacity
        取值：0（完全透明）-1（完全不透明）之間的數字
      3、vertical-align
        作用：垂直置中對齊，不是所有的元素能使用，控制的是當前元素兩邊的文本或行內元素
        相對於當前元素的垂直對齊
        注意：用在 td 或 行內塊元素 或 img中
        取值：
          1、top:頂部對齊
          2、middle:中間對齊
          3、bottom:底部對齊
          4、baseline:基準對齊
        基準對齊：
          1、行內塊元素的基準
            基準是在最後一行文本的底端
          2、映像

            基準是在映像底部再向下3px處

頂部對齊、中間對齊、底部對齊、基準對齊示意圖：   3、游標
        作用：改變滑鼠的顯示狀態
        屬性：cursor
        取值：
          1、default
            預設
          2、pointer
            小手狀態，與a標記移入時一樣
          3、crosshair
            +
          4、text
            I
          5、wait
            等待
          6、help
            協助
3、列表
  1、清單項目標識
    屬性：list-style-type
    取值：
      1、none
        無標記
      2、disc
      3、square
      4、circle
      ... ...
  2、清單項目映像
    屬性：list-style-image
    取值：url();
  3、清單項目位置
    預設位置：標識預設清單項目內容地區之外
    屬性：list-style-position
    取值：
      1、outside
        預設值
      2、inside
        將標識放置於清單項目地區之內
  4、列表屬性
    屬性：list-style
    取值：type url() position;


    常用方式：list-style:none;
4、定位
  1、定位屬性
    1、定位方式
      屬性：position
      取值：
        1、static：靜態定位，預設定位
        2、relative：相對定位
        3、absolute：絕對位置
        4、fixed：固定定位
      注意：將position設定為
      relative/absolute/fixed 任意一種定位方式的話，那麼該元素就被稱為“已定位元素”
    2、位移屬性
      屬性：
        1、top：以元素頂端作為基準點，上下移動元素
        2、bottom：以元素底端作為基準點，上下移動元素
        3、left：以元素左邊作為基準點，左右移動元素
        4、right：以元素右邊作為基準點，左右移動元素
    3、堆疊順序
      作用：堆疊效果中，顯示調整堆疊順序
      屬性：z-index
      取值：沒有單位的數字
  2、相對定位
    1、什麼是相對定位
      元素會相對於它原來的位置位移某個距離
      實現元素位置的微調
    2、文法
      屬性&值：
        position:relative
      配合位移屬性實現位置的微調

        top/bottom/left/right

位移屬性示意圖：

  3、絕對位置
    1、什麼是絕對位置
      1、絕對位置的元素會脫離文檔流，不佔據頁面空間
      2、會相對於它 最近的 已定位的 祖先元素去實現位置的初始化
      3、如果當前元素沒有 已定位的祖先元素，
      那麼就會相對於最初的包含框實現位置初始化，比如body或html
      4、絕對位置的元素會變成區塊層級元素
    2、文法
      屬性 & 值：
        position：absolute；
      配合著 位移屬性 實現元素的定位（位置移動）
    3、使用場合
      1、快顯功能表一律採用絕對位置的方式
  4、堆疊順序
    1、什麼是堆疊順序
      產生堆疊效果之間的元素的排列順序
    2、文法
      屬性：z-index
      取值：沒有單位的數值
    3、注意問題
      1、必須是已定位元素才能使用z-index
      2、預設順序是 後來者居上
      3、父子關係之間無法用z-index調整堆疊順序，永遠都是 子壓在父上