<var id="5bizx"></var>
    <var id="5bizx"></var>

    <form id="5bizx"></form>
    <var id="5bizx"></var>

        <form id="5bizx"><small id="5bizx"></small></form>

          專注搜索競價代運營

          成長之選 ,效果之道!

          免費咨詢熱線: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.citywhit.com/edu/2418.html

          人妻激情视频一区中文字幕,小雪被弄得很舒服,欧美成 人版中文字幕
            <var id="5bizx"></var>
            <var id="5bizx"></var>

            <form id="5bizx"></form>
            <var id="5bizx"></var>

                <form id="5bizx"><small id="5bizx"></small></form>