了解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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
