简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 绝对定位、固定定位及flex容器
Blogger Information
Blog 17
fans 0
comment 0
visits 6100
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
绝对定位、固定定位及flex容器
生活需要加油
Original
368 people have browsed it

绝对定位、固定定位及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.       }

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：作业完成的很细致
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！