CSS 布局

左右布局

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #left {
        float: left;
        width: 220px;
        background-color: green;
    }

    #content {
        background-color: orange;
        margin-left: 220px;
        /*==等于左边栏宽度==*/
    }
</style>

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，大家可以仔细对比一下上面那种实现方法，看看两者有什么区别：

<div id="left">
    Left Sidebar
</div>
<div id="content">
    <div id="contentInner">
        Main Content
    </div>
</div>


* {
    margin: 0;
    padding: 0;
}

#left {
    background-color: green;
    float: left;
    width: 220px;
    margin-right: -100%;
}

#content {
    float: left;
    width: 100%;
}

#contentInner {
    margin-left: 220px;
    /*==等于左边栏宽度值==*/
    background-color: orange;
}

左右中布局

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

css

div {
    display:flex;
    justify-content: space-around
}

水平居中

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

css

div {
    display:flex;
    justify-content: space-around；
}

 垂直居中

 

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

css

div {
    display:flex;
    justify-content: space-around；
    align-items: center
}