页面布局

一、三列布局实现方法：

1、绝对定位法

这个呢或许是最直观，最容易理解的 ：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

html,body{margin:0; height:100%;}

#left,#right{position:absolute; top:0; width:200px; height:100%;}

#left{left:0; background:#a0b3d6;}

#right{right:0; background:#a0b3d6;}

#main{margin:0 210px; background:#ffe6b8; height:100%;}

<div id="left"></div>

<div id="right"></div>

<div id="main"></div>

 

2，margin负值法

首先呢，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含

有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所

以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

html,body{margin:0; height:100%;}

#main{width:100%; height:100%; float:left;}

#main #body{margin:0 210px; background:#ffe6b8; height:100%;}

#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}

#left{margin-left:-100%;}

#right{margin-left:-200px;}

<div id="main">

<div id="body"></div>

</div>

<div id="left"></div>

<div id="right"></div>

 

3、自身浮动法

应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

html,body{margin:0; height:100%;}

#main{height:100%; margin:0 210px; background:#ffe6b8;}

#left,#right{width:200px; height:100%; background:#a0b3d6;}

#left{float:left;}

#right{float:right;}

<div id="left"></div>

<div id="right"></div>

<div id="main"></div>

 

二、双飞翼布局

特点是中间自适应，两边固宽，实现思路：中间盒子必须放在第一个，然后统一进行浮动，左右给固定宽，左边margin-left:-100%,右边margin-left:-自身宽度，中间宽100%；就可以简单实现一个双飞翼布局。

* {

margin: 0;

padding: 0;

}

body{

min-width: 700px;

}

.left,

.right,

.center {

float: left;

min-height: 300px;

}

.left {

width: 300px;

margin-left: -100%;

background: lightpink;

}

.right {

width: 200px;

margin-left: -200px;

background: limegreen;

}

.center {

width: 100%;

background: red;

}

.bottom {

width: 100%;

height: 40px;

background: skyblue;

position: fixed;

bottom: 0;

}

.header {

width: 100%;

height: 40px;

background: purple;

position: fixed;

top: 0;

}

.content {

margin-top: 40px;

width: 100%;

}

<div class="header"></div>

<div class="content">

<div class="center"></div>

<div class="left"></div>

<div class="right"></div>

</div>

<div class="bottom"></div>

容器有一个指向三角，实现步骤：

<div class="wrap">

       <div class="childs"></div>

</div>

.wrap {

position: relative;

box-sizing: border-box;

width: 125px;

height: 150px;

border-radius: 5px;

border: 1px solid limegreen;

}

.childs {

width: 10px;

height: 10px;

background: #fff;

border-right: 1px solid limegreen;

border-top: 1px solid limegreen;

transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

position: absolute;

top: -7px;

left: 50%;

margin-left: -7px;

}

等高布局：

实现思路1：首先一个父盒子，下面n个子盒子，想要这些子盒子实现等高布局，首先父盒子转display:table;下面的子盒子使用display:table-cell.就可以实现等高布局。

 <div class="mains">
        <div class="left">
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
        </div>
        <div class="centers">
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
        </div>
        <div class="right">
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p>
            <p>测试</p> <p>测试</p>
            <p>测试</p>
            <p>测试</p>
        </div>
    </div>

.mains{
            border:1px solid #000;
            display:table;
        }
  .left,.centers,.right{
            width:200px;
            border:1px solid limegreen;
            display:table-cell;
     }

实现思路2：

父元素通过相对定位，子元素通过绝对定位实现（左右高度不能大于中间内容高度）

<div class="parent">
    <div class="left">
        <p>left</p>
        <p>center</p>
        <p>center</p><p>center</p>
        <p>center</p>
    </div>
    <div class="center">
        <p>center</p>
        <p>center</p><p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p><p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>

    </div>
</div>

.parent{
    position: relative;
}
.center{
    border-left: 200px solid lightblue;
    border-right: 300px solid lightgreen;
    background-color: pink;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
}

实现思路3：利用弹性盒实现等高布局，父盒子转弹性盒：display:flex，所有的子盒子给予flex：1；

<div class="parent">
    <div class="left">
        <p>left</p>
        <p>center</p>
        <p>center</p>

    </div>
    <div class="center">
        <p>center</p>

    </div>
    <div class="right">
        <p>right</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
</div>

.parent{
    display: flex;
    border:2px solid #000;
    width: 500px;
}
.left,.centerWrap,.right{
   flex:1;
   border:1px solid red;
}
.center{
    margin: 0 20px;
    border:1px solid red;
}

具体等高布局参照：https://blog.csdn.net/libin_1/article/details/51318708