Rumah > hujung hadapan web > tutorial css > css中的流体布局是什么

css中的流体布局是什么

王林
Lepaskan: 2020-11-13 13:44:37
asal
2565 orang telah melayarinya

css中的流体布局是指当网页缩小或放大时,网页布局会随着浏览器的大小而改变。流体布局的优势是如果用户的窗口很小,页面就会收缩以适应窗口,而不必横向滚动。

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>
        <h1 style="color:#706fd3">软件开发,成就梦想</h1>
        <h2><a href="https://www.liyongzhen.com/" style="color:#000">学编程,上利永贞网</a></h2>
        <div id="header">
            <h1>Logo</h1>
            <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>
Salin selepas log masuk

相关推荐:CSS教程

Atas ialah kandungan terperinci css中的流体布局是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan