简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS学习之定位、flex标签及grid标签
Blogger Information
Blog 28
fans 0
comment 1
visits 13314
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
CSS学习之定位、flex标签及grid标签
centos
Original
702 people have browsed it

相对定位和绝对定位

position的属性值有static、relative、absolute、fiexd,其中static是默认值，忽略top、bottom、left、right属性值，relative是相对定位，absolute是相对于父级元素定位，fiexd是相对于浏览器定位。

示例：

  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.   <style>
  10.     .box {
  11.       border: 1px solid #000;
  12.       display: inline-block;
  13.     }
  14.     .box.one {
  15.       width: 15em;
  16.       height: 15em;
  17.       background-color: red;
  18.     }
  19.     .box.two {
  20.       width: 10em;
  21.       height: 10em;
  22.       background-color: blue;
  23.     }
  24.     .box.three {
  25.       width: 5em;
  26.       height: 5em;
  27.       background-color: yellow;
  28.     }
  29.     /* 相对定位 */
  30.     .two {
  31.       position: relative;
  32.       left: 5em;
  33.       top: 1em;
  34.     }
  35.     .three {
  36.       /* static可以忽略top\bottom\left\right */
  37.       /* position: static;
  38.       top: 100px;
  39.       /* absolute是绝对定位，相对于元素的上级元素；position:fixed是相对于浏览器窗口 */
  40.       position: absolute;
  41.       top: 5em;
  42.       left: 3em;
  43.       /* position: fixed;
  44.       left: 10em; */
  45.       /* relative是相对定位，是相对于自己的元素进行移动 */
  46.       position: relative;
  47.       left: 5em;
  48.       top: 1em;
  49.     }
  50.   </style>
  51.   <body>
  52.     <div class="box one">
  53.       <div class="box two">
  54.         <div class="box three"></div>
  55.       </div>
  56.     </div>
  57.   </body>
  58. </html>

演示效果：演示效果

Flex布局

  1. flex常用属性值及属性值
    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. <style>
    10.  .box {
    11.    margin: 0;
    12.    padding: 0;
    13.    box-sizing: border-box;
    14.    font-size: 12px;
    15.    width: 20rem;
    16.    height: 10rem;
    17.    border: 1px solid #000;
    18.    /* flex布局 */
    19.    display: flex;
    20.    /* !1.flex-flow的属性值，
    21.    主轴方向：row--X轴 column是Y轴 row-reverse  X轴的右边开始
    22.    是否换行： wrap 可以换行  nowrap不可以换行
    23.    是flex-direction和flex-wrap的缩写*/
    24.    flex-flow: row nowrap;
    25.    /* place-content: 控制容器的剩余空间在项目之间的分配;也就是从那边开始排列
    26.    效果类似于justify-content*/
    27.    place-content: start;
    28.    place-content: end;
    29.    /* 居中 */
    30.    place-content: center;
    31.    /* 两端对其 */
    32.    /* justify-content: space-between; //属性值两个都适用 */
    33.    /* 分散对其 */
    34.    place-content: space-around;
    35.    /* 平均分配 */
    36.    place-content: space-evenly;
    37.    justify-content: space-evenly;
    38.    /* 交叉轴的对其方式 */
    39.    place-items: start;
    40.    place-items: end;
    41.    place-items: center;
    42.  }
    43.  .box.one {
    44.    width: 5rem;
    45.    height: auto;
    46.    background-color: pink;
    47.  }
    48.  .box.two {
    49.    width: 5rem;
    50.    height: auto;
    51.    background-color: pink;
    52.  }
    53.  .box.three {
    54.    width: 5rem;
    55.    height: auto;
    56.    background-color: pink;
    57.  }
    58. </style>
    59. <body>
    60.  <div class="box">
    61.    <div class="box one">box1</div>
    62.    <div class="box two">box2</div>
    63.    <div class="box three">box3</div>
    64.  </div>
    65. </body>
    66. </html>
  2. 响应式布局
    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. <style>
    10.  /* 1容器设定 */
    11.  .box {
    12.    width: auto;
    13.    height: 10em;
    14.    border: 1px solid #000;
    15.    display: flex;
    16.  }
    17.  /* 项目设定 */
    18.  .box > .item {
    19.    width: 20em;
    20.    height: auto;
    21.    border: 1px solid #000;
    22.    background-color: pink;
    23.    /* felx默认能缩小不能放大，默认值0 1
    24.    1 0 代表能放大不能缩小
    25.    1 1是响应式
    26.    等价于flex:auto*/
    27.    flex: 1 1 auto;
    28.    flex: auto;
    29.  }
    30.  /* 三列布局，左右固定，中间自适应 */
    31.  .box .item:first-of-type,
    32.  .item:last-of-type {
    33.    /* flex-basis主轴宽度，级别高于width; */
    34.    flex-basis: 1em;
    35.    /* width: 2em; */
    36.    height: auto;
    37.    background-color: red;
    38.  }
    39.  .box .item:first-of-type + .item {
    40.    flex: 1;
    41.    background-color: black;
    42.  }
    43.  /* 每个项目的默认值为0，修改order值可以修改排序 */
    44.  .box .item:first-of-type {
    45.    order: -1;
    46.  }
    47.  /* .box .item:last-of-type {
    48.    order: -1;
    49.  } */
    50. </style>
    51. <body>
    52.  <div class="box">
    53.    <div class="item">item1</div>
    54.    <div class="item">item2</div>
    55.    <div class="item">item3</div>
    56.  </div>
    57. </body>
    58. </html>

grid布局

与flex相比，grid更使用于二维布局

  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>grid练习</title>
  8.   </head>
  9.   <style>
  10.     /* 容器样式设定 */
  11.     .box {
  12.       width: 30rem;
  13.       height: 30rem;
  14.       background-color: yellow;
  15.       border: 1px solid #000;
  16.     }
  17.     /* 项目样式设定 */
  18.     .box > .item {
  19.       width: 3rem;
  20.       height: 3rem;
  21.       background-color: pink;
  22.       border: 1px solid #000;
  23.       text-align: center;
  24.     }
  25.     /* 启用grid布局 */
  26.     .box {
  27.       display: grid;
  28.       /* 新单位fr,百分比 */
  29.       grid-template-columns: repeat(3, 1fr);
  30.       grid-template-rows: repeat(3, 1fr);
  31.       /* place-items是指item的轴向排列开始顺序，属性值为：place-items:垂直 水平，值有
  32.       start end center */
  33.       place-items: center;
  34.     }
  35.     /* grid-area: 行开始/列开始/行结束/列结束 */
  36.     .box > .item:nth-last-of-type(5) {
  37.       grid-area: 3 / 1 / span 1 / span 3;
  38.       background-color: green;
  39.     }
  40.   </style>
  41.   <body>
  42.     <div class="box">
  43.       <div class="item">item01</div>
  44.       <div class="item">item02</div>
  45.       <div class="item">item03</div>
  46.       <div class="item">item04</div>
  47.       <div class="item">item05</div>
  48.       <div class="item">item06</div>
  49.       <div class="item">item07</div>
  50.       <div class="item">item08</div>
  51.       <div class="item">item09</div>
  52.     </div>
  53.   </body>
  54. </html>
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！