AOA棋牌

专注搜索竞价代运营

成长之选 ,效果之道!

免费咨询热线: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>AOA棋牌科技</title> 
  7.     &nbsp;   <style> 
  8.   &nbsp;         .footer{ 
  9.           &nbsp;     width:&nbsp;100%; 
  10. &nbsp;               height: 40px; 
  11.                 position: fixed; 
  12. &nbsp;    &nbsp;          bottom: 0; 
  13.  &nbsp;              right: 0; 
  14. &nbsp;               background-color:#73AD21; 
  15.     &nbsp;       } 
  16.     &nbsp;        
  17.        &nbsp;    } 
  18.     &nbsp;   </style> 
  19.     </head> 
  20.     <body> 
  21.         <div class="footer"
  22.     &nbsp;       position: fixed 窗口固定位置,不受页面滚动影响 
  23.         </div> 
  24. &nbsp;        
  25.     </body> 
  26. </html> 

position: absolute绝对定位

绝对定位的特点:(务必记住)

如果没有父元素没有定位,则以浏览器为准定位(Document 文档)。

如果父元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位不再占有原先的位置。(脱标)所以绝对定位是脱离标准流的。

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"
  5. &nbsp;       <title>AOA棋牌科技</title> 
  6.  &nbsp;      <style> 
  7.            &nbsp;.num2{ 
  8.  &nbsp;       &nbsp;      width: 400px; 
  9.           &nbsp;     height: 400px; 
  10.         &nbsp;       position: relative; 
  11.            &nbsp;    left:100px; 
  12.             &nbsp; ;  border: 3px solid #73AD21; 
  13. &nbsp;           } 
  14.             .num3{ 
  15.     &nbsp;           width: 200px; 
  16.                 height:&nbsp;200px; 
  17.                 position:&nbsp;absolute; 
  18.      ;         &nbsp; right:100px; 
  19.         &nbsp;       top: 20px; 
  20.                 background:red; 
  21.                &nbsp;border: 3px solid #73AD21; 
  22.   ;        &nbsp; } 
  23.         </style> 
  24.     </head> 
  25.     <body> 
  26.         <div class="num2"
  27.             这个 元素设置了 position: relative;&nbsp;
  28.  &nbsp;       
  29.             <div class="num3"
  30.       &nbsp;    &nbsp;    absolute定位向右100px,距离顶部20PX 
  31.           &nbsp; </div> 
  32.         &lt;/div> 
  33.         &nbsp;
  34.         <div class="num3"
  35.             absolute没有父元素定位,默认定位body为父元素,向右100px,距离顶部20PX 
  36.    &nbsp;  &nbsp; </div> 
  37.        &nbsp; 
  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.  &nbsp;      <title>AOA棋牌科技&lt;/title> 
  6. &nbsp;       <style> 
  7.    &nbsp;        .num2{ 
  8.                ; width: 200px; 
  9.                 height: 200px; 
  10. /*              position: relative;&nbsp;*/ 
  11.                 /* left:100px; */ 
  12.       &nbsp;         border: 3px solid #73AD21; 
  13. &nbsp;           } 
  14. &nbsp;           .num3{ 
  15.             &nbsp;   width: 200px; 
  16.     &nbsp;           height: 200px; 
  17.  ;           &nbsp;   position: relative; 
  18.            &nbsp;    left:100px; 
  19. &nbsp;               top: 20px; 
  20.            &nbsp;    background:red;&nbsp;
  21.                 border: 3px solid #73AD21; 
  22. &nbsp;           } 
  23.      ;   </style> 
  24.     </head> 
  25.     <body> 
  26.         <div class="num2"
  27.        &nbsp;    position: 没有使用relative定位 
  28.         </div> 
  29.         <div class="num3"
  30.            &nbsp;relative定位向左100px,距离顶部20PX 
  31.   &nbsp;     </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>AOA棋牌科技</title> 
  6.    &nbsp;    <style&gt; 
  7.    &nbsp;        .num2{ 
  8.                 width: 300px; ;
  9.              &nbsp;  ;height: 300px; 
  10.                 position: static
  11.    &nbsp;            border: 3px solid #73AD21; 
  12.           &nbsp; } 
  13.        &nbsp;</style&gt; 
  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://czxhbook.com/edu/2418.html

"
"