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

愿情的博客
愿情的博客原创
2021年03月26日 12:31:49980浏览

布局

1.传统定位布局：三行三列

  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.     <style>
  9.       :root {
  10.         /* 是为了布局的，在后面使用rem计算方便 */
  11.         font-size: 10px;
  12.       }
  13.       body *:not(.container) {
  14.         background-color: lightblue;
  15.       }
  16.       body {
  17.         /* 将字号恢复到16px */
  18.         /* font-size: 16px; */
  19.         font-size: 1.6rem;
  20.       }
  21.       header,
  22.       footer {
  23.         height: 5rem;
  24.         /* background-color: lightblue; */
  25.       }
  26.       /* 主体区：定位 */
  27.       .container {
  28.         /* 定位父级：转为定位元素 */
  29.         position: relative;
  30.         min-height: 60rem;
  31.         margin: 0.5rem;
  32.       }
  33.       .container aside {
  34.         width: 20rem;
  35.         /* background-color: lightblue; */
  36.         min-height: inherit;
  37.       }
  38.       .container aside,
  39.       .container main {
  40.         position: absolute;
  41.       }
  42.       /* 将右侧移动最右侧 */
  43.       .container aside:last-of-type {
  44.         right: 0;
  45.       }
  46.       /* 显示主体内容区 */
  47.       .container main {
  48.         left: 20.5rem;
  49.         right: 20.5rem;
  50.         /* background-color: red; */
  51.         min-height: inherit;
  52.       }
  53.       /* .container aside:last-of-type {
  54.          background-color: red;
  55.          width: 30rem; 
  56.        }*/
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <header>页眉</header>
  61.     <div class="container">
  62.       <aside>左侧</aside>
  63.       <main>内容区</main>
  64.       <aside>右侧</aside>
  65.     </div>
  66.     <footer>页脚</footer>
  67.   </body>
  68. </html>

2.flex来简化布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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来简化demo4: 三行三列</title>
  8.     <style>
  9.       :root {
  10.         /* 是为了布局的,在后面使用rem计算方便 */
  11.         font-size: 10px;
  12.       }
  13.       body {
  14.         /* 将字号恢复到16px */
  15.         /* font-size: 16px; */
  16.         font-size: 1.6rem;
  17.       }
  18.       body *:not(.container) {
  19.         background-color: lightblue;
  20.       }
  21.       header,
  22.       footer {
  23.         /* vh: 将页面的高度分为100份,1vh = 1 / 100 height  */
  24.         height: 8vh;
  25.       }
  27.       .container {
  28.         /* 100vh - 16vh = 84vh */
  29.         height: 84vh;
  31.         /* 使用flex */
  32.         display: flex;
  33.         margin: 0.5rem 0;
  34.       }
  36.       /* 侧边栏 */
  37.       .container aside {
  38.         min-width: 20rem;
  39.       }
  41.       /* 主体内容区 */
  42.       .container main {
  43.         margin: 0 0.5rem;
  44.         min-width: calc(100% - 40rem - 1rem);
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <header>页眉</header>
  50.     <div class="container">
  51.       <aside>左侧</aside>
  52.       <main>内容区</main>
  53.       <aside>右侧</aside>
  54.     </div>
  55.     <footer>页脚</footer>
  56.   </body>
  57. </html>

3.简化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>使用flex来简化：（传统布局：三行三列）</title>
  8.     <style>
  9.       :root {
  10.         /* 是为了布局的，在后面使用rem计算方便 */
  11.         font-size: 10px;
  12.       }
  13.       body {
  14.         /* 将字号恢复到16px */
  15.         /* font-size: 16px; */
  16.         font-size: 1.6rem;
  17.         height: 100vh;
  18.         display: grid;
  19.         grid-template-columns: 20rem 1fr 20rem;
  20.         grid-template-rows: 8vh 1fr 8vh;
  21.         gap: 0.5rem;
  22.       }
  24.       body * {
  25.         background-color: lightblue;
  26.       }
  27.       header,
  28.       footer {
  29.         grid-column: span 3;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <header>页眉</header>
  35.     <aside>左侧</aside>
  36.     <main>内容区</main>
  37.     <aside>右侧</aside>
  38.     <footer>页脚</footer>
  39.   </body>
  40. </html>
上一条：flex容器中的四个属性的功能，参数，以及作用下一条：flex布局理解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多