什么是自顺应布局？自顺应布局怎样实现？-百分百源码网

什么是自顺应布局？自顺应布局怎样实现？

发布时间：09/01 来源：未知浏览：关键词：

在前端规划中有一种规划叫自顺应规划，那么，自顺应规划是啥意思呢？自顺应规划又怎样实现？本篇文章将给大家来介绍自顺应规划的意思乃至自顺应规划的实现办法。

第一我们来看什么是自顺应规划？

所谓自顺应规划我们从baidu上可以搜到如下的定义自顺应设计指能使网页自顺应显示在不一样大小终端设备上新网页设计方式及技术。简便的来说自顺应就是让统一个页面主动顺应不一样大小的设备，从而解决为不一样设备供给不一样版本的页面问题。

知道了自顺应规划是如何一回事后，那么我们就来看一看自顺应规划该怎样实现？

页面的自顺应规划分为高度自顺应和宽度自顺应，实现方式其实有挺多的，下面我们就来以三列规划为例来看看自顺应规划的实现方式。

一、自顺应规划之高度自顺应

高度自顺应就是把每个模块设定为绝对定位，然后设定中心自顺应的模块的top和bottom属性的值离别为头部模块和底部模块的高，然后中心模块的高度就自顺应了。

高度自顺应规划代码如下：

<body>
        <div class="top">120px</div>
        <div class="main">自顺应</div>
        <div class="bottom">120px</div>
</body>

.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
}
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: pink;
    height: auto;
}
.bottom{
    position: absolute;
    bottom: 0;//别漏了
    width: 100%;
    height: 120px;
    background-color:greenyellow ;
}

高度自顺应规划结果如下：

2345截图20180927135634.png

二、自顺应规划之宽度自顺应

宽度自顺应有三种办法，离别是用绝对定位；利用margin，中心模块先渲染；本身浮动。

下面我们来离别看看这三种办法实现的自顺应规划（三列）

1、利用绝对定位来设定宽度自顺应规划

说明：针对自顺应模块使用绝对定位，在把left和right设定为摆布两列的宽，其实道理和高度自顺应一样，别的摆布两列离别摆布浮动。

绝对定位设定宽度自顺应规划代码如下：

<body>
        <div class="left">200px</div>
        <div class="main">自顺应</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.left,
.right {
    width: 200px;
    display: inline;
    height: 100%;
    background-color: greenyellow;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: pink;
    display: inline;
}

宽度自顺应规划结果如下：

2345截图20180927140338.png

2、利用margin，中心模块先渲染来设定宽度自顺应规划

说明：中心一列优先渲染的自顺应三列规划，优先渲染（加载）的关键：内容在html里面必需放在前面。自顺应的div必需放在left和right前面且包括在一个父div里。父div，left和right模块都向左浮动，然后对自顺应的div（就是父div里的子div）设定margin：0 200px，然后对left的margin-left的属性值设定为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设定为本身宽度的负数，就是margin-left：-200px。

留意：自顺应的div必需放在left和right前面且包括在一个父div里。

利用margin，中心模块先渲染设定宽度自顺应规划的代码如下：

<body>
        <div class="main"> <!--看分明，这里用一个父div包住-->
            <div class="content">自顺应</div>
        </div>
        <div class="left">200px</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    width: 100%;
    height: 100%;
    float: left;
}
.main .content {
    margin: 0 200px;
    background-color: pink;
    height: 100%;
}
.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
    background-color: greenyellow;
}
.left {
    margin-left: -100%; //important
}
.right {
    margin-left: -200px; //important
}

宽度自顺应规划结果如下：

3、利用本身浮动来设定宽度自顺应规划

说明：中心列设定margin属性，就是把摆布列离别摆布浮动。留意：使用这个办法规划自顺应的话，必需把自顺应的那一列在html中放在left和right后面。

利用本身浮动设定宽度自顺应规划代码如下：

<body>        
        <div class="left">200px</div>
        <div class="right">200px</div>
        <div class="main">自顺应</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: pink;
}
.left,
.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

宽度自顺应规划结果如下：