简体中文（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

博客列表 >CSS学习之定位、flex标签及grid标签

CSS学习之定位、flex标签及grid标签

centos
centos原创
2021年10月07日 16:03:22691浏览

相对定位和绝对定位

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>
上一条：js基础知识二(分支、循环遍历、访问属性、增删)下一条：轮播图示例及购物车示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多