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.

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.

     
  
软件开发，成就梦想
 
学编程，上利永贞网
 
 
Logo
 
 
 
首页
 
产品
 
服务
 
关于我们
 
联系我们
 
 
 
 
 
 
功能
 
 
 
第一列
 
 
 
第二列
 
 
 
第三列
 
 
 
 
© Copyright 2019
 
  

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!