欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

绝对定位、固定定位及flex,grid属性

程序员文章站 2022-03-13 12:51:48
...

CSS定位和flex，grid属性

绝对定位和固定定位

  • 绝对定位

静态定位：position: static;
相对定位：position: relative;
绝对定位： position: absolute;

静态定位为html中的默认值，相对定位以元素原始位置为参照物，绝对定位以上一级相对定位或原始元素为参照物；相对定位需要占据空间，绝对定位不占据空间。实例演示如下：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>相对定位和绝对定位</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <h1>相对定位</h1>
    11. 

  11.     <div class="box three">
    12. 

  12.       <div class="box two">
    13. 

  13.         <div class="box one"></div>
    14. 

  14.       </div>
    15. 

  15.     </div>
    16. 

  16.     <style>
    17. 

  17.       .box {
    18. 

  18.         border: 1px solid #000;
    19. 

  19.         display: inline-block;
    20. 

  20.       }
    21. 

  21.       .box.one {
    22. 

  22.         width: 5em;
    23. 

  23.         height: 5em;
    24. 

  24.         background-color: violet;
    25. 

  25.       }
    26. 

  26.       .box.two {
    27. 

  27.         width: 10em;
    28. 

  28.         height: 10em;
    29. 

  29.         background-color: wheat;
    30. 

  30.       }
    31. 

  31.       .box.three {
    32. 

  32.         width: 15em;
    33. 

  33.         height: 15em;
    34. 

  34.         background-color: lightgreen;
    35. 

  35.       }
    36. 

  36.       .one {
    37. 

  37.         position: static;
    38. 

  38.         position: relative;
    39. 

  39.         top: 1em;
    40. 

  40.         left: 1em;
    41. 

  41.       }
    42. 

  42.     </style>
    43. 

  43.     <h1>绝对定位</h1>
    44. 

  44.     <!--
    45. 

  45.         静态定位：static
    46. 

  46.         -->
    47. 

  47.     <div class="box2 three2">
    48. 

  48.       <div class="box2 two2"><div class="box2 one2"></div></div>
    49. 

  49.     </div>
    50. 

  50.     <style>
    51. 

  51.       .box2 {
    52. 

  52.         border: 1px solid #000;
    53. 

  53.         display: inline-block;
    54. 

  54.       }
    55. 

  55.       .box2.one2 {
    56. 

  56.         width: 5em;
    57. 

  57.         height: 5em;
    58. 

  58.         background-color: violet;
    59. 

  59.       }
    60. 

  60.       .box2.two2 {
    61. 

  61.         width: 10em;
    62. 

  62.         height: 10em;
    63. 

  63.         background-color: wheat;
    64. 

  64.       }
    65. 

  65.       .box2.three2 {
    66. 

  66.         width: 15em;
    67. 

  67.         height: 15em;
    68. 

  68.         background-color: lightgreen;
    69. 

  69.       }
    70. 

  70.       .one2 {
    71. 

  71.         /* position: static;
    72. 

  72.         position: relative;
    73. 

  73.         top: 1em;
    74. 

  74.         left: 1em; */
    75. 

  75.         position: absolute;
    76. 

  76.         left: 1em;
    77. 

  77.         top: 1em;
    78. 

  78.       }
    79. 

  79.       .three2 {
    80. 

  80.         position: relative;
    81. 

  81.       }
    82. 

  82.     </style>
    83. 

  83.   </body>
    84. 

  84. </html>
    85.

效果如下：

绝对定位、固定定位及flex,grid属性

  • 固定定位

固定定位 position:fixed;

如果一个值总是相对于html或包含块静止，那么它就处于固定定位。实例如下：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>固定定位与粘性定位</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div class="box">
    11. 

  11.       <img src="kf.jpg" />
    12. 

  12.       <article>
    13. 

  13.         <h2 style="background-color: green">国内新闻</h2>
    14. 

  14.         <ul>
    15. 

  15.           <li><a href="">任正非重磅发声：鸿蒙之外，华为还有备胎</a></li>
    16. 

  16.           <li><a href="">留学生回国一年：家长陪读网课，教育花费近百万</a></li>
    17. 

  17.           <li><a href="">明星频繁翻车，虚拟偶像是解决方案吗？</a></li>
    18. 

  18.           <li><a href="">美国只有用实际行动才能摘掉“抗疫失败国”的帽子</a></li>
    19. 

  19.           <li><a href="">福建莆田最小确诊患者仅4岁 穿隔离服独自做检查</a></li>
    20. 

  20.           <li><a href="">潜望｜iPhone13背后的苹果供应链江湖：出局与挣扎</a></li>
    21. 

  21.           <li>
    22. 

  22.             <a href=""
    23. 

  23.               >多虑了！网络诈骗不收割“网瘾老人”，而是孤独青年人｜钛度图闻</a
    24. 

  24.             >
    25. 

  25.           </li>
    26. 

  26.           <li>
    27. 

  27.             <a href=""
    28. 

  28.               >iPhone13发布，一台苹果手机究竟值多少钱？真的成倍利润？</a
    29. 

  29.             >
    30. 

  30.           </li>
    31. 

  31.           <li>
    32. 

  32.             <a href=""
    33. 

  33.               >美团、饿了么双双发文：严禁诱导和强迫骑手注册成个体工商户</a
    34. 

  34.             >
    35. 

  35.           </li>
    36. 

  36.           <li>
    37. 

  37.             <a href=""
    38. 

  38.               >莫名被开通十余个手机号？工信部推出一证查询名下电话卡功能</a
    39. 

  39.             >
    40. 

  40.           </li>
    41. 

  41.         </ul>
    42. 

  42.       </article>
    43. 

  43.       <article>
    44. 

  44.         <h2 style="background-color: red">国际新闻</h2>
    45. 

  45.         <ul>
    46. 

  46.           <li>
    47. 

  47.             <a href=""
    48. 

  48.               >美军战略司令部司令：中国在发展战略武器方面取得了前所未有的突破</a
    49. 

  49.             >
    50. 

  50.           </li>
    51. 

  51.           <li>
    52. 

  52.             <a href=""
    53. 

  53.               >美国防情报局长称“基地”组织可能在一两年内威胁美国本土，还不忘扯上中俄</a
    54. 

  54.             >
    55. 

  55.           </li>
    56. 

  56.           <li>
    57. 

  57.             <a href=""
    58. 

  58.               >美媒：3名前美国情报人员在阿联酋当黑客雇佣兵，承认泄露敏感军事技术</a
    59. 

  59.             >
    60. 

  60.           </li>
    61. 

  61.           <li>
    62. 

  62.             <a href="">美官员：约700人周末将在首都集会 支持国会*案示威者</a>
    63. 

  63.           </li>
    64. 

  64.           <li><a href="">结束16年的德国总理生涯后，默克尔打算做什么？</a></li>
    65. 

  65.           <li>
    66. 

  66.             <a href="">12人涉非法集结案宣判，“支联会”成员何俊仁判监禁10个月</a>
    67. 

  67.           </li>
    68. 

  68.           <li>
    69. 

  69.             <a href=""
    70. 

  70.               >对华开战会提前通知！防止总统宣战，美最高将领两次秘密致电中方</a
    71. 

  71.             >
    72. 

  72.           </li>
    73. 

  73.           <li>
    74. 

  74.             <a href="">英媒：消息人士称塔利班领导层为组建新*“大吵一架”</a>
    75. 

  75.           </li>
    76. 

  76.           <li>
    77. 

  77.             <a href=""
    78. 

  78.               >杀人灭口？以色列前总理腐败案证人意外死亡，引发各界猜测</a
    79. 

  79.             >
    80. 

  80.           </li>
    81. 

  81.           <li>
    82. 

  82.             <a href=""
    83. 

  83.               >印度将试射洲际弹道导弹，印媒制造矛盾：可覆盖中国多个内陆城市</a
    84. 

  84.             >
    85. 

  85.           </li>
    86. 

  86.         </ul>
    87. 

  87.       </article>
    88. 

  88.     </div>
    89. 

  89.     <style>
    90. 

  90.       .box {
    91. 

  91.         margin: 5em atuo;
    92. 

  92.         border: 2px solid #000;
    93. 

  93.         height: 320px;
    94. 

  94.         overflow: scroll;
    95. 

  95.         line-height: 2em;
    96. 

  96.       }
    97. 

  97.       .box article h2 {
    98. 

  98.         color: white;
    99. 

  99.         margin: 0;
    100. 

  100.         position: sticky;
    101. 

  101.         top: 0;
    102. 

  102.       }
    103. 

  103.       .box img {
    104. 

  104.         width: 4em;
    105. 

  105.         border-radius: 50%;
    106. 

  106.         box-shadow: 2px 2px 3px #666;
    107. 

  107.         position: fixed;
    108. 

  108.         right: 2em;
    109. 

  109.         top: 13em;
    110. 

  110.         z-index: 999;
    111. 

  111.       }
    112. 

  112.     </style>
    113. 

  113.   </body>
    114. 

  114. </html>
    115.

效果如下

绝对定位、固定定位及flex,grid属性

flex,grid属性

flex容器属性

  • flex-direction： row | row-reserve | column | column-reserve
  • flex-wrap: nowrap | warp | warp-reserve
  • flex-flow：[flex-direction] [ flex-warp]
  • justify-content：flex-start | flex-end | center | space-between | space-around
  • aline-items：flex-start | flex-end | center | baseline | stresch

grid容器属性

  • display ：grid
  • template-columns | grid-template-rows 网格的行和列
  • grid-template-areas 网格区域
  • grid-template <grid-template-rows> <grid-template-columns> <grid-template-areas>
  • grid-column-gap
  • grid-row-gap
  • grid-gap grid-colunm-gap/grid-row-gap
  • justify-items
  • align-items
  • place-items aline-items和justfy-items的缩写
  • justify-content
  • align-content
  • place-content align-content 和 justify-content 的简写
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow的简写

项目属性

  • order：数字
    自定义项目的排序

  • flex-grow：数字
    项目的放大比例

  • flex-shrink：数字
    项目缩小比例

  • flex-base：[length] | auto
    定义项目占据的主轴空间大小，默认为auto

  • flex：none | [flex-grow flex-shrink flex-base]
    flex是flex-grow、flex-shrink、flex-base的缩写，默认值为0 1 auto

  • align-self：auto | flex-start | flex-end | center | baseline | stretch
    允许单个项目有自己的对齐方式

上一篇： HTML常用元素样式、定位学习与应用

下一篇： axios 和vue

推荐阅读