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;
}

        <p id="" class="top"> </p>
        <p id="" class="main"> </p>
        <p id="" class="foot"> </p>

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;
}
        <p id="" class="main"> 
        <p id="" class="left">left </p>
        <p id="" class="right">right </p>
        </p>

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

}
        <p id="" class="left">left </p>
        <p id="" class="middle"> middle</p>
        <p id="" class="right">right </p>

5、利用上面方法随意混合布局;