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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

博主信息

博文 16

粉丝 2

访问量 25559

专题推荐

更多>

一.浮动方式的布局

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于浮动布局</title>
    <style>
      header,
      footer,
      aside,
      main {
        /* 设置背景色 */
        background-color: rgb(119, 116, 116);
      }
      header,
      footer {
        height: 50px;
      }
      aside,
      main {
        min-height: 700px;
      }
      .box {
        width: 1000px;
        border: 1px solid rgb(224, 135, 135);
        /* 内容区外的不显示，解决高度塌陷问题 */
        overflow: hidden;
        /* 居中显示 */
        margin: 10px auto;
      }
      aside {
        width: 200px;
        /* 左浮动 */
        float: left;
      }
      main {
        width: 790px;
        /* 右浮动 */
        float: right;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="box">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

二.定位方式布局

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位方式布局</title>
    <style>
      header,
      footer,
      aside,
      main {
        /* 设置背景色 */
        background-color: rgb(119, 116, 116);
      }
      header,
      footer {
        height: 50px;
      }
      aside,
      main {
        min-height: 700px;
      }
      .wrap {
        width: 1000px;
        border: 1px solid rgb(224, 135, 135);
        /* 设置最小高度 */
        min-height: 700px;
        /* 居中显示 */
        margin: 10px auto;
        /* 定位父级元素 */
        position: relative;
      }
      aside {
        width: 200px;
        /* 继承父级高度 */
        min-height: inherit;
        /* 设置绝对定位 */
        position: absolute;
        /* 定位的默认属性可省略 */
        left: 0;
        top: 0;
      }
      main {
        width: 790px;
        /* 继承父级高度 */
        min-height: inherit;
        /* 设置绝对定位 */
        position: absolute;
        right: 0;
        /* 默认属性可省略 */
        top: 0;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="wrap">
      <aside>侧边栏</aside>
      <main>主体内容区</main>
    </div>
    <footer>页脚</footer>
  </body>
</html>

三.分栏显示

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

四、flex弹性容器

4.1弹性容器

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex弹性布局快速预览</title>
    <style>
      .container {
        width: 300px;
        /* 设置弹性容器 */
        display: flex;
      }
      .container > .item {
        /* 一旦将父元素转为弹性容器，内部的子元素就自动成为弹性项目 */
        /* 子元素转为行内块 */
        flex: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</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; 主轴方向为垂直方向时

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴为垂直方向</title>
    <style>
      .container {
        width: 300px;
        height: 150px;
        display: flex;
        /* 主轴为垂直 */
        flex-direction: column;
        justify-content: flex-start;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

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

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

center：从居中位置开始排列

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

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

space-evenly：平均分配空隙

4.6 align-items 属性

align-items 主轴为交叉轴排列

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex简写</title>
    <style>
      .container {
        width: 300px;
        height: 200px;
        display: flex;
        /* 项目在交叉轴  */
        /* 默认是纵向拉伸的 */
        align-content: stretch;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

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

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

center：从居中位置开始排列

4.7使用flex容器盒子快速布局导航页

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      * {
        /* 样式初始化 */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        /* 去除下划线 */
        text-decoration: noe;
        color: #ccc;
      }
      nav {
        height: 60px;
        background-color: #000;
        padding: 0 50px;
        /* 转化为弹性容器 */
        display: flex;
      }
      nav a {
        /* 继承父元素的高 */
        height: initial;
        /* 设置与高同值使文字垂直居中 */
        line-height: 50px;
        /* 使用padding撑开文字之间距离 */
        padding: 0 15px;
      }
      nav a:hover {
        /* 鼠标悬停后变色 */
        color: white;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="#">首页</a>
        <a href="#">视频教程</a>
        <a href="#">社区问答</a>
        <a href="#">技术文章</a>
        <a href="#">资源下载</a>
        <a href="#">编程词典</a>
      </nav>
    </header>
  </body>
</html>

五.使用order案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>order控制</title>
    <style>
      .container {
        width: 700px;
        /* 设置弹性容器 */
        display: flex;
        /* 主轴为列 */
        flex-direction: column;
      }
      .container > .item {
        border: 1px solid #000;
        padding: 10px;
        /* 设置定位属性 */
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <img src="cat1.jpg" alt="" />
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        <img src="horse1.jpg" alt="" />
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        <img src="squirrel1.jpg" alt="" />
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
    </div>
    <script>
      // 获取当前被点击的按钮的定位父级
      let up = (ele) => (ele.offsetParent.style.order -= 1);
      let down = (ele) => (ele.offsetParent.style.order += 1);
    </script>
  </body>
</html>