css布局总结（一）

一、两列布局：

1.一列定宽，一列自适应（两列在同一行(第一个元素必须脱离或半脱离文档流），右边一列要占满剩余的宽度（块级元素宽高会自动默认充满剩下屏幕））

默认左边先显示：

 float+margin

{

    float:left;

    width:100px;

}

{

    margin-left:100px;

    width:100%;//可有可无

}

 float+bfc

{

    float:left;

    width:100px;

}

{

    overflow:hidden;

}

有重要内容先显示（右侧先）：

float+负外边距：

<div class="main">

    <div class="right">右侧主体自适应区块</div>

</div>

<div class="left">左侧定宽200px区块</div>

/*先显示的放在前面，需要外加一层包裹；*/

.main{

    float: left;

    width: 100%;

}

.right{

    margin-left: 200px;

    background-color: red

}

.left{

    float: left;

    width: 200px;

    margin-left: -100%;

    background-color: pink

}

absolute：

<div class="right">右侧主体自适应区块</div>

<div class="left">左侧定宽200px区块</div>



.left{

    width: 200px;

    background-color: pink

}

.right{

    position: absolute;

    left: 200px;

    right: 0px;

    background-color: red

}

flex：

<div id="box">

    <div class="right">右侧主体自适应区块</div>

    <div class="left">左侧定宽200px区块</div>

</div>



.left{

    flex: 0 0 200px;

    order: 1;

    background-color: pink

}

.right{

    flex: 1;

    order: 2;

    background-color: red;

}

#box{

    display: flex;

}

2.两列皆不定宽，皆自适应

float+bfc:

{

    float:left;

}

{

    overflow:hidden;

}

flex:

<div id="box">

    <div class="right">右侧主体自适应区块</div>

    <div class="left">左侧定宽200px区块</div>

</div>



.left{

    flex: none;

    order: 1;

    background-color: pink

}

.right{

    flex: 1;

    order: 2;

    background-color: red;

}

#box{

    display: flex;

}

二、三列布局：

1.两侧定宽，中间自适应

float+负外边距(中间先显示)：

<div id="box">
    <div class="mid">中间自适应区块</div>
</div>
<div class="left">左侧定宽200px区块</div>
<div class="right">右侧定宽300px区块</div>

.left{
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: pink
}
.right{
    width: 300px;
    float: left;
    margin-left: -300px;
    background-color: red;
}
#box{
    width: 100%;
    float: left;
}
.mid{
    margin-left: 200px;
    background-color: rgb(20, 4, 13);
}

float+bfc(两侧先显示--float元素要提前显示)：

<div class="left">左侧定宽200px区块</div>
<div class="right">右侧定宽300px区块</div>
<div class="mid">中间自适应区块</div>

.left{
    width: 200px;
    float: left;
    background-color: pink
}
.right{
    float: right;
    width: 300px;
    background-color: red;
}
.mid{
    margin-left: -200px;
    margin-right: 300px;
    background-color: rgb(20, 4, 13);
}

absolute(中间先显示)：

<div class="mid">中间自适应区块</div>
<div class="left">左侧定宽200px区块</div>
<div class="right">右侧定宽300px区块</div>

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    background-color: pink
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background-color: red;
}
.mid{
    margin-left: -200px;
    margin-right: 300px;
    background-color: rgb(20, 4, 13);
}

flex(中间先显示)：

<div id="box">
    <div class="mid">中间自适应区块</div>
    <div class="left">左侧定宽200px区块</div>
    <div class="right">右侧定宽300px区块</div>
</div>

#box{
    display: flex;
}
.left{
    flex:0 0 200px;
    order: -1;
    background-color: pink
}
.right{
    flex:0 0 300px;
    background-color: red;
}
.mid{
    flex: 1;
    background-color: rgb(20, 4, 13);
}

三、瀑布流布局（css实现静态版）：

1.多列布局（multiple-column）+媒体查询响应式布局

三个属性：column-count(列数)、column-gap(列间距)、break-inside(为了控制文本块分解成单独的列，以免项目列表的内容跨列)

    <div class="masonry">
        <div class="item">
            <div class="item__content" style='height:50px'>
            </div>
        </div>
        <div class="item">
            <div class="item__content" style='height:170px'>
            </div>
        </div>
        <div class="item">
            <div class="item__content" style='height:100px'>
            </div>
        </div>
        <div class="item">
            <div class="item__content" style='height:200px'>
            </div>
        </div>
    </div>

    .masonry {
        column-count: 1;
        column-gap: 10px;
    }
    
    @media screen and (min-width: 400px) {
        .masonry {
            column-count: 2;
        }
    }

    @media screen and (min-width: 600px) {
        .masonry {
            column-count: 3;
        }
    }

    @media screen and (min-width: 800px) {
        .masonry {
            column-count: 4;
        }
    }

    @media screen and (min-width: 1100px) {
        .masonry {
            column-count: 5;
        }
    }

    .item {
        box-sizing: border-box;
        break-inside: avoid;
        padding: 10px;
        margin-bottom: 10px;
        background-color: red;
    }

2.flex

    .masonry {
        display: flex;
        flex-flow: column wrap;
    }
    
    @media screen and (min-width: 400px) {
        .masonry {
            height: 1600px;
        }
    }

    @media screen and (min-width: 600px) {
        .masonry {
            height: 1300px;
        }
    }

    @media screen and (min-width: 800px) {
        .masonry {
            height: 1100px;
        }
    }

    @media screen and (min-width: 1100px) {
        .masonry {
            height: 800px;
        }
    }

    .item {
        margin-bottom: 10px;
        margin-right: 10px;
        background-color: red;
    }

三、响应式布局（媒体查询）：

@media mediaType and|not|only(media feature){

    选择器

}

mediaType常用的有：screen,print,all

media feature：

device-height/width:输出设备的宽高

height/width:输出屏幕的宽高

max-height/width:输出屏幕的最大可见宽高

min-height/width:输出屏幕的最小可见宽高