Home > Article > Web Front-end > what is fluid layout in css
what is fluid layout in css
- 王林Original
- 2020-11-13 13:44:372520browse
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.
<!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>© 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!