css網頁的幾種布局執行個體

來源:互聯網
上載者:User
本文主要介紹了淺談css網頁的幾種布局的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能協助到大家。

2018年已經過了一周,總結一下2017年在公司wiki上寫的一篇關於css布局的知識,當時也借鑒了幾個大神寫的css布局知識,和自己在項目中遇到的坑。廢話不多說。請看以下的乾貨。

1、左邊固定,右邊調適型配置的兩種實現方式

如下:

大屏展示:

小屏展示:

第一種實現方式通過負邊距與浮動 實現左邊固定,右邊自適應的布局。 主要代碼如下:


<style type="text/css">.left{float: left;width: 100%;height: 200px;background-color: red;}.left-content{margin-left: 30%;}.right{float: left;width: 30%;margin-left: -100%;height: 200px;background-color: green;}.layout0{clear: both;width: 100px;height: 100px;background-color: yellow;}</style><body><p id="body"><p class="left"><p class="left-content">設定子項目的margin,然後父元素必須浮動。用父元素包裹,主要是因為right會覆蓋left,從而導致left內容不可以看到,如果直接在left上設定margin或者padding會導致布局變化,因此只能再用一個p包裹內容,並且去除right覆蓋的寬度。</p></p><p class="right">-margin必須大於或等於自身的寬度才會上移</p><p class="layout0"></p></p></body>

實現過程中需要注意的是:

1.自適應的容器需要容器包裹住,否則容器內的內容會被覆蓋。

2.right容器的負邊距必須大於或等於自身的寬度才會上移。

3.如果right容器負邊距等於自身的寬度它會靠右對齊,如果負邊距等於-100%,則會靠左對齊。

第二種 通過浮動布局來實現左邊固定,右邊自適應的布局

主要的代碼如下:


<style type="text/css">.left{float: left;width: 200px;height: 200px;background-color: yellow;}.right{padding-left: 200px;height: 200px;background-color: red;}@media (min-width: 650px) and (max-width: 1000px){.left{width: 150px;}.right{margin-left: 150px;}}@media (max-width: 640px){.left{width: 100px;}.right{margin-left: 100px;}}</style><body><p id="main"><p class="left">左邊固定寬度,右邊自適應</p><p class="right"></p></p></body>

實現過程中需要注意的是: 1. left需要脫離文檔流,而right只需要正常顯示就可以。

2.left只是覆蓋在right上邊,因此想要讓right內容完整顯示需要給right padding-left或者margin-left。

大屏展示:

小屏展示:

主要代碼如下:


<style type="text/css">#head{height: 200px;background-color: yellow;}#body{width: 100%;float: left;}.main{background-color: green;min-height: 200px;margin: 0 210px;}.left{float: left;background-color: red;width: 200px;height: 200px;margin-left: -100%;}.right{float: right;background-color: blue;width: 200px;height: 200px;margin-left: -200px;}#footer{clear: both;height: 200px;background-color: orange;}</style><body><p id="head">即左右固定,中間自適應,它可以利用margin-left為負數來實現,它的實現原理就是margin為負值可以改變float元素的排列位置</p><p id="body"><p class="main">當多個元素同時從標準流中脫離開來時,如果前一個元素的寬度為100%寬度,後面的元素通過負邊距可以實現上移。當負的邊距超過自身的寬度將上移,只要沒有超過自身寬度就不會上移</p></p><p class="left"></p><p class="right"></p><p id="footer"></p></body>

實現過程中需要注意:

1.中間自適應的p需要放在left和right容器前面並且內容p需要用父容器包裹

2.left和right容器向同一個方向浮動。

主要代碼如下:


<style type="text/css">#head{height: 200px;background-color: yellow;}#body{overflow: hidden;}.left{float: left;background-color: red;width: 200px;height: 200px;}.right{float: right;background-color: blue;width: 200px;height: 200px;}.main{background-color: green;height: 200px;margin: 0 210px;}#footer{clear: both;height: 200px;background-color: orange;}</style><body><p id="head">左右固定寬度並且向兩邊浮動,中間的p設定兩邊的margin</p><p id="body"><p class="left"></p><p class="right"></p><p class="main">該方案有一個缺陷,在小螢幕情況下回導致right被擠下去,main沒有了</p></p><p id="footer"></p></body>

實現過程中需要注意:

1.該方式只需要注意中間自適應的p需要放在left和right容器的後面。

2.left和right容器向兩邊浮動。

主要代碼如下:


<!DOCTYPE html><html><meta charset="utf-8"><head><title>使用flex 實現“雙飛翼布局”</title></head><style type="text/css">#main{display: flex;display: -webkit-flex;//Google瀏覽器加首碼flex-flow: row nowrap;justify-content: flex-start;align-items: center;}.left{flex: 0 0 auto;width:100px;height: 200px;background-color: red;word-wrap: break-word; overflow: hidden;}.main{flex: 1 1 auto;height: 200px;background-color: green;}.right{flex: 0 0 auto;width: 100px;height: 200px;background-color: yellow;}</style><body><p id="main"><p class="left">flex 文法我參照了阮一峰關於flex文法介紹 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p><p class="main"></p><p class="right"></p></p></body></html>

如果未瞭解過flex布局請移至文末點選連結查看 阮一峰大神寫的關於flex文法

3、定位布局

這邊就不絮絮叨叨的講一些基礎的css定位知識了(ps:不會的請自行到w3c官網查閱),我主要來講解一下工作中遇到的坑。以免其他人和我一樣掉入坑中。

第一:使用多個fixed時,注意自己需要基於什麼定位,因為如果父級有用transform屬性時,可能會導致子項目的fixed基於父元素容器定位,而不是基於body定位。效果如下:

在中我可以發現中間黑色的小框是基於父級來定位,並且寬度也基於父容器的50%。詳細的請看下面代碼:


<!DOCTYPE html><html><head>    <title>關於position的定位的坑</title></head><style type="text/css">    body{        margin: 0;        padding: 0;    }    i{        font-style: normal;        cursor: pointer;    }    #delete-button{        position: absolute;        left: 45%;        top: 45%;        text-align: center;        vertical-align: middle;        height: 50px;        margin: auto;        cursor: pointer;    }    #delete-button > i{        display: inline-block;        width: 32px;        height: 32px;        border-radius: 16px;        background-color: orange;        color: red;        font-size: 32px;        vertical-align: middle;        line-height: 28px;    }    /*第一個模態框的樣式*/    #layout{        display: none;        width: 100%;        height: 100%;    }    /*使用flex布局水平豎直置中*/    /*#layout-box{        position: fixed;        width: 100%;        height: 100%;        left: 0;        top: 0;        display: flex;        display: -webkit-flex;        flex-flow: column nowrap;        justify-content: center;        align-items: center;        background-color: rgba(0,0,0,0.3);    }*/    /*使用postion 和 transform 水平垂直置中*/    #layout-box{        position: fixed;        width: 100%;        height: 100%;        background-color: rgba(0,0,0,0.3);    }    .modal-dialog{        position: absolute;        left: 50%;        top: 50%;        width: 500px;        height: 200px;        border-radius: 10px;        transform: translate(-50%, -50%);        -webkit-transform: translate(-50%, -50%);        -moz-transform: translate(-50%, -50%);        -o-transform: translate(-50%, -50%);        background-color: #fff;    }    .dialog-title{        text-align: center;        color: #333;        font-size: 28px;        margin-bottom: 10px;    }    .dialog-content{        text-align: center;        color: #666;        font-size: 18px;    }    .dialog-button{        margin-top: 20px;        width: 100%;        color: #333;    }    .dialog-button >.button-box{        display: inline-block;        width: 48%;        text-align: center;    }    .button-box span{        display: inline-block;        padding: 10px;        color: #fff;        border-radius: 6px;        cursor: pointer;    }    #confirm{        background-color: #27ad9a;    }    #cancel{        background-color: red;    }    /*添加按鈕的樣式*/    #add-button > i{        display: inline-block;        width: 32px;        height: 32px;        border-radius: 16px;        background-color: #27ad9a;        color: #fff;        font-size: 32px;        vertical-align: middle;        line-height: 28px;        text-align: center;    }    #add-button{        display: inline-block;        cursor: pointer;    }    /*第二個模態框的樣式*/    .layout2{        display: none;        position: fixed;        width: 100%;        height: 100%;        left: 0;        top: 0;        background-color: rgba(0,0,0,0.2);    }    .modal-dialog2{        position: fixed;        left: 50%;        top: 50%;        width: 50%;        height: 50%;        border-radius: 10px;        transform: translate(-50%, -50%);        -webkit-transform: translate(-50%, -50%);        -moz-transform: translate(-50%, -50%);        -o-transform: translate(-50%, -50%);        background-color: rgba(0,0,0,0.2);    }    .modal-dialog2 > span{        display: block;    }    .modal-text{        float: left;    }    #close{        color: red;        font-size: 24px;        float: right;        cursor: pointer;    }</style><body>    <p id="delete-button"><i>-</i>刪除</p>    <p id="layout">        <p id="layout-box">            <p class="modal-dialog">                <p class="dialog-title">提示</p>                <p class="dialog-content">是否刪除該項,點擊確定</p>                <p class="dialog-button">                    <p class="button-box">                        <span id="confirm">確定</span>                    </p>                    <p class="button-box">                        <span id="cancel">取消</span>                    </p>                </p>                <p id="add-button"><i>+</i>添加</p>                <p class="layout2">                    <p class="modal-dialog2">                        <span class="modal-text">你是我的小可愛</span>                        <span id="close">關閉</span>                    </p>                </p>            </p>        </p>    </p></body><script type="text/javascript">    document.getElementById("delete-button").onclick= function(){        var layout = document.getElementById("layout")        layout.style.display = "block"    }    document.getElementById("confirm").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("cancel").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("add-button").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "block"    }    document.getElementById("close").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "none"    }</script></html>

如果我們嘗試把父容器上的transform屬性去除,我們可以看到 子容器沒有基於父容器定位,而是基於body定位的,寬度也是基於body給的50%寬度。如下:

詳細請看代碼:


<!DOCTYPE html><html><head>    <title>關於position的定位的坑</title></head><style type="text/css">    body{        margin: 0;        padding: 0;    }    i{        font-style: normal;        cursor: pointer;    }    #delete-button{        position: absolute;        left: 45%;        top: 45%;        text-align: center;        vertical-align: middle;        height: 50px;        margin: auto;        cursor: pointer;    }    #delete-button > i{        display: inline-block;        width: 32px;        height: 32px;        border-radius: 16px;        background-color: orange;        color: red;        font-size: 32px;        vertical-align: middle;        line-height: 28px;    }    /*第一個模態框的樣式*/    #layout{        display: none;        width: 100%;        height: 100%;    }    /*使用flex布局水平豎直置中*/    #layout-box{        position: fixed;        width: 100%;        height: 100%;        left: 0;        top: 0;        display: flex;        display: -webkit-flex;        flex-flow: column nowrap;        justify-content: center;        align-items: center;        background-color: rgba(0,0,0,0.3);    }    /*使用postion 和 transform 水平垂直置中*/    .modal-dialog{        width: 500px;        height: 200px;        border-radius: 10px;        background-color: #fff;    }    .dialog-title{        text-align: center;        color: #333;        font-size: 28px;        margin-bottom: 10px;    }    .dialog-content{        text-align: center;        color: #666;        font-size: 18px;    }    .dialog-button{        margin-top: 20px;        width: 100%;        color: #333;    }    .dialog-button >.button-box{        display: inline-block;        width: 48%;        text-align: center;    }    .button-box span{        display: inline-block;        padding: 10px;        color: #fff;        border-radius: 6px;        cursor: pointer;    }    #confirm{        background-color: #27ad9a;    }    #cancel{        background-color: red;    }    /*添加按鈕的樣式*/    #add-button > i{        display: inline-block;        width: 32px;        height: 32px;        border-radius: 16px;        background-color: #27ad9a;        color: #fff;        font-size: 32px;        vertical-align: middle;        line-height: 28px;        text-align: center;    }    #add-button{        display: inline-block;        cursor: pointer;    }    /*第二個模態框的樣式*/    .layout2{        display: none;        position: fixed;        width: 100%;        height: 100%;        left: 0;        top: 0;        background-color: rgba(0,0,0,0.2);    }    .modal-dialog2{        position: fixed;        left: 50%;        top: 50%;        width: 50%;        height: 50%;        border-radius: 10px;        transform: translate(-50%, -50%);        -webkit-transform: translate(-50%, -50%);        -moz-transform: translate(-50%, -50%);        -o-transform: translate(-50%, -50%);        background-color: rgba(0,0,0,0.2);    }    .modal-dialog2 > span{        display: block;    }    .modal-text{        float: left;    }    #close{        color: red;        font-size: 24px;        float: right;        cursor: pointer;    }</style><body>    <p id="delete-button"><i>-</i>刪除</p>    <p id="layout">        <p id="layout-box">            <p class="modal-dialog">                <p class="dialog-title">提示</p>                <p class="dialog-content">是否刪除該項,點擊確定</p>                <p class="dialog-button">                    <p class="button-box">                        <span id="confirm">確定</span>                    </p>                    <p class="button-box">                        <span id="cancel">取消</span>                    </p>                </p>                <p id="add-button"><i>+</i>添加</p>                <p class="layout2">                    <p class="modal-dialog2">                        <span class="modal-text">你是我的小可愛</span>                        <span id="close">關閉</span>                    </p>                </p>            </p>        </p>    </p></body><script type="text/javascript">    document.getElementById("delete-button").onclick= function(){        var layout = document.getElementById("layout")        layout.style.display = "block"    }    document.getElementById("confirm").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("cancel").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("add-button").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "block"    }    document.getElementById("close").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "none"    }</script></html>

第二:解決在手機上的抖動問題(ps:這個問題我參照了網上大神寫的一篇部落格請移至文末查看)

**一、**在webkit核心瀏覽器中 給fixed加上防抖樣式 - webkit - transform: translateZ(0);

**二、**設定html 和body 的css {height:100%;overflow:auto;margin:0;} 這個影響全域樣式不建議使用。

三、在fiexd內設定position:absolute,如下:


<p style="position:fiexd;bottom:0px;">  <p style="position:absolute;">  </p></p>

4、百分比布局 主要通過設定元素的寬度為百分比或者高度為百分比。比如:width:50%; height:50%; 這樣的寫法。

5、響應式布局(主要使用媒體查詢來實現響應式設計) 主要使用CSS3 @media 來做不同終端的響應式設計

主要在css檔案中寫入


@media screen and (max-width:600px){    寫入當螢幕小於或等於600px時的樣式}@media screen and (min-width:900px){    寫入當螢幕大於或等於900px時的樣式}@media screen and (min-width:600px) and (max-width:900px){    寫入當螢幕在600px-900px之間的樣式}@media screen and (max-device-width: 480px){    寫入最大裝置寬度為480px,比如說iPhone上的顯示,這裡的max-device-width所指的是裝置的實際解析度,也就是指可視面積解析度}@media only screen and (-webkit-min-device-pixel-ratio: 2){    寫入專門針對iPhone4的行動裝置樣式}@media all and (orientation:portrait){    寫入裝置在縱向時的樣式}@media all and (orientation:landscape){    寫入裝置在橫向時的樣式}@media not print and (max-width: 1200px){    not是用來排除某種制定的媒體類型    寫入在除列印裝置和裝置寬度小於1200px下的所有裝置的樣式}@media only screen and (max-device-width:240px){    only用來定某種特定的媒體類型,可以用來排除不支援媒體查詢的瀏覽器。    寫入只能在最大裝置寬度為240px的螢幕下使用的樣式}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.