what is fluid layout in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

what is fluid layout in css

王林

Nov 13, 2020 pm 01:44 PM

cssfluid layout

Fluid layout in CSS means that when the web page is reduced or enlarged, the layout of the web page will change with the size of the browser. The advantage of a fluid layout is that if the user's window is small, the page shrinks to fit the window without having to scroll sideways.

what is fluid layout in css

Fluid layout:

Simply put, when the web page is reduced and enlarged, the layout of the web page will change with the size of the browser!

(Learning video sharing: css video tutorial)

Advantages:

The page will stretch to the entire browser window, so even on a large screen , there is no white space around the page;

If the user's window is small, the page will shrink to fit the window without having to scroll horizontally;

Even if the font set by the user is larger than the designer's preset is larger, this design can also be adapted (since the page can stretch).

Disadvantages:

If the width of each part of the page is not controlled, the page design will be very different from the expected effect, for example, some items or elements are squeezed together, and their surroundings Unexpected gaps appear;

If the user's window is very wide, lines of text may be so long that they are difficult to read;

If the user's window is very narrow, words may be squeezed , resulting in only a few words per line;

If a fixed-width element is in a box that cannot accommodate it, then the element will overflow the box.

Example:

The following code demonstrates fluid layout. The key technology is to set the width unit as a percentage.

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

Related recommendations: CSS tutorial

The above is the detailed content of what is fluid layout in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard