readme.html

<!-- 1.如何居中一个浮动元素 -->

<!-- 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。 -->


<style type="text/css">
    .p{

        position:relative;

        left:50%;

        float:left;

    }
    .c{

        position:relative;

        float:left;

        right:50%;

    }
</style>


<div class="p">

    <h1 class="c">Test Float Element Center</h1>

</div>



<!-- 2.css实现水平垂直居中 -->

<style type="text/css">

    .align-center{
        /**
         * 负边距+定位：水平垂直居中（Negative Margin）
         * 使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），
         * 将content的中心拉回到body的中心，已到达水平垂直居中的效果。
         */

        position:absolute;

        left:50%;

        top:50%;

        width:400px;

        height:400px;

        margin-top:-200px;

        margin-left:-200px;

        border:1px dashed #333;

    }
</style>

<!-- 3.css实现三栏布局，中间自适应 -->



/*方法一：自身浮动法。左栏左浮动，右栏右浮动。*/

<style type='text/css'>
.left , .right{
            height: 300px;

            width: 200px;
        }

        .right{
            float: right;
            background-color: red;
        }

        .left{
            float: left;
            background-color: #080808;
        }

        .middle{

            height: 300px;

            margin: 0 200px;//没有这行，当宽度缩小到一定程度的时候，中间的内容可能换行

            background-color: blue;
        }
</style>




<!-- 方法二：margin负值法 -->

<style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            .left , .right{

                height: 300px;

                width: 200px;

                float: left;

            }

            .right{

                margin-left: -200px;

                background-color: red;
            }

            .left{
                margin-left: -100%;

                background-color: #080808;
            }

            .middle{
                height: 300px;
                width: 100%;
                float: left;
                background-color: blue;
            }
</style>



    <!--放第一行-->

    <div class="middle">middle</div>

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

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





<!-- 方法三：绝对定位法。左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。 -->



<style>
    body{

        margin: 0;

        padding: 0;

    }

    .left , .right{

        top: 0;

        height: 300px;

        width: 200px;

        position: absolute;

    }

    .right{

        right: 0;

        background-color: red;

    }

    .left{

        left: 0;

        background-color: #080808;

    }

    .middle{

        margin: 0 200px;

        height: 300px;

        background-color: blue;

    }
</style>


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

<!--这种方法没有严格限定中间这栏放置何处-->

<div class="middle">middle</div>

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

```