有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了
 
 
 
layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。
 
 
pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称
 
请确保在布局文件里面增加 <nuxt/> 组件用于显示页面非布局内容。
 
举个例子
 
1.layouts/custom_layout.vue:
 
<template>
    <div>
        <div class="title">这里是自定义也页面的头部(布局)</div>
        <!-- nuxt可以理解为所对应的.vue页面的内容 -->
        <nuxt/>
        <div class="footer">这里是自定义页面的底部(布局)</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.title,.footer{
    padding: 20px;
}
.title{
    background: pink;
}
.footer{
    background: yellow
}
</style>


 
2.在 pages/custom.vue 里， 可以指定页面组件使用 blog 布局。
 
<template>
    <div>
        <h2>我是自定义页面的内容</h2>
    </div>
</template>
<script>
export default {
    // 下面的两种方式都可以；layout属性其实是将这个vue页面跟布局vue进行关联的属性，layout的值为layout文件夹下所对应布局的名字
    // layout: 'custom_layout',
    layout: function(context){
        return 'custom_layout'
    }
}
</script>
<style scoped>

</style>


 
效果：
 
 
 
 
 
 
 
 
 
 
 
 
 

前端布局的几个概念
 
我今天学习了几种布局的方式，大概有五种，静态布局，自适应布局，弹性布局，流式布局，响应式布局。
 
静态布局
 
给页面元素设置固定的宽度，高度，单位用px，当窗口缩小时，会出现滚动条，针对不同分辨率的手机端，分别写入不同的样式文件。
 例子：
 这就是典型的静态布局，缩小时有滚动条。
 
自适应布局
 
创建多个静态布局，每个静态布局对应一个屏幕分辨率，使用@media媒体查询技术为不同分辨率定义布局，我们看到的页面，里面的元素位置会变化而大小不变。
 例子：亚马逊
 PC端：
 
 记住现在的域名
 
下面是移动端：
 
 域名是没有变的，说明是一个网站，（这个一会看一下有写两套代码的，和这个不一样），在移动端显示的就适应手机屏幕分辨率。
 有的网站在pc端和移动端就是两个域名，相当于两个网站
 大街网的pc端显示：
 
 大街网移动端显示：
 
 这个就不是自适应布局，它在pc端是静态布局在移动端是自适应布局。
 
弹性布局
 
例子：
 
 著作权归作者所有。
 商业转载请联系作者获得授权,非商业转载请注明出处。
 链接:http://caibaojian.com/mobile-responsive-example.html
 来源:http://caibaojian.com
 
它的页面有一个特点，就是：
 
顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变
 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。
 见：https://www.cnblogs.com/jerehedu/p/7358329.html
 
流式布局
 
页面元素的宽度按照屏幕进行适配调整，元素的大小会变化，位置不会变化，宽度是百分比，高度按px写。
 瀑布流式的页面布局适于应用在社区类浏览型页面中，这样的页面往往信息量大，采用瀑布流式布局浏览体验更为流畅。但缺点则是信息不能完全被关注，容易漏读信息。
 转自：
 https://www.chinaz.com/web/2017/0210/655519.shtml
 
使用页面 左侧固定+右侧自适应 左右固定宽度+中间自适应
 
响应式布局
 
可以把响应式布局看做是流式布局和自适应布局设计理念的融合
 最常见的响应式框架就是bootstrap
 例子：CSDN
 
 很明显引入了bootstrap框架。
 bootstrap的学习见：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap弹性页面布局
 
所谓的弹性布局就是适应多款浏览器
 不同的宽度布局的显示相对来说占的百分比是一样的
 甚至宽度不足时还会自动换行剩余元素等分空间
 使得页面布局在不同的浏览器中显示不混乱
 在这里我要讲的是利用bootstrap插件进行弹性布局
 Bootstrap布局是给元素添加封装好样式的类名
 弹性布局第一步布局是给最外层的元素添加类名container-fluid
 container-fluid自带的样式如下图
 
 它是一个宽度是100%也就是整个页面的一个盒子
 并且自带左右内边距各15px
 接着第二层的元素添加类名row和justify-content-around
 row和justify-content-around自带样式如下图
 
 row自带的样式display：flex既是弹性布局的标志又是弹性布局的开始
 没有display：flex这样式其他的所有弹性样式设置了都没效果
 有了display：flex后row自带的样式flex-wrap：wrap就有效果了
 flex-wrap：wrap是自动换行的意思
 flex-wrap是个组合属性flex-wrap后第一个输入代表是元素的排序方向第二个是是否换行
 第一个不输入就默认按主轴方向排序元素
 row这个类自带样式就是默认按主轴方向排序并且多余换行
 justify-content-around自带样式justify-content：space-around！important
 意思是子元素左右等分剩余空间，等分空间的布局让人看起来比较舒适美观
 justify-content：space-around要与display：flex同时设置，上面也说到了display：flex是弹性布局的标志没有display：flex样式justify-content：space-around样式就没有效果
 同时justify-content：space-around样式是设置在父级元素上控制第一层子元素的
 所以justify-content：space-around要与display：flex同时设置
 也就是类名row和类名justify-content-around要添加在同一个元素上
 下面就给你看一下那代码图
 
 container-fluid和row两个类连着使用的代表意义是
 在一个盒子里按每行的方式进行布局
 container-fluid代表的是一个盒子
 row代表的是盒子里的行
 要想在一行中放多少个元素
 就在带有row的元素里进行多少个元素的布局
 要想加多一行布局就在container-fluid里加多一个row
 这样的弹性布局不仅可以适应不同浏览器还可以适应手机端
 如下手机端布局图
 

其实双飞翼布局和上面一篇讲的圣杯布局相似，主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 
 具体如下
 
<div class="header">header</div>
    <div class="main">
        <div class="center">
            <div class="inner">inner</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
 
.inner{
            margin-left: 150px;
            margin-right: 100px;
        }
 
 
这样看起来有一个好处就是当页面宽度缩小到最小的时候双飞翼布局不会乱 
 如下 
  
 而圣杯布局则会发生混乱 
  
 但是感觉并没有什么luan用。
 
然后两边的内容我们一般使用padding-bottom和margin-bottom正负抵消的办法来设置高度 
 也就是说在left right center设置padding-bottom:9999px;margin-bottom:-9999px;最后在main中设置overflow:hidden;这样我们就可以吧之前为了显示的main中的高度去掉，让其中的内容自己吧main撑开 
 如下
 
.main{
            background-color: rgb(23,50,77);
            overflow: hidden;
        }
        .left{
            width: 150px;
            background-color: rgb(227,230,195);
            float: left;
            margin-left: -100%;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .right{
            width: 100px;
            background-color: rgb(153,77,82);
            float: left;
            margin-left: -100px;/*就是width*/
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .center{
            background-color: rgb(230,180,80);
            width: 100%;
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .inner{
            margin-left: 150px;
            margin-right: 100px;
        }