search

博客列表 >基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制

基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制

肖傲的博客
肖傲的博客原创
2020年06月23日 17:25:01981浏览

一.浮动方式的布局

  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的排列需要特别注意是主轴是水平还是垂直方向，如果没注意的话容易弄混。

上一条：HTML FlexBox弹性盒布局知识下一条：初识Flex布局以及常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多