1. 定位的布局思路练习

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>定位的布局思路练习</title>
    7.  <!--
    8.      1.确定文档结构
    9.      2.样式的初始化
    10.      3.分块的样式设定
    11.  -->
    12.  <style>
    13.    * {
    14.      margin: 0;
    15.      padding: 0;
    16.      box-sizing: border-box;
    17.    }
    18.    header {
    19.      background-color: antiquewhite;
    20.      min-height: 10em;
    21.    }
    23.    .container {
    24.      min-height: 20em;
    25.      position: relative;
    26.      margin: 1em 0;
    27.    }
    28.    .container aside:first-of-type {
    29.      min-height: inherit;
    30.      width: 5em;
    31.      background-color: hotpink;
    32.      position: absolute;
    33.      top: 0;
    34.      left: 0;
    35.    }
    37.    .container aside:last-of-type {
    38.      min-height: inherit;
    39.      width: 5em;
    40.      background-color: darkgoldenrod;
    41.      position: absolute;
    42.      top: 0;
    43.      right: 0;
    44.    }
    46.    .container main {
    47.      min-height: inherit;
    48.      background-color: darkmagenta;
    49.      /* padding: 0 5em; */
    50.      position: absolute;
    51.      left: 5em;
    52.      right: 5em;
    53.      margin: 0 0.5em;
    54.    }
    55.    footer {
    56.      background-color: aquamarine;
    57.      min-height: 10em;
    58.    }
    59.  </style>
    60. </head>
    61. <body>
    62.  <header>头部</header>
    63.  <div class="container">
    64.    <aside>左侧</aside>
    65.    <main>主题</main>
    66.    <aside>右侧</aside>
    67.  </div>
    68.  <footer>尾部</footer>
    69. </body>
    70. </html>

  2. flex实现水平和垂直居中

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>flex实现水平和垂直居中</title>
    7.  <style>
    8.    .box {
    9.      width: 15em;
    10.      height: 15em;
    11.      background-color: aquamarine;
    12.      position: relative;
    13.    }
    14.    .box .item {
    15.      width: 5em;
    16.      height: 5em;
    17.      background-color: yellow;
    18.      position: absolute;
    19.    }
    20.    /* .box .item {
    21.      width: 5em;
    22.      height: 5em;
    23.      background-color: yellow;
    24.      position: absolute;
    25.      left: 0;
    26.      top: 0;
    27.      right: 0;
    28.      bottom: 0;
    29.      margin: auto;
    30.    } */
    32.    .box {
    33.      display: flex;
    34.      justify-content: center;
    35.      align-items: center;
    36.    }
    37.  </style>
    38. </head>
    39. <body>
    40.  <div class="box">
    41.    <div class="item"></div>
    42.  </div>
    43. </body>
    44. </html>

  3. 用flex写三列

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>flex写三列</title>
    7.  <style>
    8.    * {
    9.      box-sizing: border-box;
    10.    }
    11.    /*实体元素改色可见*/
    12.    body *:not(.container) {
    13.      background-color: antiquewhite;
    14.    }
    16.    header,
    17.    footer {
    18.      height: 10vh;
    19.    }
    21.    .container {
    22.      height: calc(80vh - 1em);
    23.      margin: 0.5em 0;
    24.      display: flex;
    25.    }
    27.    .container aside {
    28.      min-width: 15em;
    29.    }
    31.    .container main {
    32.      min-width: calc(100vw - 30em - 2em);
    33.      margin: 0 1em;
    34.    }
    35.  </style>
    36. </head>
    37. <body>
    38.  <header>头部</header>
    39.  <div class="container">
    40.    <aside>左侧</aside>
    41.    <main>主题</main>
    42.    <aside>右侧</aside>
    43.  </div>
    44.  <footer>尾部</footer>
    45. </body>
    46. </html>

  4. grid写三行三列

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>grid写三行三列</title>
    7.  <style>
    8.    body {
    9.      height: 100vh;
    10.      display: grid;
    11.      grid-template-columns: 10em 1fr 10rem;
    12.      grid-template-rows: 10vh 1fr 10vh;
    13.      gap: 0.5em;
    14.    }
    16.    body > * {
    17.      background-color: aqua;
    18.    }
    20.    header,
    21.    footer {
    22.      grid-column: span 3;
    23.    }
    24.  </style>
    25. </head>
    26. <body>
    27.  <header>头部</header>
    29.  <aside>左侧</aside>
    30.  <main>主题</main>
    31.  <aside>右侧</aside>
    33.  <footer>尾部</footer>
    34. </body>
    35. </html>

  5. 弹性容器与子项目

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>弹性容器与子项目</title>
    7.  <style>
    8.    * {
    9.      box-sizing: border-box;
    10.    }
    11.    .container {
    12.      display: flex;
    13.      height: 20em;
    14.      padding: 1em;
    15.      border: 1em dotted blue;
    16.    }
    17.    .item {
    18.      width: 10em;
    19.      height: 6em;
    20.      border: 1px solid red;
    21.    }
    23.    .item:last-of-type {
    24.      display: flex;
    25.    }
    27.    .subitem {
    28.      border: 2px dashed green;
    29.    }
    30.  </style>
    31. </head>
    33. <body>
    34.  <div class="container">
    35.    <div class="item">item1</div>
    36.    <div class="item">item2</div>
    37.    <div class="item">
    38.      item3
    39.      <div class="subitem">subitem1</div>
    40.      <div class="subitem">subitem2</div>
    41.      <div class="subitem">subitem3</div>
    42.    </div>
    43.  </div>
    44. </body>
    45. </html>
  6. 项目的排列和换行
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>项目的排列和换行</title>
    7.  <style>
    8.    .container {
    9.      display: flex;
    10.      /* flex-direction: row;
    11.      flex-wrap: wrap; */
    12.      flex-flow: row wrap;
    13.      height: 20em;
    14.      /* width: 10em; */
    15.      padding: 1em;
    16.      border: 2px solid green;
    17.    }
    18.    .item {
    19.      width: 5em;
    20.      height: 4em;
    21.      border: 1px solid red;
    22.    }
    23.  </style>
    24. </head>
    25. <body>
    26.  <div class="container">
    27.    <div class="item">item1</div>
    28.    <div class="item">item2</div>
    29.    <div class="item">item3</div>
    30.    <div class="item">item4</div>
    31.    <div class="item">item5</div>
    32.    <div class="item">item6</div>
    33.    <div class="item">item7</div>
    34.    <div class="item">item8</div>
    35.  </div>
    36. </body>
    37. </html>

  7. 项目在容器内的横纵对齐方式

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>项目在容器内的横纵对齐方式</title>
    7.  <!--
    8.      对齐解决的是项目和留白区域的划分
    9.      1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
    10.  -->
    11.  <style>
    12.    .container {
    13.      display: flex;
    14.      /* flex-direction: row;
    15.      flex-wrap: wrap; */
    16.      flex-flow: row wrap;
    17.      height: 20em;
    18.      /* width: 10em; */
    19.      padding: 1em;
    20.      border: 2px solid green;
    21.    }
    22.    .item {
    23.      width: 5em;
    24.      height: 4em;
    25.      border: 1px solid red;
    26.    }
    27.    .container {
    28.      /*主轴上的对齐方式,水平移动*/
    30.      /*1.所有项目无间隙排列*/
    31.      justify-content: flex-start;
    32.      justify-content: flex-end;
    33.      justify-content: center;
    34.      /*2.每个项目左右都有间隙*/
    35.      justify-content: space-around;
    36.      justify-content: space-between;
    37.      justify-content: space-evenly;
    39.      /*交叉轴上的对齐,垂直移动*/
    40.      align-items: stretch;
    41.      align-items: flex-start;
    42.      align-items: flex-end;
    43.      align-items: center;
    44.    }
    45.  </style>
    46. </head>
    47. <body>
    48.  <div class="container">
    49.    <div class="item">item1</div>
    50.    <div class="item">item2</div>
    51.    <div class="item">item3</div>
    52.    <div class="item">item4</div>
    53.    <div class="item">item5</div>
    54.    <div class="item">item6</div>
    55.    <div class="item">item7</div>
    56.  </div>
    57. </body>
    58. </html>

  8. 多行项目在容器内的横纵对齐方式

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>多行项目在容器内的横纵对齐方式</title>
    7.  <!--
    8.      对齐解决的是项目和留白区域的划分
    9.      1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
    10.  -->
    11.  <style>
    12.    .container {
    13.      display: flex;
    14.      /* flex-direction: row;
    15.      flex-wrap: wrap; */
    16.      flex-flow: row wrap;
    17.      height: 20em;
    18.      /* width: 10em; */
    19.      padding: 1em;
    20.      border: 2px solid green;
    21.    }
    22.    .item {
    23.      width: 5em;
    24.      height: 4em;
    25.      border: 1px solid red;
    26.    }
    27.    .container {
    28.      /*主轴上的对齐方式,水平移动*/
    30.      /*1.所有项目无间隙排列*/
    31.      justify-content: flex-start;
    32.      justify-content: flex-end;
    33.      justify-content: center;
    34.      /*2.每个项目左右都有间隙*/
    35.      /* justify-content: space-around;
    36.      justify-content: space-between;*/
    37.      justify-content: space-evenly;
    39.      /*交叉轴上的对齐,垂直移动*/
    40.      /*align-items先切割成多行,然后处理每行的交叉轴对齐*/
    41.      align-items: stretch;
    42.      align-items: flex-start;
    43.      align-items: flex-end;
    44.      /* align-items: center; */
    46.      /*多行项目沿交叉轴无间隙,整体移动*/
    47.      /* align-content: flex-end;
    48.      align-content: flex-start; */
    49.      /* align-content: center; */
    51.      /*多行项目沿交叉轴有间隙调整*/
    52.      /* align-content: space-between;
    53.      align-content: space-evenly;*/
    54.      align-content: space-around;
    55.    }
    56.  </style>
    57. </head>
    58. <body>
    59.  <div class="container">
    60.    <div class="item">item1</div>
    61.    <div class="item">item2</div>
    62.    <div class="item">item3</div>
    63.    <div class="item">item4</div>
    64.    <div class="item">item5</div>
    65.    <div class="item">item6</div>
    66.    <div class="item">item7</div>
    67.    <div class="item">item8</div>
    68.    <div class="item">item9</div>
    69.    <div class="item">item10</div>
    70.    <div class="item">item11</div>
    71.    <div class="item">item12</div>
    72.  </div>
    73. </body>
    74. </html>

  9. 项目的flex属性\order属性\align-self属性

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>项目的flex属性\order属性\align-self属性</title>
    7.  <!--改变项目大小\交叉轴对齐\在容器中的顺序-->
    8.  <style>
    9.    .container {
    10.      display: flex;
    11.      /* flex-direction: row;
    12.                  flex-wrap: wrap; */
    13.      flex-flow: row nowrap;
    14.      height: 20em;
    15.      /* width: 10em; */
    16.      padding: 1em;
    17.      border: 2px solid green;
    18.    }
    19.    .item {
    20.      width: 5em;
    21.      /* height: 4em; */
    22.      border: 1px solid red;
    23.    }
    24.    .container .item {
    25.      /* 默认值 */
    26.      flex: 0 1 auto;
    27.      flex: initial;
    28.      /*允许放大*/
    29.      flex: 1 1 auto;
    30.      flex: auto;
    31.      flex: 1;
    32.      /*禁止放大和缩小*/
    33.      flex: 0 0 auto;
    34.      flex: none;
    35.      /*test*/
    37.      flex: 3;
    38.    }
    40.    .container > .item:last-of-type,
    41.    .container > .item:nth-of-type(2) {
    42.      flex: 1;
    43.    }
    45.    /*设置某一个项目在交叉轴上的对齐方式*/
    46.    .container > .item:first-child {
    47.      align-self: flex-start;
    48.    }
    49.    /*项目的order属性*/
    51.    .container .item:nth-child(2) {
    52.      order: -1;
    53.    }
    54.  </style>
    55. </head>
    57. <body>
    58.  <div class="container">
    59.    <div class="item">item1</div>
    60.    <div class="item">item2</div>
    61.    <div class="item">item3</div>
    62.    <div class="item">item4</div>
    63.    <div class="item">item5</div>
    64.    <div class="item">item6</div>
    65.    <div class="item">item7</div>
    66.    <div class="item">item8</div>
    67.    <div class="item">item9</div>
    68.  </div>
    69. </body>
    70. </html>

更多相关文章

  1. 一套简单通用的Java后台管理系统，拿来即用，非常方便（附项目地址）
  2. 为什么项目中用了JOOQ后大家都不愿再用Mybatis？
  3. 程序员翻车时的 30 种常见反应！
  4. 2020 岁末总结
  5. 小技巧：SpringBoot项目如何让前端开发提高效率？
  6. 13个优质的 SpringBoot 、SpringCloud实战项目推荐！太强了！
  7. beego项目和go项目 打包部署到linux
  8. Python主讲移动端自动化测试框架Appium 从基础到项目实战
  9. 【干货分享】硬件加速介绍及Cyborg项目代码分析

随机推荐

  1. 详解 Go 语言中的方法
  2. 教你导入golang.org的包
  3. golang是多线程模式吗？
  4. Go如何使用websocket实现弹幕功能
  5. golang是单进程的吗？
  6. golang如何释放map内存？
  7. 代码详解使用Go基于WebSocket构建视频直
  8. golang如何处理输入？
  9. PHP语法和Go语法有什么差异？对比介绍
  10. golang如何调用函数？