“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

"juejin.cn/post/706966… 实习中遇到的常用布局，那时没时间整理归纳，现在有时间，故经过自己的思考整理得出这篇文章，希望对自己以后和其他人有帮助，避免一些小坑。

笔记本电脑的尺寸大概是1300px左右，一般设计稿会将核心区域的宽度设定为1200px。

导航栏布局

在导航栏布局的要点：

一般前面橙色区域和后面紫色区域是固定位置的，而中间绿色区域是大小不固定的（因为不知道有多少个导航项）
全部项都要在导航栏中垂直居中对齐实现效果：代码：

// html
<nav>
    <div class="logo">
        <img class="logo-icon" src="./img1.png" alt="">
        <span class="logo-tit">我是logo</span>
    </div>

    <ul>
      <li>导航1</li>
      <li>导航2</li>
      <li>导航3</li>
    </ul>

    <div class="quit">
      退出
    </div>
</nav>

// css
nav{
      height: 70px;
      width: 1200px;
      margin: 0 auto;
      background-color: lightblue;
      box-shadow: 2px 2px 4px  lightcyan ;
      display: flex;
      align-items: center;
    }
    .logo-icon {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .logo-tit{
      vertical-align: middle;
    }
    ul {
      flex: 1;
      display: flex;
    }
    ul li {
      width: 80px;
      text-align: center;
      list-style: none;
    }

当然在实际开发中，还需要对导航栏里面的项进行margin或padding的间隔设置。

内容与背景布局

内容与背景布局的要点：

内容始终处在背景的中间实现效果：

// html
  <section class="container">
    <article class="content">
      我是内容我是内容，我是主角，我要站c位
      我是内容我是内容，我是主角，我要站c位
      我是内容我是内容，我是主角，我要站c位
    </article>
  </section>

// css
    .container {
      width: 100%;
      background-color: cornflowerblue;
    }
    .content {
      width: 800px;
      height: 400px;
      margin: 0 auto;
      background-color: coral;
    }

这个margin: 0 auto的技巧是很常见的，为什么这里要讲一下呢，原因是以前我只觉得它是拿来水平居中的，可是有一次在写页面时，我贪图方便直接在定位元素上使用定位来布局，导致出现了一个问题，在页面进行缩放和窗口拉缩时，会出现内容重叠的问题。

使用固宽 + margin: 0 auto会使得内容始终处在窗口的中间，固宽保证了页面的最小宽度，保证了页面内容不会一味的挤凑在一起。

一些布局小tips

导航栏布局

内容与背景布局