定位布局的常用思路 代码

  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.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 页眉页脚 */
  15.         header,footer {
  16.             height: 3em;
  17.             background-color: lightgreen;
  18.         }
  19.         /* 主体部分采用绝对定位 */
  20.         .container {
  21.             /* 定位元素 */
  22.             position: relative;
  23.             min-height: 40em;
  25.             margin: 0.5em 0;
  26.         }
  27.         .container aside {
  28.             width: 15em;
  29.             background-color: lightskyblue;
  30.             min-height: inherit;
  31.         }
  32.         /* 左中右全部进行绝对定位 */
  33.         .container aside:first-of-type{
  34.             position: absolute;
  35.             top: 0;
  36.             left: 0;
  37.         }
  38.         .container aside:last-of-type{
  39.             position: absolute;
  40.             top: 0;
  41.             right: 0;
  42.         }
  43.         .container main{
  44.             min-height: inherit;
  45.             position: absolute;
  46.             background-color: yellow;
  47.             /* padding: 0 15em; */
  48.             left: 15.5em;
  49.             right: 15.5em;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <header>页眉</header>
  55.     <div class="container">
  56.         <aside>左侧</aside>
  57.         <main>内容区</main>
  58.         <aside>右侧</aside>
  59.     </div>
  60.     <footer>页脚</footer>
  61. </body>
  62. </html>

效果：

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: lightseagreen;
  12.             /* position: relative; */
  13.         }
  14.         .box .item {
  15.             width: 5em;
  16.             height: 5em;
  17.             background-color: coral;
  18.         }
  20.         /* .box .item {
  21.             position: absolute;
  22.             top: 0;
  23.             left: 0;
  24.             right: 0;
  25.             bottom: 0;
  26.             margin: auto;
  27.         } */
  28.         .box {
  29.             display: flex;
  30.             justify-content: center;
  31.             align-items: center;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="box">
  37.         <div class="item">
  39.         </div>
  40.     </div>
  41. </body>
  42. </html>

效果：

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.         /* 从body的所有后代匹配的元素中，去掉某些元素 */
  9.         body *:not(.container) {
  10.             background-color: lightseagreen;
  11.         }
  13.         header,
  14.         footer {
  15.             height: 8vh;
  16.         }
  18.         .container {
  19.             display: flex;
  20.             margin: 0.5em 0;
  21.             height: calc(84vh - 2em);
  22.         }
  24.         .container aside {
  25.             min-width: 15em;
  26.         }
  28.         .container main {
  29.             min-width: calc(100% - 30em - 1em);
  30.             margin: 0 0.5em;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <header>页眉</header>
  36.     <div class="container">
  37.         <aside>左侧</aside>
  38.         <main>内容区</main>
  39.         <aside>右侧</aside>
  40.     </div>
  41.     <footer>页脚</footer>
  42. </body>
  43. </html>

效果：

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: calc(100vh - 1em);
  10.             display: grid;
  11.             grid-template-columns: 15em 1fr 15em;
  12.             grid-template-rows: 8vh 1fr 8vh;
  13.             gap: 0.5em;
  14.         }
  15.         header, footer {
  16.             grid-column: span 3;
  17.         }
  18.         body>*{
  19.             background-color: lightseagreen;
  20.         }
  21.         /* grid 虽然强大无比，但不代表到处都要用到它，它更适合整体／宏观布局，而flex适合细节处理 */
  22.     </style>
  23. </head>
  24. <body>
  25.     <header>页眉</header>
  26.     <aside>左侧</aside>
  27.     <main>内容区</main>
  28.     <aside>右侧</aside>
  29.     <footer>页脚</footer>
  30. </body>
  31. </html>

效果：

弹性容器与弹性项目 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container>.item {
  20.             height: 2em;
  21.             width: 5em; 
  22.             background-color: lightcyan;
  23.             border: 1px solid black;
  24.         }
  25.         /* 1.任何元素都可以通过添加display: flex属性，转为弹性盒元素
  26.         2.转为flex元素后，它的内部的“子元素”就支持flex布局了
  27.         3.使用了display: flex属性的元素称为: flex容器
  28.         4.flex 容器中的“子元素”称为: flex项目
  29.         5.容器中的项目自动转为“行内块元素”(不管之前是什么类型) */
  30.         .container>.item:nth-child(4) {
  31.             display: flex;
  32.         }
  33.         .container>.item:nth-child(4)>div{
  34.             background-color: yellow;
  35.         }
  36.         /* 工作中会存在大量的flex容器的嵌套布局 */
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="container">
  41.         <div class="item">item1</div>
  42.         <div class="item">item2</div>
  43.         <div class="item">item3</div>
  44.         <div class="item">item4
  45.             <div>1</div>
  46.             <div>2</div>
  47.             <div>3</div>
  48.         </div>
  49.     </div> 
  50. </body>
  51. </html>

效果：

弹性项目在主轴上的排列方式 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container>.item {
  20.             width: 5em; 
  21.             height: 5em;
  22.             background-color: lightcyan;
  23.             border: 1px solid black;
  24.         }
  25.         /* 1.单行容器 */
  26.         .container {
  27.             /* flex-direction: row;
  28.             flex-wrap: nowrap; */
  29.             flex-flow: row nowrap;
  30.         }
  31.         /* 2.多行容器：一行显示不下，允许换行显示 */
  32.         .container {
  33.             flex-flow: row wrap;
  34.         }
  35.         .container {
  36.             flex-flow: column nowrap;
  37.             flex-flow: column wrap;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="container">
  43.         <div class="item">item1</div>
  44.         <div class="item">item2</div>
  45.         <div class="item">item3</div>
  46.         <div class="item">item4</div>
  47.         <div class="item">item5</div>
  48.         <div class="item">item6</div>
  49.         <div class="item">item7</div>
  50.         <div class="item">item8</div>
  51.     </div> 
  52. </body>
  53. </html>

效果：

弹性项目在单行上的对齐方式 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container>.item {
  20.             width: 5em; 
  21.             /* height: 5em; */
  22.             background-color: lightcyan;
  23.             border: 1px solid black;
  24.         }
  25.         /* 设置项目在单行容器主轴上的对齐前提：主轴上存在剩余空间 */
  28.         .container {
  29.             /* flex-flow: row nowrap; */
  31.             /* 空间分配二种方案: */
  32.             /* 1.将所有项目视为一个整体，在项目组二边进行分配 */
  33.             justify-content: flex-start;
  34.             justify-content: flex-end;
  35.             justify-content: center;
  37.             /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
  38.             /* 二端对齐 */
  39.             justify-content: space-between;
  40.             /* 分散对齐 */
  41.             justify-content: space-around;
  42.             /* 平均对齐 */
  43.             justify-content: space-evenly;
  44.         }
  45.         /* 交叉轴上的对齐方式 */
  46.         .container {
  47.             /* 默认拉伸 */
  48.             align-items: stretch;
  49.             align-items: flex-start;
  50.             align-items: flex-end;
  51.             align-items: center;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="container">
  58.         <div class="item">item1</div>
  59.         <div class="item">item2</div>
  60.         <div class="item">item3</div>
  61.         <div class="item">item4</div>
  62.     </div> 
  63. </body>
  64. </html>

效果：

弹性项目在多行上的对齐方式 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container>.item {
  20.             width: 5em; 
  21.             /* height: 5em; */
  22.             background-color: lightcyan;
  23.             border: 1px solid black;
  24.         }
  26.         .container {
  27.             flex-flow: row wrap;
  29.             align-content: stretch;
  30.             align-content: flex-start;
  31.             align-content: flex-end;
  32.             align-content: center;
  34.             align-content: space-between;
  35.             align-content: space-around;
  36.             align-content: space-evenly;
  37.         }
  39.         /* 容器属性：
  40.         flex-flow: 主轴方向与换行
  41.         justify-content: 项目在主轴上的对齐方式
  42.         align-items:项目在交叉轴上的对齐方式
  43.         align-content: 项目在多行容器中的交叉轴上的对齐方式 */
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="item">item1</div>
  49.         <div class="item">item2</div>
  50.         <div class="item">item3</div>
  51.         <div class="item">item4</div>
  52.         <div class="item">item5</div>
  53.         <div class="item">item6</div>
  54.         <div class="item">item7</div>
  55.         <div class="item">item8</div>
  56.         <div class="item">item9</div>
  57.         <div class="item">item10</div>
  58.         <div class="item">item11</div>
  59.         <div class="item">item12</div>
  60.     </div> 
  61. </body>
  62. </html>

效果：

项目上的属性: 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.         .container {
  12.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  18.         }
  19.         .container>.item {
  20.             width: 5em; 
  21.             /* height: 5em; */
  22.             background-color: lightcyan;
  23.             border: 1px solid black;
  24.         }
  25.        /* 项目属性flex */
  26.        .container .item {
  27.            /* flex: flex-grow flex-shrink flex-basis */
  28.            /* flex: 放大因子  收缩因子 项目在主轴上的基准宽度 */
  29.            flex: 0 1 auto;
  30.            flex: initial;
  32.             /* 允许放大和收缩 */
  33.            flex: 1 1 auto;
  34.            flex: auto;
  36.            /* 禁止放大和收缩 */
  37.            flex: 0 0 auto;
  38.            flex: none;
  40.            /* 如果只有一个数字，省掉后面二个参数，表示的放大因子 */
  41.            flex: 1;
  42.            /* 等于 flex: 1 1 auto; */
  43.            flex: 2;
  44.            flex: 3;
  46.            /* flex 通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征 */
  48.        }
  50.        /* 写一个案例，要求第2个 和 第3个项目的宽度是第1个和第4个2倍 */
  51.        .container>.item:first-of-type,
  52.        .container>.item:last-of-type {
  53.            flex: 1;
  54.        }
  55.        .container>.item:nth-of-type(2),
  56.        .container>.item:nth-of-type(2)+* {
  57.            flex: 2; 
  58.        }
  59.     </style>
  60. </head>
  61. <body>
  62.     <div class="container">
  63.         <div class="item">item1</div>
  64.         <div class="item">item2</div>
  65.         <div class="item">item3</div>
  66.         <div class="item">item4</div>
  68.     </div> 
  69. </body>
  70. </html>

效果：

设置某一个项目在交叉轴上的对齐方式 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  19.             position: relative;
  20.         }
  21.         .container>.item {
  22.             width: 5em; 
  23.             /* height: 5em; */
  24.             background-color: lightcyan;
  25.             border: 1px solid black;
  26.         }
  27.        /* 例如设置第2个项目与其它项目的对齐方式不一样 */
  28.        .container>.item:nth-of-type(2){
  29.            align-self: stretch;
  30.            align-self: flex-start;
  31.            align-self: flex-end;
  32.            align-self: center;
  34.            /* position: relative; */
  35.            position: absolute;
  36.            left: -2em;
  37.            top: 3em;
  39.        }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="item">item1</div>
  45.         <div class="item">item2</div>
  46.         <div class="item">item3</div>
  47.         <div class="item">item4</div>
  49.     </div> 
  50. </body>
  51. </html>

效果：

设置项目在主轴上的显示顺序 代码

  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.             /* 转为flex弹性布局元素 */
  13.             display: flex;
  14.             height: 15em;
  15.             border: 1px solid black;
  16.             padding: 1em;
  17.             margin: 1em;
  19.             position: relative;
  20.         }
  21.         .container>.item {
  22.             width: 5em; 
  23.             /* height: 5em; */
  24.             background-color: lightcyan;
  25.             border: 1px solid black;
  26.         }
  27.         /* 显示顺序：默认按书写的源码顺序排列 */
  28.         /* 默认序号越小越靠前,越大越靠后 */
  29.        .container>.item:first-of-type {
  30.            order: 1;
  31.            order: 5;
  32.             background-color: violet;
  33.        }
  34.        .container>.item:nth-of-type(2) {
  35.             order: 2;
  36.             background-color:turquoise;
  37.         }
  38.         .container>.item:nth-of-type(3) {
  39.             order: 3;
  40.             order: 0;
  41.             background-color: royalblue;
  42.         }
  43.         .container>.item:nth-of-type(4) {
  44.             order: 4;
  45.             /* 支持负值 */
  46.             order: -1;
  47.             background-color: green;
  48.         }
  49.         /* 项目常用属性:
  50.         flex: 设置基本项目的伸缩与宽度
  51.         align-self: 某个项目的对齐方式
  52.         order: 设置某个项目在主轴上的排列顺序 */
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="container">
  57.         <div class="item">item1</div>
  58.         <div class="item">item2</div>
  59.         <div class="item">item3</div>
  60.         <div class="item">item4</div>
  62.     </div> 
  63. </body>
  64. </html>

效果：

总结:

定位布局的常用思路:

  • 页眉,主体(左侧，内容区，右侧),页脚

弹性盒元素:

  • 通过添加display: flex属性来转换 (子元素自动转为“行内块元素”)

flex容器:

  • 使用了display: flex属性的元素 (flex容器可以嵌套)

flex项目:

  • flex 容器中的“子元素”

容器属性：

  • flex-flow: 主轴方向与换行
  • justify-content: 项目在主轴上的对齐方式
  • align-items:项目在交叉轴上的对齐方式
  • align-content: 项目在多行容器中的交叉轴上的对齐方式

单行容器:

  • flex-flow: row nowrap;

多行容器：

  • 一行显示不下，允许换行显示 flex-flow（row wrap 或 column wrap）

单行容器主轴上的对齐: justify-content (设置项目在单行容器主轴上的对齐前提：主轴上存在剩余空间)

  • 1.将所有项目视为一个整体，在项目组二边进行分配 (flex-start, flex-end, center)
  • 2.将项目视为一个个独立的个体，在项目之间进行分配 (space-between, space-around, space-evenly)

交叉轴上的对齐方式: align-items

  • ( stretch, flex-start, flex-end, center )

项目常用属性:

  • flex: 设置基本项目的伸缩与宽度
  • align-self: 某个项目的对齐方式
  • order: 设置某个项目在主轴上的排列顺序

flex属性: flex-grow(放大因子) flex-shrink(收缩因子) flex-basis(项目在主轴上的基准宽度)

  • 默认：flex: 0 1 auto; flex: initial;
  • 允许放大和收缩：flex: 1 1 auto; flex: auto;
  • 禁止放大和收缩： flex: 0 0 auto; flex: none;
  • 如果只有一个数字，省掉后面二个参数，表示的放大因子：flex: 1;等于 flex: 1 1 auto;

设置某一个项目在交叉轴上的对齐方式: align-self

  • ( stretch, flex-start, flex-end, center )

设置项目在主轴上的显示顺序: order

  • 1.显示顺序：默认按书写的源码顺序排列
  • 2.序号越小越靠前,越大越靠后
  • 3.支持负值

更多相关文章

  1. 【硬核干货】如何高效找到优质编程项目？
  2. 【每日一练】PMP项目管理专业资格认证考试练习题（五十二）
  3. grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组
  4. 实战项目：用原生JS实现一个购物车的功能
  5. 程序员入门之路
  6. React16.8+Next.js+Koa2开发Github全栈项目
  7. Laravel重构企业级电商项目 全面强化职场核心竞争力
  8. Go微服务入门到容器化实践，落地可观测的微服务电商项目【完结】
  9. 毕设一课通 从开题到答辩高效完成（含全栈项目）

随机推荐

  1. 我用的mysqlcc，我想看别人执行过哪些语句
  2. 今天看了一整天的汇编语言，真发现语言这东
  3. navicat+for+mysql破解版
  4. MySQL Packets larger than max_allowed_
  5. 如果在两个模式中存在具有相似名称的删除
  6. 如何利用SQL语句查询数据库中所有表的名
  7. 无法从SQLite数据库获取最后一行
  8. java eclipse连接并且操作mysql数据库详
  9. 是否遇到过MySQL workbench text字段不能
  10. MySQL 5.7中的未知列