css中的流体布局有什么用

了解css中的流体布局有什么用？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、做网站、繁峙网络推广、小程序制作、繁峙网络营销、繁峙企业策划、繁峙品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供繁峙建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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>&copy; Copyright 2019</p>
        </div>
    </body>
</html>

感谢各位的阅读！看完上述内容，你们对css中的流体布局有什么用大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

网站名称：css中的流体布局有什么用
本文地址：https://www.cdcxhl.com/article20/jhedco.html

成都网站建设公司_创新互联，为您提供App开发、电子商务、自适应网站、企业网站制作、网页设计公司、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容