近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。

单列布局

单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。

单列布局一般有两种形式：

(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一栏布局

一栏布局头部、内容、底部宽度一致

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

一栏布局（通栏）

一栏布局（通栏）头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。

2列布局

2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。

在后台管理系统及api文档中使用较为广泛。

效果图

先来看看效果：

代码实现

实现两列布局的方法有很多，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
复制代码

flex属性

通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
复制代码

3列布局

3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。左右两边定宽，中间自适应，能根据屏幕大小做响应。

效果图

还是先来看看效果图

代码实现

三列布局的实现方法也很多，这里主要介绍两种（双飞翼布局、圣杯布局、flex布局）

在介绍双飞翼布局和圣杯布局之前要先说一下margin设置负值的作用：

当margin的值设为负值的时候，元素会对应的像那个放向移动，比如margin-left为负值，元素则会左移

双飞翼布局

代码如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>
复制代码

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
复制代码

圣杯布局

代码如下: html

<div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
复制代码

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

flex布局

代码如下: html

<div class="main">
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>
</div>
复制代码

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
复制代码

如果不考虑浏览器兼容问题的话，运用flex布局是最简单的方式。

垂直方向的布局（sticky footer）

这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。

代码实现

首先我们先构建简单的HTML代码

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
复制代码

其中content为我们的内容区。下面开始介绍解决方法。

为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
复制代码

从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。

使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

代码如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
复制代码

这样的布局简单使用，比较推荐。

在content的外面可以添加一个wrapper

这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

然后添加以下样式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}
复制代码

另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
复制代码

ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

粘性布局（sticky）

粘性布局是什么呢？我们先来看看效果演示

没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果。

标题行设置了背景色。如果不设置背景色（背景透明），正常文档流的文字就会和标题行文字重叠在一起显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流；后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴，是不是很酷~~。

代码实现

实现粘性布局主要依靠position的sticky属性。

position: sticky;
复制代码

先来看看兼容性：

从Can I use上查询可以看出，sticky的兼容性并不是太好，所以大家使用的时候要慎重考虑，如果不要求兼容的情况，用这个还是相当的舒服了。

下面给出一个简单的示例。

html:

<main>
    <header>标题一</header>
    <div class="content">
    </div>
    <header>标题二</header>
    <div class="content">
    </div>
    <header>标题三</header>
    <div class="content">
    </div>
    <header>标题四</header>
    <div class="content">
    </div>
</main>
复制代码

js(不想写太多p标签，所以用js生成，偷个懒):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})
复制代码

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
复制代码

作者：monkeysoft
链接：https://juejin.cn/post/6907027007318687751
来源：掘金

面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。

固定定位

相对于浏览器窗口进行定位，其它与绝对定位的特性一致。

常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局

粘性定位

当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示。

当滚动高度<元素与浏览器高度时，会以relative相对定位显示。

常见的应用有：吸顶盒导航,滚动吸附效果

1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用）

这三个案例用都是用固定定位来控制其与浏览器位置。最难是楼梯式导航的js部分

<style>
       body,ul,li{
           margin:0;
           padding: 0;
      }
       .header,.footer{
           height: 200px;
           background-color: skyblue;
      }
       .container{
           width: 1280px;
           margin:20px auto;
      }
       .container .item:nth-child(odd){
           height:600px;
           background-color:yellow;
      }
       .container .item:nth-child(even){
           height:700px;/*代码来自-艾编程-清心*/
           background-color:darkturquoise;
      }
       ul.louti{
           list-style: none;
           width: 100px;
           padding:0px 10px;
           border: 1px solid #ddd;
           border-radius: 10px;
           background-color: #fff;
           position: fixed;/*通过固定定位来控制楼梯式导航的位置*/
           top:300px;
           left:50px;
      }
       ul.louti li{
           height: 30px;
           line-height: 30px;
           text-align: center;
           border-bottom:1px solid #ddd;
           cursor: pointer;
      }
       ul.louti li:last-child{
           border:none;
      }
       ul.louti li.current{
           background-color: palevioletred;
           color:#fff;
      }
   </style>
<body>
   <div class="header"></div>
   <div class="container">
       <div class="item">频道内容</div>
       <div class="item">番剧内容</div>
       <div class="item">电影内容</div>
       <div class="item">国创内容</div>
       <div class="item">电视剧内容</div>
   </div>
   <div class="footer"></div>
   <ul class="louti"><!--楼梯式导航 固定定位-->
       <li class="current">频道</li>
       <li>番剧</li>
       <li>电影</li>
       <li>国创</li>
       <li>电视剧</li>
   </ul>
</body>

<script>
   var itemTop=[];//用来保存每个区块与页面顶部距离
   var itemHeight=[]
   var oItem=document.querySelectorAll('.container .item')
   var oLi=document.querySelectorAll('.louti li');
   var len=oItem.length;
   var dirSpeed=20;//定义方向和速度
   var flag=-1;//提高性能优化标签
   var scrollTop=0;//保存浏览器滚动高
   var timer=null;//全局定时器
   //把每个盒子与浏览器顶部距离,和高度分别保存到数组中
   for(var i=0;i<len ;i++){
       itemTop.push(oItem[i].offsetTop);
       itemHeight.push(oItem[i].clientHeight);
  }
   window.onscroll=function(){//滚动浏览器滚动条
       //获取滚动条滚动的高度
       scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
       for(var i=0;i<len;i++){
           if(parseInt(scrollTop)<=parseInt(itemTop[i]+itemHeight[i]/3)){
               break;
          }/*代码来自-艾编程-清心*/
      }
       if(flag!=i){//如果在当前楼层滚动，则不会重复执行代码
           flag=i;
           for(var j=0;j<len;j++){
               oLi[j].className='';
          }
               oLi[i].className='current';
      }
  }
   for(var j=0;j<oLi.length;j++){
       oLi[j].index=j;//保存序列号，后面方便使用
       oLi[j].onclick=function(){//给导航加点击事件
           clearInterval(timer);//清除定时器
           var that=this;//保存this
           //首先要获取当前滚动条高度
           scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           scrollTop>=itemTop[that.index]+itemHeight[that.index]/3?dirSpeed=-20:dirSpeed=20;
           timer=setInterval(function(){/*代码来自-艾编程-清心*/
               scrollTop+=dirSpeed;
               if(scrollTop<=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed<0 || scrollTop>=itemTop[that.index]+itemHeight[that.index]/3 && dirSpeed>0){
                   scrollTop=itemTop[that.index]+itemHeight[that.index]/3;
                   clearInterval(timer);
              }
              (document.documentElement.scrollTop=scrollTop) || (document.body.scrollTop=scrollTop);
          },5)    
  }
}
</script>

2、视频弹窗播放效果（固定定位应用）

这个效果中黑色的半透明遮罩层和弹出的视频都是相对于浏览器来固定定位的。弹出登录注册框的原理和这个是一样的。这里以相对较为复杂的视频弹窗效是为例来讲解。

<style>
       .video{
           width:300px;
           height: 200px;
      }
       .video img{
           width: 100%;
           height: 100%;
           object-fit: cover;
           cursor: pointer;
      }
       .mask{
           background-color: rgba(0,0,0,0.5);
           position: fixed;
           top:0px;
           bottom:0px;
           left:0px;
           right:0px;            
           display: none;
      }
       .mask video{
           position: fixed;
           left:50%;
           top:50%;
           transform:translateX(-50%) translateY(-50%);
      }
   </style>
<body>
   <!--视频播放列表-->
   <div class="video"><!--data-src放着对应的视频地址-->
       <img src='images/mz8.jpg' data-src="mp4/meizu.mp4"></video>
   </div>
   <div class="mask"><!--黑色半透明遮罩层-->
       <video src="" controls width="70%"></video><!--视频-->
   </div>
   <script>
       var img=document.querySelector('.video img');
       var mask=document.querySelector('.mask');
       var video=document.querySelector('.mask video')
       img.onclick=function(){
           mask.style.display='block';
           video.src=this.dataset.src;//将视频地址赋值给视频播放器
           //视频弹出后，立马自动播放
           video.play();
      }
   </script>
</body>

3、左边和顶部固定，右自适应后台管理界面布局

（固定定位应用）

顶部导航和左侧菜单相对于浏览器固定定位。右侧的内容区则自适应浏览器的宽度

<style>
   body{
       margin:0;
  }
   .top{
       height: 100px;
       position: fixed;/*固定定位 要实现水平自适应，就不要加宽*/
       left:10px;
       right:10px;
       top:0px;
       background-color: pink;
       border-radius: 10px;
  }
   .siderbar{
       width: 250px;
       position: fixed;/*固定定位 要实现垂直自适应，就不要加高*/
       left:10px;
       top:110px;
       bottom:10px;
       background-color: pink;
       border-radius: 10px;
  }
   .main{
       margin:110px 10px 0px 270px;/*水平自适应，不要加宽*/
       min-height:900px;
       background-color: skyblue;
  }
</style>
<body>
   <div class="top"></div><!--顶部-->
   <div class="siderbar"></div><!--左侧边栏-->
   <div class="main"></div><!--主内容区-->
</body>

4、吸顶盒导航和常见左右吸附效果(粘性定位)

由于粘性定义目前只有火狐和Safari浏览器支持，但是这种效果在实际企业开发中必用。所以我们通常会用JS来实现，以下是完整效果的源码。

<style>
   body{
       margin: 0;
       min-width: 1280px;
  }
   .top{
       height: 70px;
       width: 100%;
       background-color: #000;
  }
   .header{
       height: 100px;
       width:100%;
       background-color: pink;
       /* position: sticky; 兼容问题
      position: -webkit-sticky; */
       top:0;
       text-align: center;
       line-height: 100px;
  }
   .container{
       width: 1280px;
       margin:20px auto;
  }/*代码来自-艾编程-清心*/
   .container .main{
       width:1000px;
       min-height: 2000px;
       background-color: #ddd;
       float:left;
  }
   .container .siderbar{
       width:250px;
       float:right;
  }
   .container .siderbar .item{
       height: 200px;
       background-color: khaki;
       margin-bottom:20px;
  }
   .container .siderbar .ceiling{
       height: 200px;
       width: 250px;
       background-color: tomato;
       /* position: sticky;
      position: -webkit-sticky; */
  }
</style>
<body>
   <div class="top"></div>
   <div class="header"></div> <!--吸附块-->
   <div class="container">
       <div class="main"></div>
       <div class="siderbar">
           <div class="item"></div>
           <div class="item"></div>
           <div class="ceiling"></div> <!--吸附块-->
       </div>
   </div>
   <script>
       var header=document.querySelector('.header');
       var ceiling=document.querySelector('.ceiling');
       var _top=header.offsetTop;/*元素与浏览器顶部距离*/
       var _top2=ceiling.offsetTop-header.clientHeight-110;//这里要记得减掉header高度和与顶部高度，因为header在前，定位后不占空间
       console.log(_top2)
       window.onscroll=function(){
           var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
           console.log(scrollTop)
           scrollTop>=_top?(header.style.position='fixed'):(header.style.position='relative');
           if(scrollTop>=_top2){/*代码来自-艾编程-清心*/
               ceiling.style.position='fixed';/*设置固定定位*/
               ceiling.style.top="110px";/*top值*/
          }else{
               ceiling.style.position='relative';
               ceiling.style.top='0px';
          }
      }
   </script>
</body>

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）
• 
  

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；
• 
  

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程