UI布局笔记

1.宽度一般用百分比自适应的方式，充分利用css浮点和定位来布局；
2.一列布局，一般是固定宽度，高度自适应，随着内容增加，不断撑开；

body{    margin: 0;padding: 0;  //清除全局的margin样式}.top{    height: 100px;    background: chartreuse;}.main{    width: 400px;    height: 400px;    background: lightcyan;    margin: 0 auto; //0表示上下,auto表示左右}.foot{    height: 100px;    width: 400px;    background: salmon;    margin: 0 auto;}        <div id="" class="top"> </div>        <div id="" class="main"> </div>        <div id="" class="foot"> </div>

3.固定宽度的两列布局，并且居中，左右宽度使用百分比，自适应。需要用到浮动。

body{    margin: 0 ;    padding: 0;}.main{  //父级元素    width: 800px;    margin: 0 auto;}.left{    width: 20%;    float: left;    background: chartreuse;}.right{    width: 80%;    float: right;    background: coral;}        <div id="" class="main">         <div id="" class="left">left </div>        <div id="" class="right">right </div>        </div>

4.三列，左右固定像素，中间一列自适应，不能再使用浮动；

body{    margin: 0 ;    padding: 0;}.left{    width: 200px;    height: 500px;    background: chartreuse;    position: absolute;  //绝对位置,距离左边和上边为0    left: 0;    top: 0;}.middle{    background: cornflowerblue;    width: 100px;    height: 500px;    margin: 0 200px 0 200px; //上 右 下 左}.right{    width: 200px;    height:500px;    background: coral;    position: absolute;    top:0;//先写top，第三列会不跟前两列并列 要按上右左下顺序写    right: 0;//绝对位置,距离右边和上边为0}        <div id="" class="left">left </div>        <div id="" class="middle"> middle</div>        <div id="" class="right">right </div>

5。利用上面方法随意混合布局；