css响应式布局

css响应式布局

写一点简单的感觉，称不上心得

1 第一步，将页面布局好，上中下，左中右，确定好，在页面宽大大小改变的时候，其页面改变的形态

2 第二步，写入全局代码，宽度自动居中，高度写死

3 第三步，写入函数，@media screen and ()

#header
{
    height: 50px;
    margin: 5px auto;
    border: solid 1px red;
}
#footer
{
    height: 50px;
    margin: 5px auto;
    border: solid 1px red;
}
#main
{
    margin: 5px auto;
    height: 400px;
}

@media screen and (min-width: 900px)
{
 #header,#footer
 {
     width: 800px;
 }
    #main
    {
        width: 800px;
        height: 400px;
    }
    #main-center
    {
        width: 300px;
        height: 400px;
        border: solid 1px red;
        margin: 5px;
        float: left;
    }
    #main-left
    {
        width: 200px;
        height: 400px;
        border: solid 1px red;
        float: left;
    }
    #main-right
    {
        width: 200px;
        height: 400px;
        border: solid 1px red;
        float: left;
    }
}

@media screen and (min-width: 600px)
{
    #header,#footer
    {
        width: 800px;
    }
    #main
    {
        width: 800px;
        height: 400px;
    }
    #main-center
    {
        width: 300px;
        height: 400px;
        border: solid 1px red;
        float: left;
    }
    #main-left
    {
        width: 200px;
        height: 400px;
        border: solid 1px red;
        float: left;
    }
    #main-right
    {
      display: none;
    }
}

css页面布局
一 一列布局
   高度100%，宽度固定，margin：0 atuo；
二 两列布局
   一列宽度固定，另外一列自适应
三 三列布局
   左右固定，中间自适应，重要的是margin的设置

.main_left,.main_right,.main
{
    height: 100%;
    float: left;
}
.main_left
{
    background: red;
    width: 200px;
    float: left;
    margin-left: -100%;
}
.main_right
{
    background: green;
    width: 200px;
    margin-left: -200px;
}
.main
{
    background: blue;
    width: 100%;
    box-sizing: border-box;变成块状盒子模型与img一样，这样就可以实现并排了
    padding-left: 200px;
}

其原理是
当元素处于浮动的时候，设置负margin>=子元素的宽度的时候，子元素会覆盖到兄弟元素的上面