• <menu id="sssag"></menu>
  • <menu id="sssag"></menu>
  • 定位是什么,元素怎么顯示隱藏

    歡迎大家去博客冰山一樹Sankey,瀏覽效果更好。直接右上角搜索該標題即可
    冰山一樹Sankey

    博客園主頁:博客園主頁-冰山一樹Sankey
    CSDN主頁:CSDN主頁-冰山一樹Sankey

    前端學習:學習地址:黑馬程序員pink老師前端入門教程,零基礎必看的h5(html5)+css3+移動,下面這些都是一些學習筆記。臨淵羨魚,不如退而結網??!愿我自己學有所成,也愿每個前端愛好者學有所成

    一. 定位

    1.1 為什么需要定位

    提問: 以下情況使用標準流或者浮動能實現嗎?

    1. 某個元素可以自由的在一個盒子內移動位置,并且壓住其他盒子.

    image-20220309185411399

    1. 當我們滾動窗口的時候,盒子是固定屏幕某個位置的。

    image-20220309185438547

    以上效果,標準流或浮動都無法快速實現,此時需要定位來實現。
    浮動與定位區別:

    1. 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示, 經常用于橫向排列盒子。
    2. 定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置,并且可以壓住其他盒子。

    1.2 定位組成

    定位:將盒子定在某一個位置,所以定位也是在擺放盒子, 按照定位的方式移動盒子。
    定位 = 定位模式 + 邊偏移 。
    定位模式用于指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

    定位模式

    定位模式決定元素的定位方式 ,它通過 CSS 的 position 屬性來設置,其值可以分為四個:

    語義
    static 靜態定位
    relative 相對定位
    absolute 絕對定位
    fixed 固定定位

    邊偏移

    邊偏移就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

    邊偏移屬性 示例 描述
    top top:80px 頂端偏移量,定義元素相對于其父元素上邊線的距離。
    bottom bottom:80px 底部偏移量,定義元素相對于其父元素下邊線的距離。
    left left:80px 左側偏移量,定義元素相對于其父元素左邊線的距離。
    right right:80px 右側偏移量,定義元素相對于其父元素右邊線的距離

    1.3 靜態定位

    靜態定位是元素的默認定位方式,無定位的意思。
    語法

    選擇器 { position: static; }
    
    • 靜態定位按照標準流特性擺放位置,它沒有邊偏移
    • 靜態定位在布局時很少用到

    1.4 相對定位

    相對定位是元素在移動位置的時候,是相對于它原來的位置來說的。

    語法

    選擇器 { position: relative; }
    

    相對定位的特點

    1. 它是相對于自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)。
    2. 原來在標準流的位置繼續占有,后面的盒子仍然以標準流的方式對待它。
      因此,相對定位并沒有脫標。它最典型的應用是給絕對定位當爹的。。。

    1.5 絕對定位

    絕對定位是元素在移動位置的時候,是相對于它祖先元素來說的(拼爹型)。

    語法

    選擇器 { position: absolute; }
    

    絕對定位的特點

    1. 如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為準定位(Document 文檔)。
    2. 如果祖先元素有定位(相對、絕對、固定定位),則以最近一級的有定位祖先元素為參考點移動位置。
    3. 絕對定位不再占有原先的位置。所以絕對定位是脫離標準流的。

    1.6 子絕父相

    “子絕父相”是定位中最常用的一種方式,這句話的意思是:子級是絕對定位的話,父級要用相對定位。

    • 子級絕對定位,不會占有位置,可以放到父盒子里面的任何一個地方,不會影響其他的兄弟盒子。
    • 父盒子需要加定位限制子盒子在父盒子內顯示。
    • 父盒子布局時,需要占有位置,因此父親只能是相對定位。

    總結: 因為父級需要占有位置,因此是相對定位, 子盒子不需要占有位置,則是絕對定位
    當然,子絕父相不是永遠不變的,如果父元素不需要占有位置,子絕父絕也會遇到。

    1.7 固定定位

    固定定位是元素固定于瀏覽器可視區的位置。主要使用場景: 可以在瀏覽器頁面滾動時元素的位置不會改變。

    語法:

    選擇器 { position: fixed; }
    

    固定定位的特點:

    1. 以瀏覽器的可視窗口為參照點移動元素。
      • 跟父元素沒有任何關系
      • 不隨滾動條滾動。
    2. 固定定位不在占有原先的位置。

    固定定位也是脫標的,其實固定定位也可以看做是一種特殊的絕對定位。

    固定定位小技巧: 固定在版心右側位置。

    image-20211119131223253

    小算法

    1. 讓固定定位的盒子 left: 50%. 走到瀏覽器可視區(也可以看做版心) 的一半位置。
    2. 讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置
      就可以讓固定定位的盒子貼著版心右側對齊了。
     position: fixed;
     /* 1. 走瀏覽器寬度的一半 */
     left: 50%;
     /* 2. 利用margin 走版心盒子寬度的一半距離 */
     margin-left: 405px;
    

    1.8 粘性定位

    粘性定位可以被認為是相對定位和固定定位的混合。 Sticky 粘性的
    語法:

    選擇器 { position: sticky; top: 10px; }
    

    粘性定位的特點:

    1. 以瀏覽器的可視窗口為參照點移動元素(固定定位特點)
    2. 粘性定位占有原先的位置(相對定位特點)
    3. 必須添加 top 、left、right、bottom 其中一個才有效
      跟頁面滾動搭配使用。 兼容性較差,IE 不支持。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>粘性定位</title>
        <style>
            body {
                height: 3000px;
            }
            .nav {
                /* 粘性定位 */
                position: sticky;
                top: 0;
                width: 800px;
                height: 50px;
                background-color: pink;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <div class="nav">我是導航欄</div>
    </body>
    </html>
    

    image-20211119132423592

    當滑動頁面到當這個盒子TOP=0后,變成固定定位,保持也頁面上方

    定位總結

    image-20220309190411189

    1.9 定位疊放次序 z-index

    在使用定位布局時,可能會出現盒子重疊的情況。此時,可以使用 z-index 來控制盒子的前后次序 (z軸)

    語法:

    選擇器 { z-index: 1; }
    
    • 數值可以是正整數、負整數或 0, 默認是 auto,數值越大,盒子越靠上
    • 如果屬性值相同,則按照書寫順序,后來居上
    • 數字后面不能加單位
    • 只有定位的盒子才有 z-index 屬性

    二. 定位的拓展

    2.1 絕對定位的盒子居中

    加了絕對定位的盒子不能通過 margin:0 auto; 水平居中,但是可以通過以下計算方法實現水平和垂直居中。

    ① left: 50%;:讓盒子的左側移動到父級元素的水平中心位置。
    ② margin-left: -100px;:讓盒子向左移動自身寬度的一半。

    .box {
    position: absolute;
    /* 1. left 走 50%  父容器寬度的一半 */
    left: 50%;
    /* 2. margin 負值 往左邊走 自己盒子寬度的一半 */
    margin-left: -100px;
    /*垂直居中
    top: 50%;
    margin-top: -100px;
    
    width: 200px;
    height: 200px;
    background-color: pink;
    /* margin: auto; */
    }
    

    2.2. 定位特殊特性

    絕對定位和固定定位也和浮動類似。

    1. 行內元素添加絕對或者固定定位,可以直接設置高度和寬度。
    2. 塊級元素添加絕對或者固定定位,如果不給寬度或者高度,默認大小是內容的大小
    3. 浮動元素、絕對定位(固定定位)元素的都不會觸發外邊距合并(外邊距塌陷 )的問題。

    2.3 絕對定位(固定定位)會完全壓住盒子

    浮動元素不同,只會壓住它下面標準流的盒子,但是不會壓住下面標準流盒子里面的文字(圖片)
    但是絕對定位(固定定位) 會壓住下面標準流所有的內容。
    浮動之所以不會壓住文字,因為浮動產生的目的最初是為了做文字環繞效果的。 文字會圍繞浮動元素

    image-20220309190807846

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>定位會完全壓住標準流盒子內容</title>
        <style>
            .box {
                /* 1.浮動的元素不會壓住下面標準流的文字 */
                /* float: left; */
                /* 2. 絕對定位(固定定位) 會壓住下面標準流所有的內容。 */
                position: absolute;
                width: 150px;
                height: 150px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <p>閣下何不同風起,扶搖直上九萬里</p>
    </body>
    </html>
    

    總結

    通過盒子模型,清楚知道大部分html標簽是一個盒子。

    通過CSS浮動、定位 可以讓每個盒子排列成為網頁。

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

    1. 標準流
      可以讓盒子上下排列或者左右排列,垂直的塊級盒子顯示就用標準流布局。
    2. 浮動
      可以讓多個塊級元素一行顯示或者左右對齊盒子,多個塊級盒子水平顯示就用浮動布局。
    3. 定位
      定位最大的特點是有層疊的概念,就是可以讓多個盒子前后疊壓來顯示。如果元素自由在某個盒子內移動
      用定位布局。

    三. 元素的顯示與隱藏

    類似網站廣告,當我們點擊關閉就不見了,但是我們重新刷新頁面,會重新出現!
    本質:讓一個元素在頁面中隱藏或者顯示出來。

    1. display 顯示隱藏
    2. visibility 顯示隱藏
    3. overflow 溢出顯示隱藏

    3.1 display 屬性

    display 屬性用于設置一個元素應如何顯示。

    • display: none ;隱藏對象
    • display:block ;除了轉換為塊級元素之外,同時還有顯示元素的意思

    display 隱藏元素后,不再占有原來的位置。
    后面應用及其廣泛,搭配 JS 可以做很多的網頁特效。

    3.2 visibility 可見性

    visibility 屬性用于指定一個元素應可見還是隱藏。

    • visibility:visible ; 元素可視
    • visibility:hidden; 元素隱藏

    visibility 隱藏元素后,繼續占有原來的位置。
    如果隱藏元素想要原來位置, 就用 visibility:hidden
    如果隱藏元素不想要原來位置, 就用 display:none (用處更多 重點)

    3.3 overflow 溢出

    overflow 屬性指定了如果內容溢出一個元素的框(超過其指定高度及寬度) 時,會發生什么。

    屬性值 描述
    visible 不剪切內容也不添加滾動條
    hidden 不顯示超過對象尺寸的內容,超出的部分隱藏掉
    scroll 不管超出內容否,總是顯示滾動條
    auto 超出自動顯示滾動條,不超出不顯示滾動條

    一般情況下,我們都不想讓溢出的內容顯示出來,因為溢出的部分會影響布局。

    但是如果有定位的盒子, 請慎用overflow:hidden 因為它會隱藏多余的部分。

    3.4 土豆網鼠標經過顯示遮罩

    image-20220309191603210

    土豆網鼠標經過顯示遮罩
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>仿土豆網顯示隱藏遮罩案例</title>
        <style>
            .tudou {
                position: relative;
                width: 444px;
                height: 320px;
                background-color: pink;
                margin: 30px auto;
            }
    
            .tudou img {
                width: 100%;
                height: 100%;
            }
    
            .mask {
                /* 隱藏遮罩層 */
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
            }
    
            /* 當我們鼠標經過了 土豆這個盒子,就讓里面遮罩層顯示出來 */
            .tudou:hover .mask {
                /* 而是顯示元素 */
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
        <div class="tudou">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </div>
    </body>
    
    </html>
    
    posted @ 2022-03-12 21:44  冰山一樹Sankey  閱讀(0)  評論(0編輯  收藏  舉報
    国产在线码观看超清无码视频,人妻精品动漫H无码,十大看黄台高清视频,国产在线无码视频一区二区三区,国产男女乱婬真视频免费,免费看女人的隐私超爽,狠狠色狠狠色综合久久蜜芽