CSS佈局

左右佈局

• 對兩邊側欄分別設置寬度，並對左側欄添加左浮動，對右側欄添加有浮動。

<style>
        .left{
            width:200px;
            height:auto;
            float: left;
        }
        .right{
            width: 200px;
            height: auto;
            float: right;
        }
    </style>

    <div class="left">我在左邊</div>
    <div class="right">我在右邊</div>
複製代碼

• 浮動元素的父級記得要清除浮動

.clearfix::after{content:'';display:block;clear:both;}
複製代碼

左中右佈局

• 在 .container 中設置 position:relative;，其做用是使得後面的絕對定位的基準爲 .container 而不是以瀏覽器爲其準。
• 左側列 .left_side 和右側 .right_side 列採用絕對定位，而且固定這兩個 div的寬度，而中間列 .content 因爲須要根據瀏覽器自動調整，所以不設置相似屬性。
• 但因爲另外兩個塊的 position 屬性設置爲 absolute，此時必須將它的 margin-left 和 margin-right 屬性都設置爲 190px。

<style>
        .container{  
            position:relative;  
            margin:20px;  
            height:400px;  
        }  
        .left_side{  
            position:absolute;  
            top:0px;  
            left:0px;  
            background: red;  
            width:170px;  
            height:100%;  
        }  
        .content{  
            margin:0px 190px;  
            background: green;  
            height:100%;  
        }  
        .right_side{  
            position:absolute;  
            top:0px;  
            right:0px;  
            background: palevioletred;  
            width:170px;  
            height:100%;  
        }  
    </srtle>

    <div class="container">  
        <div class="left_side">left_side</div>  
        <div class="content">content</div>  
        <div class="right_side">right-side</div>  
    </div>   
複製代碼

水平居中

水平居中的頁面佈局中最爲常見的一種佈局形式，多出現於標題，以及內容區域的組織形式（注：small元素的對齊操做，small元素的父容器是 big元素）

• 使用 inline-block 和 text-align 實現

.big{text-align: center;}
    .small{display: inline-block;}
複製代碼

• 使用margin:0 auto來實現

.small{width:200px;margin:0 auto;}
複製代碼

• 使用絕對定位實現（而後margin-left的負值爲盒子寬度的一半，不過這樣就必須知道盒子的寬度）

.big{position:relative;height:400px; background:blue;}
    .small{
        position:absolute;
        left:50%;
        width:200px;
        height:100%;  
        background: red;  
        margin-left: -100px;
      }
複製代碼

垂直居中

垂直居中對於子元素是單行內聯文本、多行內聯文本以及塊狀元素採用的方案是不一樣的。

• 父元素必定，子元素爲單行內聯文本：設置父元素的 height 等於行高 line-height;

.big{height:60px;background: red;line-height: 60px;}
複製代碼

• 父元素必定，子元素爲多行內聯文本：設置父元素的 display:table-cell 或 inline-block，再設置 vertical-align:middle;

.big{
        display:inline-block;
        vertical-align:middle;
        line-height:60px;
        background: red;
    }
複製代碼

• 利用絕對定位實現

.big{position:relative;}
    .small{positon:absolute;top:25%;transform:translate(0,-50%);}
複製代碼

• 通用方案: flex佈局，給父元素設置 display:flex; align-items:center;

.big{display:flex;align-items:center;height: 60px;background: red}
複製代碼

多列等分佈局

多列等分佈局常出如今內容中，多數爲功能的，同階級內容的並排顯示等。

<style>
        .small{
            float:left;
            width:25%;
            box-sizing:border-box;
            border: 1px solid yellowgreen;
        }
    </style>

    <div class="big"> 
        <div class="small">蘋果</div> 
        <div class="small">香蕉</div>
        <div class="small">西瓜</div>
        <div class="small">草莓</div> 
    </div>
複製代碼

九宮格佈局

• HTML

<div class="big">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></>
            <li></>
        </ul>
    </div> 
複製代碼

• css

<style>
        .big{
             display: flex; 
             flex-direction: column;
             width: 300px;
        }
        ul{
             height: 100px; 
             display: flex;
             list-style: none;
             padding: 0; 
             margin: 0;
        }
        li{
             width: 100px;
             background-color:greenyellow;
             border: 1px solid skyblue;
         }
    </style>
複製代碼

• Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。設爲 Flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效，它的全部子元素自動成爲容器成員；
• flex-direction 容器內項目的排列方向(默認橫向排列)；
• column 主軸爲垂直方向，起點在上沿；