溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中的流體布局有什么用

發(fā)布時間：2020-11-16 10:20:25 來源：億速云 閱讀：157 作者：小新 欄目：web開發(fā)

了解css中的流體布局有什么用？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

css中的流體布局是指當(dāng)網(wǎng)頁縮小或放大時，網(wǎng)頁布局會隨著瀏覽器的大小而改變。流體布局的優(yōu)勢是如果用戶的窗口很小，頁面就會收縮以適應(yīng)窗口，而不必橫向滾動。

流體布局：

簡單來說就是網(wǎng)頁縮小和放大時網(wǎng)頁布局會隨著瀏覽器的大小而改變！

優(yōu)勢：

頁面會伸展到整個瀏覽器窗口，所以即使在大屏幕上，頁面的周圍 也沒有空白；

如果用戶的窗口很小，頁面就會收縮以適應(yīng)窗口，而不必橫向滾動；

即使用戶設(shè)置的字體比設(shè)計人預(yù)設(shè)的更大，這種設(shè)計也可以適應(yīng)（因為頁面可以伸展）。

劣勢：

如果不對頁面各個部分的寬度加以控制，那么頁面設(shè)計會和預(yù)期的效果大相徑庭，例如某些項目或元素擠壓到一起，其周圍出現(xiàn)意想不到的空隙；

如果用戶的窗口非常寬，文本行就會很長，以至于難以閱讀；

如果用戶的窗口非常窄，單詞可能會被擠壓，導(dǎo)致每行只有幾個單詞；

如果一個固定寬度的元素位于一個不能容納它的盒子里，那么這個元素就會溢出盒子。

舉例：

下面的代碼演示了流體布局，關(guān)鍵技術(shù)是設(shè)置寬度單位為百分比。

<!DOCTYPE html>
<html>
    <head>
        <title>Liquid Layout</title>
        <style type="text/css">
            * {
                color: #fff;
                text-align: center;}
            body {
                width: 90%;
                margin: 0 auto;}
            #content {
                overflow: auto;}
            #nav, #feature, #footer {
                margin: 1%;}
            .column1, .column2, .column3 {
                width: 31.3%;
                float: left;
                margin: 1%;}
            .column3 {
                margin-right: 0%;}
            li {
                display: inline;
                padding: 0.5em;}
            #nav, #footer {
                
                padding: 0.5em 0;}
            #feature, .article {
                color:#fff;
                height: 10em;
                margin-bottom: 1em;
                }
        </style>
    </head>
    <body>
        <h2 style="color:#706fd3">軟件開發(fā)，成就夢想</h2>
        <h3><a href="https://www.liyongzhen.com/" style="color:#000">學(xué)編程，上利永貞網(wǎng)</a></h3>
        <div id="header">
            <h2>Logo</h2>
            <div id="nav">
                <ul>
                    <li><a href="">首頁</a></li>
                    <li><a href="">產(chǎn)品</a></li>
                    <li><a href="">服務(wù)</a></li>
                    <li><a href="">關(guān)于我們</a></li>
                    <li><a href="">聯(lián)系我們</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="feature">
                <p>功能</p>
            </div>
            <div class="article column1">
                <p>第一列</p>
            </div>
            <div class="article column2">
                <p>第二列</p>
            </div>
            <div class="article column3">
                <p>第三列</p>
            </div>
        </div>
        <div id="footer">
            <p>&copy; Copyright 2019</p>
        </div>
    </body>
</html>

感謝各位的閱讀！看完上述內(nèi)容，你們對css中的流體布局有什么用大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手