浮動和定位基礎

dafeige發表於2019-04-09

1、浮動元素的特點

浮動元素的特點
1、在一行顯示
2、浮動元素會脫離文件流 導致下面沒有浮動的元素識別不了它(浮動元素)的高度和位置 就會往上跑 佔領浮動元素的位置
3、元素都是float:left 左浮動 元素從左往右依次排列 
      元素都是float:right 右浮動 元素從右往左依次排列
4、父元素浮動 子元素並不會繼承父元素的浮動  如果想要子元素也在一行顯示 我們需要給子元素也加浮動的屬性
5、浮動屬性不能繼承
6、浮動元素本身具有塊元素的特點 所以用了浮動====> 就不再需要再加display:block了
7、所有的元素都可以用浮動屬性

文件流:指的是元素的排列方式
正常文件流:從左往右 從上往下排
文件流可以分為 行內元素 、塊級元素
脫離文件流:元素的正常排列方式被打破

脫離文件流的影響: float (左浮動 右浮動  none -- 不浮動)    定位

浮動元素產生的負作用 ----  主要原因就是高度為0
1、給父元素設定北京顏色屬性不起作用(沒有高度)
2、給父元素設定邊框border屬性沒有被撐開
3、給父元素設定內部邊距padding屬性也沒有被撐開

複製程式碼

2、如何清楚浮動產生的影響

1、給浮動元素的父元素 新增一個高度height屬性
2、給浮動元素的父元素 新增overflow:hidden屬性
3、給浮動元素的父元素結束標籤之前加一個具有塊元素特點的標籤(我們一般用div) 給元素加一個clear:both <div style="clear:both"></div>
4、原理同3 在父元素結束標籤之前加一個偽元素 clearfix 偽元素去清除浮動(這種方法是專案中最常用的方法)
// 利用偽元素:after清浮動的固定程式碼；只要清浮動我們在浮動元素的父元素上加上一個.clearfix即可
.clearfix:after  {
    //前三個 缺一不可
    display:block;/*確保元素是一個塊級元素*/
    clear:both;/*不允許左右兩邊有浮動物件*/
    content:"";/*這是偽元素:before和:after天生自帶的屬性  如果不寫偽元素不起作用*/
    /*寫全的樣式屬性:下面的4個*/
    height:0;/*防止在低版本瀏覽器中預設height:1px的情況 我們用height:0 去覆蓋*/
    font-size:0；/*字型大小*/
    overflow:hidden;/*溢位隱藏*/
    visibility:hidden;/*讓所有可見性的元素隱藏*/
}
.clearfix {
    *zoom:1/*css hack 相容IE7瀏覽器*/
}
複製程式碼

3、如何讓元素消失在視野中

1、透明度opacity:0  [0~1]
2、display:none 隱藏 // 比較推薦這種做法
3、width:0/height:0 和overflow:hidden
4、line-height:0 和overflow:hidden(沒有設定高度的情況下)
5、visibility:hidden 讓所有可見性的元素隱藏
6、margin/padding設定足夠大  只要能消失即可
7、利用transform屬性 讓translate座標設定足夠大 transform:translateY(-9999999px)

脫離文件流的元素相當於平行漂浮在文件流之上
visibility:hidden  盒子看不到 但是盒子所佔的大小依然還在
display:none -- 盒子完全從頁面中消失
頁面檢查偽元素:可以發現在元素之前有::before 在元素之後有一個::after
複製程式碼

4、絕對定位的特點

絕對定位的特點
1、它設定top、bottom、left、right四個方位值
2、絕對定位元素會脫離文件流 不佔位 導致後面的元素會往前跑 佔領它的位置
3、絕對定位元素一定要有相對參照物(它的直接父級)，如果父級元素沒有加相對參照物，它會一級一級往上查詢，直到找到最外層的根元素html
4、如果方位裡 同時有left和right 最後聽left  同時有top和bottom 最後聽top 以後在實際專案中只需要設定top或者bottom left或者right
5、z-index 越大 層級越在上
6、一個元素定在一個元素上 或者兩個元素的疊加這種情況 我們都可以用定位(絕對定位)
注意:絕對定位一定要給他相對參照物
 絕對定位一定要指明它定位的方向
7、相對參照物只要是定位元素就可以(絕對定位 相對定位 固定定位) 優先選相對定位 position:relative
絕對定位和固定定位 都會脫離文件流 不佔位
複製程式碼

5、相對定位的特點

1、不會脫離文件流 佔位 所有後面的元素不會往前跑
2、可以設定上下左右四個方位
如果同時存在top和bottom值 只有top起作用
如果同時設定了left和right值 只有left起作用
3、參照物:自己本省
4、可以設定z-index屬性 z-index越大越在上
z-index 必須要和定位元素(絕對、相對、固定)同時使用 才起作用
複製程式碼

6、固定定位的特點

固定定位的特點  /*很多網站 頭部 左側 右側的導航欄  都用的固定定位 不會隨著滾動條滾動位置發生變化*/
1、會脫離文件流
2、可以設定上下左右四個方位
如果同時存在top和bottom值 只有top起作用
如果同時設定了left和right值 只有left起作用
3、參照物:整個瀏覽器視窗
4、可以設定z-index改變層級 值越大 越在上
複製程式碼

7、定位特性的分析

定位總結
相同點：
1、可以設定上下左右四個方位   如果同時存在top和bottom值 只有top起作用  如果同時設定了left和right值 只有left起作用
2、都可以設定z-index改變層級 而且z-index越大 越在上

不同點
1、是否脫離文件流
絕對定位:是  相對定位:否   固定定位:是
只有相對定位沒有脫離文件流 絕對和固定定位都脫離了文件流
2、參照物
絕對定位:是具有定位元素的父級元素 如果直接父級沒有定位元素 則往上級直到找到我們的根元素html為止
絕對定位元素 一定要給他的直接父元素加相對參照物(positon:relative)
相對定位:它自己本身
固定定位:整個瀏覽器視窗
複製程式碼

8、z-index的特點

1、都有定位元素的標籤 在後面的標籤的z-index要比在前面的z-index的值要大
2、z-index沒有單位 支援負值
3、z-index一般都是同級元素的比較     子元素和父元素去比較  z-index並不遵循我們說的規律:值越大 越在上(我們一般不會拿子元素去跟他的父元素去比較z-index的大小)
4、z-index屬性不能繼承
複製程式碼
  • 動力: 這是我的學習筆記(來源於視訊或者查閱文件),您能從中得到收穫和進步,是我分享的動力,幫助別人,自己也會更快樂
  • 期望: 不喜勿噴,謝謝合作！如果涉及版權請及時聯絡我,馬上刪除!

相關文章