css（三）---定位與浮動的學習

css的再學習
定位（position）的介紹
今天學習的是關於定位的學習，這也是頁面佈局的一種，那麼說一下定位是用來做什麼的。我的意思是定位我們想讓一個元素去哪，他就能到哪。但是這個定位不能隨便亂用，它會脫離文檔流，有可能會覆蓋下面的元素。用這個定位是一定要注意一下啊，當然這個屬性也可以觸發bfc（上篇文章已經說到bfc）
說到position，它有好多的屬性值，那麼都是什麼呢，就和大家聊一下吧，我知道的一共有七個值，分別爲：static、absolute、relative、fixed、sticky、center、page，接下來分別介紹一下這些屬性名的含義吧。

• static

  static意思是靜止， static是默認的屬性，當我們沒有寫position屬性的時候，元素默認的定位就是static定位。在元素中什麼也不寫，就是這個屬性了，是不是還不知呢。

• absolute
  absolute是絕對定位的意思，它會使元素脫離本來的位置再進行定位，它會使元素像立交橋一樣出現空間上的分層，當元素脫離原來的位置之後（脫離文檔流），其他的元素就會看不到這個元素。同時，absolute也可以觸發bfc。
  同時，當我們改變定位之後，這個元素就有四個屬性可以使用了，分別是left、right、top、bottom。這四個屬性分別可以設置當前元素距離左邊、右邊、上邊和下邊的距離爲多少，但是四個屬性很少一起出現，一般都是兩兩一對出現，其中left和top是一對，right和bottom是一對。
  如果直接進行absolute的話，它會相對於瀏覽器進行定位，一般情況下它會與relative結合使用的。

div{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 50px;
    top: 50px;
   }

上面一段代碼是absolute單獨使用的，這樣它會與瀏覽器有一個相對的位置，因爲它會向父級尋找relative，若沒有設置，它會一直向上到瀏覽器，最終會相對於瀏覽器定位。

• relative
  relative是相對定位的意思，它會讓元素保留原來的位置再進行定位，後面的元素可以看到它本來的位置。
  當position改成relative之後，left、top、right、bottom進行的定位就會變成相對於自身的位置進行移動了。
  relative的參照物是元素自身。
  當我們僅僅給元素設置position:relative;並沒有設置left、right、top、bottom屬性的時候，元素的定位是沒有發生任何改變的，因爲這個特性，一般在開發中，rrelative都是用作設置參照物的，一個absolute元素要相對於那個元素進行移動，就給那個元素設置relative的定位就可以了。
  接下來用一個實例來介紹它們的區別：
  CSS樣式：

 .wrapper{
           height: 200px;
           width: 200px;
           background: red;
           margin-left: 50px;
       }
       .box{
           height: 100px;
           width: 100px;
           background: green;
           margin-left: 100px;
       }
       .content{
           height: 50px;
           width: 50px;
           background: yellow;

html樣式：

 <div class="wrapper"><!--最外層 -->
        <div class="box">
            <div class="content"></div>
        </div>
    </div>

結果在瀏覽器上顯示：

下面開始進行講述它們的區別了，給最裏層content加一個樣式：

.content{
           position: absolute;
           left: 50px;
           height: 50px;
           width: 50px;
           background: yellow;
       }

結果顯示如下：

從這個圖片可以看出，這是相對於瀏覽器進行定位的，也驗證了我們上述的結論是對的。
若content的樣式改爲

 .content{
           position: relative;
           left: 50px;
           height: 50px;
           width: 50px;
           background: yellow;
       }

那麼結果是：

本來content黃色小方塊在綠色方塊的左上角，然後relative相對與自身的位置進行定位，這個時候的left屬性的意思就是相對於本來在綠色左上角的那個位置向右移動了50px的距離，也就是現在這個黃色小方塊所在的位置。
從這個例子可以很容易看出這兩個值得區別：
absolute：

1.脫離原來位置進行定位

2.相對於最近的有定位的父級進行定位，如果沒有那麼相對於瀏覽器邊框定位。

relative：

1.保留原來位置定位

2.相對於最近的有定位的父級進行定位

一般被用來設置參照物

• fixed
  當你在瀏覽一個網站的時候，有個小廣告在一個固定位置一直不變，當你滑動滾輪的時候，它也不會發生任何的變化，這就是運用這個屬性。

<style>
.fixed{
   width: 100px;
   height: 100px;
   background: red;
   position: fixed;
   right: 100px;
   top: 50px;
  }
</style>
<div class="fixed">
</div>

拓展環節：

.demo{
      position: absolute;
      margin-top: 200px;
      height: 200px;
      width: 50px;
      background-color: red;
}

我們把absolute換成relative之後，會發現整個div會向上移動一小段距離，這是爲什麼呢？

一般情況下是不會考慮的，以爲在最開始都會設置一個*{margin：0}，如果考慮的話，解釋如下：margin合併問題——body標籤本身有8px的margin，而四個方向的margin自然包括了margin-bottom，我們爲div.demo設置了margin-top，就會導致margin合併的問題發生，當position是relative的時候，並沒有觸發bfc，所以中間的距離會取二者的最大值，也就是200px，當position是absolute的時候，因爲觸發了bfc效果，從而消除掉margin合併的bug，因此中間的距離是200+8=208px。

這四個w3c上給介紹的，也是最常用的，那麼接下來說一下，不常用的做一下了解吧。

• sticky
  position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行爲就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。

.sticky{
     position: sticky;
     top: 15px;
  }

• center
  與absolute一致，但偏移定位是以定位祖先元素的中心點爲參考。盒子在其包含容器垂直水平居中。

• page
  與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。

最後三個是css3的屬性，平常很少用的到，大家瞭解一下就行了。
關於浮動的學習
講到浮動，那麼首先要說的就是浮動是什麼是用來做什麼的。說到浮動，聯繫最密切的的元素就是ul和li這兩個父子元素，它們經常用到浮動。最重要是這兩個元素是塊級元素，只要父元素是塊級元素，子元素是會計元素，這樣纔會用到float（浮動）。因爲子元素是塊級元素想要變成行級元素那樣排列，所以在父級添加一個float（浮動）。
接下來，就看一下吧：

  <style>
  *{
            margin: 0;
            padding: 0;
            list-style: none
        }
        ul{
            width: 308px;
            height: 100px;
            background-color: red;
            border: 1px solid black;

        }
        li{
            /* float: left; *//*加float是爲清除浮動的*/
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: green;
        }
  </style>
  <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

接下來的效果：

這是正常的，但在實際操作中我們需要的不是這一種，而是需要下面的綠色方塊在紅色方塊裏面包裹着。就像淘寶的一些商品分類就是用這種方法做的。只需要上樣式裏面的註釋給加里面就行了。就形成了這樣的效果：

通過這個例子大家都應該對浮動有了基本的瞭解。

float屬性
那麼該有一個問題了，正常是按照從左到右排列的，這是默認值。當元素超過了父級的元素時，那麼它會超出容器進行向下面排列，但是下面的隊形還會想第一行的隊形一樣進行排列的。超出部分自動換行，然後繼續排列，這就是這個規律。
超出部分會出現下面的情況：

浮動起來的元素會像absolute的元素脫離文檔流，但是不會脫離文字流，這是什麼意思呢？

<style>
.top {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
}
.bottom {
      width: 200px;
      height: 200px;
      background-color: black;
      color: white;
}
</style>
<div class=”top”></div>
<div class=”bottom”>我是文字，我能看到文字流喲~</div>

脫離文檔流所以，紅色的把黑色的覆蓋了一部分，按道理文字應該是看不到的，但是文字顯示出來，這說明這並不脫離文字流，文字還一樣顯示。

在這裏想插入一個小的插曲：

<style>
    div{
    height: 40px;
    width: 200px;
    border: 1px solid black;
    }
</style>
<div>我這裏顯示文字的部分，看一下是不是能超出界限</div>
   <div>jsfdasjdfjsdfkljashdfkjdshkjfhaskdjfhiuwfdhjkslh</div>

顯示結果是這樣的：

瀏覽器能識別漢字間隔，會自動換行，而英文如果沒有空格，它就會認爲這是一個單詞所以不會換行的，就出現了上面的這種情況。

接着上文說，不脫離文字流的意思則是display屬性是inline或者inline-block的元素還是可以看到它的，文字本身是inline屬性的。
接下來，我們講.bottom這個div的display改成inline-block;之後再看一下效果。

.bottom {
      width: 200px;
      height: 200px;
      background-color: black;
      color: white;
      display: inline-block;
}

這是因爲，float屬性會自動將這個元素的display給改成inline-block的，也就是說，不論你給display加上什麼值，只要有float屬性，那麼這個元素就是inline-block屬性的，這也就是爲什麼紅色浮動方塊沒有獨佔一行的原因了。

• float屬性只有兩個值：left和right，默認的狀態是沒有值none。
• float：right的效果就是從右邊開始排列，剛好和left是相反的效果。

1.對元素進行佈局。

2.像absolute一樣，讓元素浮動起來，產生自己獨有的浮動流。

浮動流有兩個效果：

① 脫離標準的文檔流，但不會脫離文字流 ，正常的元素看不到它，但是有文字屬性inline或者文字本身可以看到它。

② 在內部會把改元素變換成inline-block屬性的元素。

當然這樣有它的好處，上面已經講到它的好處，當然也會有它的缺點的，這是脫離文檔流的。假設父級脫離了文檔流，則下面的元素會被覆蓋掉，這樣會給我們照成很大的不便的。因此我們得想辦法解決它呀。
那麼接下就說一下，解決float流的方法：

1.使用額外標籤法

在子元素下面添加一個p標籤

<style>
 .clearfix{
     clear: both;
  }
</style>
 <ul>
        <li></li>
        <li></li>
        <li></li>
        <p class="claerfix"></p>
    </ul>

但是實際上，並不是父級清除了浮動流，而是被p撐開了，p.clear標籤能看到上面浮動的元素，ul能看到不浮動的p標籤，因此就把p標籤包裹進去了，僅此而已（特別像轉移，li的浮動，把p元素給撐開了）
我們要知道，html是做結構規劃的，這個p標籤作爲功能標籤出現了，這種代碼在html裏面是不允許出現的，所以我們要儘可能避免這種情況，因此這種方法不適用。

2.利用僞元素

這種方法最實用的，用的最多的，平常也是使用這一種來清楚浮動的。常用的僞元素：:after、：:before.

ul::after {
      content: '';//即使元素裏什麼也沒有也必須加上這個屬性。
      clear:both;
      display: block; // 能清除浮動的元素，必須是塊級元素！！
}

那麼現在問題來了，ie6、ie7並沒有僞元素這種東西，怎麼辦？

前面我們介紹了bfc，這裏我們介紹ie6ie7獨有的一個東西——hasLayout。只要觸發了hasLayout就和觸發bfc有差不多的作用，能夠觸發這個東西的屬性有很多，其中最無害的屬於zoom屬性了。
不過我們其他的瀏覽器並不需要zoom這個屬性，這個屬性只是爲了ie6和ie7準備的，所以這個時候我們需要一點點css hack，我們在zoom前面加一個*號， *zoom: 1; 這個符號只有ie6和ie7能夠識別，其他的瀏覽器都不識別，這樣就可以讓只有ie6和ie7去讀這一行屬性，其他瀏覽器直接忽略。順便一提屬性前面加上’_‘之後，就只有ie6可以識別了。_zoom: 1;

ul{
  *zoom: 1;//兼容IE6，IE7瀏覽器
  }

項目中都是使用這種方法進行清楚浮動。

3.給父元素定寬高

這種方法很有侷限性，如果給你一個頁面不讓你定寬高的話，那麼這種基本上沒啥用，因此這種方法很少的去使用。

4.利用overflow：hidden

ul{
  overflow： hidden;
 }
 ul{
    *zoom: 1;
  }

前面的文章也說到觸發bfc，這就是利用觸發bfc的方法。
5. 父元素的浮動
6. 給父元素絕對定位。
這兩種方法都得需要，在父元素外設一個心的元素，清除一下浮動流，這方法太麻煩了，基本上不怎麼用。
先就說到這了，未完待續、、、、、、