• <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>
  • 專注搜索競價代運營

    成長之選 ,效果之道!

    免費咨詢熱線:17636682598

    css定位布局方式有那幾種怎么設置屬性

    css定位方式有那幾種,css定位怎么用都有那些不同之處,如何讓塊狀居中定位布局屬性怎么寫能實現

    position: fixed窗口固定位置定位

    position: fixed; 的元素是相對于窗口定位的,這意味著即使滾動頁面,它也始終位于同一位置

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"
    6.         <title>通高科技</title> 
    7.         <style> 
    8.             .footer{ 
    9.                 width: 100%; 
    10.                 height: 40px; 
    11.                 position: fixed; 
    12.                 bottom: 0; 
    13.                 right: 0; 
    14.                 background-color:#73AD21; 
    15.             } 
    16.              
    17.             } 
    18.         </style> 
    19.     </head> 
    20.     <body> 
    21.         <div class="footer"
    22.             position: fixed 窗口固定位置,不受頁面滾動影響 
    23.         </div> 
    24.          
    25.     </body> 
    26. </html> 

    position: absolute絕對定位

    絕對定位的特點:(務必記?。?/p>

    如果沒有父元素沒有定位,則以瀏覽器為準定位(Document 文檔)。

    如果父元素有定位(相對、絕對、固定定位),則以最近一級的有定位祖先元素為參考點移動位置。

    絕對定位不再占有原先的位置。(脫標)所以絕對定位是脫離標準流的。

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <title>通高科技</title> 
    6.         <style> 
    7.             .num2{ 
    8.                 width: 400px; 
    9.                 height: 400px; 
    10.                 position: relative; 
    11.                 left:100px; 
    12.                 border: 3px solid #73AD21; 
    13.             } 
    14.             .num3{ 
    15.                 width: 200px; 
    16.                 height: 200px; 
    17.                 position: absolute; 
    18.                 right:100px; 
    19.                 top: 20px; 
    20.                 background:red; 
    21.                 border: 3px solid #73AD21; 
    22.             } 
    23.         </style> 
    24.     </head> 
    25.     <body> 
    26.         <div class="num2"
    27.             這個 元素設置了 position: relative; 
    28.          
    29.             <div class="num3"
    30.                 absolute定位向右100px,距離頂部20PX 
    31.             </div> 
    32.         </div> 
    33.          
    34.         <div class="num3"
    35.             absolute沒有父元素定位,默認定位body為父元素,向右100px,距離頂部20PX 
    36.         </div> 
    37.          
    38.     </body> 
    39. </html> 

    運行實例:

    position: relative相對定位

    使用position:relative,就需要top,bottom,left,right4個屬性來配合,確定元素的位置。是爭對原來位置進行偏移的

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <title>通高科技</title> 
    6.         <style> 
    7.             .num2{ 
    8.                 width: 200px; 
    9.                 height: 200px; 
    10. /*              position: relative; */ 
    11.                 /* left:100px; */ 
    12.                 border: 3px solid #73AD21; 
    13.             } 
    14.             .num3{ 
    15.                 width: 200px; 
    16.                 height: 200px; 
    17.                 position: relative; 
    18.                 left:100px; 
    19.                 top: 20px; 
    20.                 background:red; 
    21.                 border: 3px solid #73AD21; 
    22.             } 
    23.         </style> 
    24.     </head> 
    25.     <body> 
    26.         <div class="num2"
    27.             position: 沒有使用relative定位 
    28.         </div> 
    29.         <div class="num3"
    30.             relative定位向左100px,距離頂部20PX 
    31.         </div> 
    32.     </body> 
    33. </html> 
    運行結果:

    position: static靜態定位

    position: static; 的元素不會以任何特殊方式定位;它始終根據頁面的正常流進行定位:靜態定位的元素不受 top、bottom、left 和 right 屬性的影響。

    1. <!DOCTYPE html> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="utf-8"
    5.         <title>通高科技</title> 
    6.         <style> 
    7.             .num2{ 
    8.                 width: 300px; 
    9.                 height: 300px; 
    10.                 position: static
    11.                 border: 3px solid #73AD21; 
    12.             } 
    13.         </style> 
    14.     </head> 
    15.     <body> 
    16.         <div class="num2"
    17.             position: static定位 
    18.         </div> 
    19.     </body> 
    20. </html> 

    運行結果

    本文分類:營銷學院

    瀏覽次數:51次瀏覽

    發布日期:2022-07-05 11:43:52

    本文鏈接:http://www.backlinkboom.com/edu/2418.html

    天美传媒精品,亚洲国际综合无码一区,液液酱cosplay露出
  • <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>