简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >绝对定位、固定定位及flex容器

绝对定位、固定定位及flex容器

生活需要加油
生活需要加油原创
2023年02月09日 14:47:18367浏览

绝对定位、固定定位及flex容器

1. 绝对定位与固定定位,并描述联系与区别

1.1 绝对定位absolute

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>绝对定位及相对定位</title>
  8.   </head>
  9.   <body>
  10.     <ul>
  11.       <li class="relative">相对定位</li>
  12.       <li class="absolute">绝对定位</li>
  13.     </ul>
  15.     <style>
  16.       * {
  17.         margin: 0;
  18.         padding: 0;
  19.         box-sizing: border-box;
  20.       }
  21.       body {
  22.         border: 5px solid red;
  23.       }
  25.       ul {
  26.         width: 400px;
  27.         height: 300px;
  28.         border: 5px solid blue;
  29.       }
  30.       ul li {
  31.         height: 40px;
  32.         border: 1px solid black;
  33.         list-style: none;
  34.       }
  35.       ul li:first-child {
  36.         background-color: blue;
  37.       }
  38.       ul li:last-child {
  39.         background-color: yellow;
  40.       }
  41.       ul li.absolute {
  42.         position: absolute;
  43.         top: 70px;
  44.         left: 20px;
  45.       }
  46.       /* ul li.relative {
  47.         position: relative;
  48.         top: 10px;
  49.         left: 100px;
  50.       } */
  51.     </style>
  52.   </body>
  53. </html>

页面演示效果：
绝对定位

1.2 相对定位

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>绝对定位及相对定位</title>
  8.   </head>
  9.   <body>
  10.     <ul>
  11.       <li class="relative">相对定位</li>
  12.       <li class="absolute">绝对定位</li>
  13.     </ul>
  15.     <style>
  16.       * {
  17.         margin: 0;
  18.         padding: 0;
  19.         box-sizing: border-box;
  20.       }
  21.       body {
  22.         border: 5px solid red;
  23.       }
  25.       ul {
  26.         width: 400px;
  27.         height: 300px;
  28.         border: 5px solid blue;
  29.       }
  30.       ul li {
  31.         height: 40px;
  32.         border: 1px solid black;
  33.         list-style: none;
  34.       }
  35.       ul li:first-child {
  36.         background-color: blue;
  37.       }
  38.       ul li:last-child {
  39.         background-color: yellow;
  40.       }
  41.       ul li.absolute {
  42.         position: absolute;
  43.         /* top: 70px; */
  44.         /* left: 20px; */
  45.       }
  46.       ul li.relative {
  47.         position: relative;
  48.         top: 10px;
  49.         left: 100px;
  50.       }
  51.     </style>
  52.   </body>
  53. </html>

页面演示效果如下：
相对定位

2.flex容器、容器属性及项目属性

2.1 容器：

初始html代码及页面演示效果：
html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex布局及常用元素</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.       .container {
  17.         display: flex;
  18.         width: 500px;
  19.         height: 60px;
  20.         border: 1px solid black;
  21.         flex-flow: row nowrap;
  22.         place-content: start;
  23.       }
  24.       .container .item {
  25.         width: 100px;
  26.         height: 30px;
  27.         background-color: lightgreen;
  28.         border: 1px solid red;
  29.         text-align: center;
  30.       }
  31.     </style>
  32.   </body>
  33. </html>

页面演示效果：

2.2容器属性

2.2.1 place-content: 项目在”主轴”上的排列方式

  1. 右端靠齐
    1. .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 60px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: end;
    8.    }
  2. 二端对齐
    1. .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 60px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: space-between;
    8.    }
  3. 分散对齐
    1. .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 60px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: space-around;
    8.    }
  4. 平均对齐
    1. .container {
    2.     display: flex;
    3.     width: 500px;
    4.     height: 60px;
    5.     border: 1px solid black;
    6.     flex-flow: row nowrap;
    7.     place-content: space-evenly;
    8.   }

    2.2.2 place-items: 项目在”交叉轴”上的排列方式

  5. 顶部对齐

    1.  .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 100px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: start;
    8.      place-items: start;
    9.    }

  6. 底部对齐

    1.  .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 100px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: start;
    8.      place-items: end;
    9.    }

  7. 中间对齐

    1.  .container {
    2.      display: flex;
    3.      width: 500px;
    4.      height: 100px;
    5.      border: 1px solid black;
    6.      flex-flow: row nowrap;
    7.      place-content: start;
    8.      place-items: center;
    9.    }

    2.3 项目属性

    2.3.1 flex: 项目在”主轴”上的缩放比例与宽度

    flex: 放大比例 允许收缩 主轴空间

  8. flexflex: 0 1 auto;默认,不放大,但可以自动收缩 同flex:initial;
    1. <style>
    2.    .container {
    3.      display: flex;
    4.      width: 500px;
    5.      /* height: 100px; */
    6.      border: 1px solid black;
    7.      flex-flow: row nowrap;
    8.      place-content: start;
    9.      place-items: center;
    10.    }
    11.    .container .item {
    12.      width: 100px;
    13.      height: 150px;
    14.      background-color: lightgreen;
    15.      border: 1px solid red;
    16.      text-align: center;
    17.      flex: 0 1 auto;
    18.    }
  9. flex: 1 1 auto;完全响应式,允许放大和自动收缩 同flex:1;
  10. flex: 0 0 auto;完全不响应 同flex:none;

2.3.2 place-self 某项目在”交叉轴”上的排列方式

1 .place-self: start; 顶对齐

  1.    .container > .item:nth-of-type(2) {
  2.         background-color: yellow;
  3.         height: 50px;
  4.         place-self: start;
  5.       }

2 . place-self: end; 底对齐

3 . place-self: center;中间对齐

2.3.3 order: 项目在”主轴”上的排列顺序

默认每个项目的order = 0,至越大，排序越靠后（值也可为负值）
例如：将item2 order设为3

  1.  .container > .item:nth-of-type(2) {
  2.         background-color: yellow;
  3.         height: 50px;
  4.         place-self: end;
  5.         order: 3;
  6.       }

上一条：字体图标与媒体查询练习下一条：如何使用YonBuilder实现报表分析功能？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多