了解css中的流體布局有什么用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
css中的流體布局是指當網頁縮小或放大時，網頁布局會隨著瀏覽器的大小而改變。流體布局的優勢是如果用戶的窗口很小，頁面就會收縮以適應窗口，而不必橫向滾動。
流體布局：
簡單來說就是網頁縮小和放大時網頁布局會隨著瀏覽器的大小而改變！
優勢：
頁面會伸展到整個瀏覽器窗口，所以即使在大屏幕上，頁面的周圍 也沒有空白；
如果用戶的窗口很小，頁面就會收縮以適應窗口，而不必橫向滾動；
即使用戶設置的字體比設計人預設的更大，這種設計也可以適應（因為頁面可以伸展）。
劣勢：
如果不對頁面各個部分的寬度加以控制，那么頁面設計會和預期的效果大相徑庭，例如某些項目或元素擠壓到一起，其周圍出現意想不到的空隙；
如果用戶的窗口非常寬，文本行就會很長，以至于難以閱讀；
如果用戶的窗口非常窄，單詞可能會被擠壓，導致每行只有幾個單詞；
如果一個固定寬度的元素位于一個不能容納它的盒子里，那么這個元素就會溢出盒子。
舉例：
下面的代碼演示了流體布局，關鍵技術是設置寬度單位為百分比。
<!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">軟件開發，成就夢想</h2>
<h3><a href="https://www.liyongzhen.com/" style="color:#000">學編程，上利永貞網</a></h3>
<div id="header">
<h2>Logo</h2>
<div id="nav">
<ul>
<li><a href="">首頁</a></li>
<li><a href="">產品</a></li>
<li><a href="">服務</a></li>
<li><a href="">關于我們</a></li>
<li><a href="">聯系我們</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>© Copyright 2019</p>
</div>
</body>
</html>感謝各位的閱讀！看完上述內容，你們對css中的流體布局有什么用大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
