css中的流体布局是什么-css教程-PHP中文网

首页

web前端

css教程

css中的流体布局是什么

王林

Nov 13, 2020 pm 01:44 PM

css 流体布局

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>

登录后复制

热AI工具

热工具

热门话题

Java教程

1666

CakePHP 教程

1425

Laravel 教程

1328

PHP教程

1273

C# 教程

1253

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。