頁面佈局

一、頁面佈局

題目：假設高度已知，請寫出三欄佈局，其中左欄右欄寬度爲300px,中間自適應？

一、浮動

• 浮動佈局
• 優勢:兼容性比較好
• 缺點：浮動後，元素是脫離文檔流的，須要處理清除浮動clear:both;處理好與周邊元素關係

• div是left-right-center

• 效果圖
  

css

* {
        margin: 0;
        padding: 0;
    }
    .layout .content div{
        min-height: 100px;
    }
    .layout .content .left{
        float: left;
        width: 300px;
        background: pink;

    }
    .layout .content .right{
        float: right;
        width: 300px;
        background: yellow;
    }
     .layout .content .center {
        background: red;
     }

html

<section class="layout">
    <article class="content">
        <div class="left">左邊內容</div>
        <div class="right">右邊內容</div>
        <div class="center">浮動佈局中間內容</div>
    </article>
</section>

二、絕對定位

• 絕對定位佈局
• 優勢：佈局相對迅速

• 缺點： 定位的元素脫離了文檔流，意味着子元素也要脫離文檔流，因此這種方式的可以使用性比較差

• 效果圖

css

.layout-absolute .absolute-content {
    position: relative;
 }
 .layout-absolute .absolute-content div {
    min-height: 100px;
 }
 .layout-absolute .absolute-content .left {
    position: absolute;
    left: 0;
    width: 300px;
    background: pink;
 }
 .layout-absolute .absolute-content .right {
    position: absolute;
    right: 0;
    width: 300px;
    background: yellow;
 }
 .layout-absolute .absolute-content .center {
    position:absolute;
    left: 300px;
    right: 300px;
    background: red;
 }

html

<section class="layout-absolute">
    <article class="absolute-content">
        <div class="left">定位左邊內容</div>
        <div class="center">定位佈局中間內容</div>
        <div class="right">定位右邊內容</div>
    </article>
</section>

三、固定定位（比較完善）

• flex
• 優勢： 很是有效的解決了浮動和絕對定位的問題

• 缺點：兼容性比較差（css3的屬性），不兼容IE8及如下

• 效果圖

css

.flexbox-content {
    display: flex;
    width: 100%;

 }
 .flexbox-content div {
    min-height: 100px;
 }
 .flexbox-content .left {
    width: 300px;
    background: pink;
 }
 .flexbox-content .right {
    width: 300px;
    background: yellow;
}
.flexbox-content .center {
    flex: 1;
    background: red;
}

html

<section class="flexbox">
    <article class="flexbox-content">
        <div class="left">固定定位左邊內容</div>
        <div class="center">固定定位中間內容</div>
        <div class="right">固定定位右邊內容</div>
    </article>
</section>

四、表格佈局（兼容性很好）

• 表格佈局
• 優勢：兼容性很是好，彌補了flex佈局兼容的問題

• 缺點：操做繁瑣，當三欄中其中某一欄高度超出時，其餘兩欄的高度也會自動跟着調整（不符合某些場景）

• 效果圖

css

.table-content {
    display: table;
    width: 100%;
}
 .table-content div{
    display: table-cell;
    height: 100px;
 }
 .table-content .left {
    width: 300px;
    background: pink;
 }
 .table-content .center {
    background: red;
 }
 .table-content .right {
    width: 300px;
    background: yellow;
 }

html

<section class="flexbox">
    <article class="flexbox-content">
        <div class="left">固定定位左邊內容</div>
        <div class="center">固定定位中間內容</div>
        <div class="right">固定定位右邊內容</div>
    </article>
</section>

五、網格佈局

• 效果圖

css

.grid-content {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
 }
 .grid-content .left {
    background: pink;

 }
 .grid-content .center {
    background: red;

 }
 .grid-content .right {
    background: yellow;
 }

html

<section class="grid">
    <article class="grid-content">
        <div class="left">網格佈局左邊內容</div>
        <div class="center">網格佈局中間內容</div>
        <div class="right">網格佈局右邊內容</div>
    </article>
</section>

• 假如把高度已知去掉或者高度超出
• 1.flex佈局高度能夠自適應
• 2.表格佈局高度能夠自適應
• 3.浮動，絕對定位，網格佈局不能自適應高度