Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制
Blogger Information
Blog 16
fans 2
comment 0
visits 20070
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
基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制
肖傲的博客
Original
987 people have browsed it

一.浮动方式的布局

  1. < !DOCTYPE html>
  2. <html lang="en">
  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.       header,
  9.       footer,
  10.       aside,
  11.       main {
  12.         /* 设置背景色 */
  13.         background-color: rgb(119, 116, 116);
  14.       }
  15.       header,
  16.       footer {
  17.         height: 50px;
  18.       }
  19.       aside,
  20.       main {
  21.         min-height: 700px;
  22.       }
  23.       .box {
  24.         width: 1000px;
  25.         border: 1px solid rgb(224, 135, 135);
  26.         /* 内容区外的不显示，解决高度塌陷问题 */
  27.         overflow: hidden;
  28.         /* 居中显示 */
  29.         margin: 10px auto;
  30.       }
  31.       aside {
  32.         width: 200px;
  33.         /* 左浮动 */
  34.         float: left;
  35.       }
  36.       main {
  37.         width: 790px;
  38.         /* 右浮动 */
  39.         float: right;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <header>页眉</header>
  45.     <div class="box">
  46.       <aside>侧边栏</aside>
  47.       <main>主体内容区</main>
  48.     </div>
  49.     <footer>页脚</footer>
  50.   </body>
  51. </html>

二.定位方式布局

  1. < !DOCTYPE html>
  2. <html lang="en">
  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.       header,
  9.       footer,
  10.       aside,
  11.       main {
  12.         /* 设置背景色 */
  13.         background-color: rgb(119, 116, 116);
  14.       }
  15.       header,
  16.       footer {
  17.         height: 50px;
  18.       }
  19.       aside,
  20.       main {
  21.         min-height: 700px;
  22.       }
  23.       .wrap {
  24.         width: 1000px;
  25.         border: 1px solid rgb(224, 135, 135);
  26.         /* 设置最小高度 */
  27.         min-height: 700px;
  28.         /* 居中显示 */
  29.         margin: 10px auto;
  30.         /* 定位父级元素 */
  31.         position: relative;
  32.       }
  33.       aside {
  34.         width: 200px;
  35.         /* 继承父级高度 */
  36.         min-height: inherit;
  37.         /* 设置绝对定位 */
  38.         position: absolute;
  39.         /* 定位的默认属性可省略 */
  40.         left: 0;
  41.         top: 0;
  42.       }
  43.       main {
  44.         width: 790px;
  45.         /* 继承父级高度 */
  46.         min-height: inherit;
  47.         /* 设置绝对定位 */
  48.         position: absolute;
  49.         right: 0;
  50.         /* 默认属性可省略 */
  51.         top: 0;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <header>页眉</header>
  57.     <div class="wrap">
  58.       <aside>侧边栏</aside>
  59.       <main>主体内容区</main>
  60.     </div>
  61.     <footer>页脚</footer>
  62.   </body>
  63. </html>

三.分栏显示

  1. < !DOCTYPE html>
  2. <html lang="en">
  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.       :root {
  15.         font-size: 18px;
  16.         color: #4d4f53;
  17.       }
  18.       div {
  19.         /* 加边框 */
  20.         border: 1px solid #000;
  21.         padding: 1rem;
  22.         width: 60rem;
  23.         /* 居中显示 */
  24.         margin: 30px auto;
  25.       }
  26.       div {
  27.         /* d设置分3列显示 */
  28.         column-count: 3;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div>
  34.       国家网信办有关负责人表示，结合群众举报及核查情况表明，国内31家主要网络直播平台普遍存在内容生态不良现象，不同程度地存在内容低俗庸俗问题。其中，秀场类直播乱象频发，一些女主播衣着暴露，一些男主播言行粗俗恶俗，低俗热舞、恶搞、谩骂等现象屡禁不绝；聊天类直播内容无营养无价值，甚至传播不良价值观；留言互动、弹幕和用户账号注册疏于管理，违法违规信息层出不穷。一些平台企业经营态度不端正，自身利益至上，有的借助免费“网课”推广“网游”，有的利用色情低俗内容诱导用户点击浏览并充值打赏，有的利用“抽奖”“竞猜”“返利”等方式涉嫌组织网络赌博。诸多直播乱象严重背离社会主义核心价值观，危害青少年健康成长，败坏社会风气，社会各界呼吁要严加整治。
  35.     </div>
  36.   </body>
  37. </html>

四、flex弹性容器

4.1弹性容器
  1. < !DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         /* 设置弹性容器 */
  11.         display: flex;
  12.       }
  13.       .container > .item {
  14.         /* 一旦将父元素转为弹性容器，内部的子元素就自动成为弹性项目 */
  15.         /* 子元素转为行内块 */
  16.         flex: auto;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="container">
  22.       <div class="item">1</div>
  23.       <div class="item">2</div>
  24.       <div class="item">3</div>
  25.     </div>
  26.   </body>
  27. </html>

4.2 弹性容器换行显示

4.3 justify-content 属性

justify-content设置容器主轴方向排列方式
属性值：

  • flex-start：从所设置的文字起始位置开始排列

  • flex-end所设置的文字终止的位置开始排列

  • center：从居中位置开始排列

  • space-between：紧靠父盒子两端，中间留空且均等

  • space-around：分散对齐，两侧间隔相等

  • space-evenly：平均分配空隙

4.4 align-content属性

align-content ：多容器排列方式，设置盒子在辅轴方向排列

  • flex-start：从所设置的文字起始位置开始排列

  • flex-end设置的文字终止的位置开始排列

  • center：从居中位置开始排列

  • space-between：紧靠父盒子两端，中间留空且均等

  • space-around：分散对齐，两侧间隔相等

  • space-evenly：平均分配空隙

4.5 flex-direction 属性

flex-direction: column; 主轴方向为垂直方向时

  1. < !DOCTYPE html>
  2. <html lang="en">
  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.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         /* 主轴为垂直 */
  13.         flex-direction: column;
  14.         justify-content: flex-start;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="container">
  20.       <div class="item">1</div>
  21.       <div class="item">2</div>
  22.       <div class="item">3</div>
  23.     </div>
  24.   </body>
  25. </html>
  • flex-start：从所设置的文字起始位置开始排列

  • flex-end设置的文字终止的位置开始排列

  • center：从居中位置开始排列

  • space-between：紧靠父盒子两端，中间留空且均等

  • space-around：分散对齐，两侧间隔相等

  • space-evenly：平均分配空隙

4.6 align-items 属性

align-items 主轴为交叉轴排列

  1. < !DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         height: 200px;
  11.         display: flex;
  12.         /* 项目在交叉轴  */
  13.         /* 默认是纵向拉伸的 */
  14.         align-content: stretch;
  15.       }
  16.       .container > .item {
  17.         width: 60px;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="container">
  23.       <div class="item">1</div>
  24.       <div class="item">2</div>
  25.       <div class="item">3</div>
  26.     </div>
  27.   </body>
  28. </html>

  • flex-end设置的文字终止的位置开始排列

  • flex-end设置的文字终止的位置开始排列

  • center：从居中位置开始排列

4.7使用flex容器盒子快速布局导航页
  1. < !DOCTYPE html>
  2. <html lang="en">
  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.         /* 样式初始化 */
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         /* 去除下划线 */
  16.         text-decoration: noe;
  17.         color: #ccc;
  18.       }
  19.       nav {
  20.         height: 60px;
  21.         background-color: #000;
  22.         padding: 0 50px;
  23.         /* 转化为弹性容器 */
  24.         display: flex;
  25.       }
  26.       nav a {
  27.         /* 继承父元素的高 */
  28.         height: initial;
  29.         /* 设置与高同值使文字垂直居中 */
  30.         line-height: 50px;
  31.         /* 使用padding撑开文字之间距离 */
  32.         padding: 0 15px;
  33.       }
  34.       nav a:hover {
  35.         /* 鼠标悬停后变色 */
  36.         color: white;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <header>
  42.       <nav>
  43.         <a href="#">首页</a>
  44.         <a href="#">视频教程</a>
  45.         <a href="#">社区问答</a>
  46.         <a href="#">技术文章</a>
  47.         <a href="#">资源下载</a>
  48.         <a href="#">编程词典</a>
  49.       </nav>
  50.     </header>
  51.   </body>
  52. </html>

五.使用order案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>order控制</title>
  7.     <style>
  8.       .container {
  9.         width: 700px;
  10.         /* 设置弹性容器 */
  11.         display: flex;
  12.         /* 主轴为列 */
  13.         flex-direction: column;
  14.       }
  15.       .container > .item {
  16.         border: 1px solid #000;
  17.         padding: 10px;
  18.         /* 设置定位属性 */
  19.         position: relative;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item">
  26.         <img src="cat1.jpg" alt="" />
  27.         <div>
  28.           <button onclick="up(this)">Up</button
  29.           ><button onclick="down(this)">Down</button>
  30.         </div>
  31.       </div>
  32.       <div class="item">
  33.         <img src="horse1.jpg" alt="" />
  34.         <div>
  35.           <button onclick="up(this)">Up</button
  36.           ><button onclick="down(this)">Down</button>
  37.         </div>
  38.       </div>
  39.       <div class="item">
  40.         <img src="squirrel1.jpg" alt="" />
  41.         <div>
  42.           <button onclick="up(this)">Up</button
  43.           ><button onclick="down(this)">Down</button>
  44.         </div>
  45.       </div>
  46.     </div>
  47.     <script>
  48.       // 获取当前被点击的按钮的定位父级
  49.       let up = (ele) => (ele.offsetParent.style.order -= 1);
  50.       let down = (ele) => (ele.offsetParent.style.order += 1);
  51.     </script>
  52.   </body>
  53. </html>

总结：浮动布局和定位布局都比较简单直接，但是都容易出现高度塌陷的问题。flex的排列需要特别注意是主轴是水平还是垂直方向，如果没注意的话容易弄混。

Correcting teacher：天蓬老师天蓬老师

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