布局定位

居中：

<div style="width: 80px; height: 80; border: 1px solid red;

     margin: auto;">

        <div style="width: 30px; height: 60px; border: 1px solid blue;"></div>

        <div style="width: 30px; height: 60px; border: 1px solid aqua;"></div>

    </div>

          

 

浮动分栏，中间留空

<div style="width: 80px; height: 80; border: 1px solid red;

     margin: auto;overflow: hidden; ">

        <div style="width: 30px; height: 60px; border: 1px solid blue; float: left;"></div>

        <div style="width: 30px; height: 60px; border: 1px solid aqua; float: right;"></div>

    </div>

       

 

记住清除浮动 overflow:hidden ,控制外边距和内边距移动距离 margin-left:10px

 

 

弹性盒布局居中，分栏，换行      http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 

<div style="width: 80px; height: 80; border: 1px solid red;

     margin: auto; display:flex;align-items: center;justify-content: space-between;">

        <div style="width: 30px; height: 60px; border: 1px solid blue;"></div>

        <div style="width: 30px; height: 60px; border: 1px solid aqua; ;"></div>

    </div>

   

 

定位居中

 <div style="width:1100px;height:400px;border:1px solid red;position: absolute;left:50%;margin-left:-550px; padding-left: 10px;box-sizing: border-box;">

        <div style="width:600px;height: 80%;border:1px solid blue;"></div>

        <div style="width:470px;height: 100%;border:1px solid green;"></div>

    </div>

box-sizing:border-box:保证盒子的大小不被其他设置的元素影响