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

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、繁峙網(wǎng)絡(luò)推廣、小程序制作、繁峙網(wǎng)絡(luò)營銷、繁峙企業(yè)策劃、繁峙品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供繁峙建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

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

流體布局：

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

優(yōu)勢：

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

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

即使用戶設(shè)置的字體比設(shè)計(jì)人預(yù)設(shè)的更大，這種設(shè)計(jì)也可以適應(yīng)（因?yàn)轫撁婵梢陨煺梗?/p>

劣勢：

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

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

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

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

舉例：

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

    
        
        
    
    
        
軟件開發(fā)，成就夢想
        
學(xué)編程，上利永貞網(wǎng)
        

            
Logo
            

                

                    
首頁
                    
產(chǎn)品
                    
服務(wù)
                    
關(guān)于我們
                    
聯(lián)系我們
                
            
        
        

            

                
功能
            
            

                
第一列
            
            

                
第二列
            
            

                
第三列
            
        
        

            
© Copyright 2019
        
    

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