前端基礎總結（3）——css定位和浮動

CSS 定位

position屬性用來指定一個元素在網頁上的位置，一共以下有5種定位方式：

（1）static——靜態定位

static是position的默認值，即沒有定位，元素正常出現在頁面流中。

（2）fixed——固定定位

元素相對於瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。

（3）relative——相對定位

元素的定位是相對其正常位置（即static時的位置），搭配top、bottom、left、right使用來指定偏移的方向和距離。

div {
  position: relative;        //div元素從默認位置向下偏移20px
  top: 20px;
}

（4）absolute——絕對定位

元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素或者祖先元素，那麼它的位置相對於根元素html。

元素搭配top、bottom、left、right使用來指定偏移的方向和距離

#father {                         //父元素是relative定位，子元素是absolute定位
  positon: relative;
}
#son {                           //上方的距離爲20px,因此子元素相對父元素向下偏移20px
  position: absolute;         
  top: 20px;
}

元素的位置與文檔流無關，因此不佔據空間，所以它們可以覆蓋頁面上的其它元素。

如果兩個定位元素重疊，我們要指定沒有指定哪個元素應該放在前面可以使用z-index屬性

#father {
  positon: relative;
  z-index:1; 
}
#son{ 
  position:absolute;         //偏移爲0時父元素與子元素重疊
  left:0px; 
  top:0px; 
  z-index:2;                 //z-index值較大的元素在上面，因此子元素覆蓋在父元素上
}

具有更大z-index值的元素總是在前面，如果都沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。

（5）sticky——動態固定

它會產生動態效果，很像relative和fixed的結合。

#toolbar {
  position: sticky; 
  top: 20px;
}

比如網頁的搜索工具欄，初始加載時在自己的默認位置（relative定位）

頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）

等到頁面重新向上滾動回到原位，工具欄也會回到默認位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個屬性一起使用，不能省略

#toolbar {
  position: -webkit-sticky; /* safari 瀏覽器 */
  top: 20px;
}

除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky，Safari 瀏覽器需要加上瀏覽器前綴 -webkit-

---

CSS浮動

CSS 的 Float（浮動），會使元素脫離文檔流，向左或向右移動，碰到父級邊界或者另外一個浮動元素停止。

ps:只能左右移動而不能上下移動

（1）塊級元素獨佔一行，我們通常使用float來讓多個塊級元素同一行上顯示。

#box1{
  width:200px;
  height:100px;
  background-color:red;
  float:left;          // 左浮動
}
#box2{
  width:200px;
  height:50px;
  background-color:blue;
  float:left;         // 左浮動
}

效果：

（2）浮動元素是脫離文檔流的，即不佔空間

#box1{
  width:50px;
  height:50px;
  background-color:red;
  float:left;         
}
#box2{                //box1設置float:left向左浮動並脫離文檔流，box2正常排列，因此出現重疊現象
  width:200px;
  height:150px;
  background-color:blue;
}

效果：

（3）標準流中的文字不會被浮動的盒子遮擋住，文字就像水一樣圍着字

img{
  float:right;
}




<img src="./a.jpg">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

效果：

---

清除浮動（重要）

        由於浮動的元素脫離正常的文檔流，因此當子元素設置浮動的時候，父元素在顯示時不考慮子元素的位置，這就造成了顯示出來父容器好像空容器一樣。

清除浮動的本質：主要爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

方法一：在浮動元素下方添加一個空元素​​​​​​​（不推薦）

<div>

    <div style="width:200px;height:50px;float:left;"></div>
    
    <div style="width:100px;height:70px;float:right;"></div>

    <div style="clear:both;"></div>

</div>

clear 屬性指定元素兩側不能出現浮動元素，可以取值left、right、both

缺點：添加了無意義標籤，語義化差

方法二：父元素添加overflow屬性（不推薦）

 .fahter{
        width: 400px;
        height:300px;
        overflow: hidden;      //父元素設置overflow觸發BFC方式，實現清除浮動
 } 

缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素

方法三：父元素使用after僞元素（推薦使用）

.father:after{        
        content: "";              //content可以取值也可以爲空
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;      //允許瀏覽器渲染它，但是不顯示出來
} 

         實現原理類似於clear:both方法，只是區別在於clear屬性是插入一個無語義化的空標籤，而使用after僞類是在元素內部增加一個類似於div.clear的效果。