常见的几种页面内容布局方式

在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页面的布局工作。
通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种:
第一种:
单列布局,这是最简洁的一种。整个页面感觉很干净。目前主流的电商网站基本上都是使用这种布局。
《常见的几种页面内容布局方式》
代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style> .box{ width:800px; height: 600px; text-align: center; line-height: 60px; } .container{ width: 805px; margin:0 auto; } .header{ width:100%; height:60px; background: orange; } .content{ position: relative; width:700px; margin:0 auto; } .content_body{ position: relative; width:100%; height:480px; background: olive; } .content_footer{ position: relative; height:60px; background: orangered; width:100% } </style>
    </head>
    <body>
         <div class="container">
             <div class="box">
                <div class="header">header</div>
                <div class="content">
                    <div class="content_body">body</div>
                    <div class="content_footer">footer</div>
                </div>
             </div>     
         </div>
    </body>
</html>

第二种:
两列布局:
《常见的几种页面内容布局方式》
这中布局在一般的技术分享站点比较常见
《常见的几种页面内容布局方式》
上面是csdn博客的首页,布局就是两列布局,只是有一点变化而已,但是万变不离其中,都是从两列布局演变而来的。
代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style> .box{ width:800px; height: 600px; text-align: center; line-height: 60px; } .container{ width: 805px; margin:0 auto; } .header{ width:100%; height:60px; background: orange; } .content{ position: relative; width:700px; margin:0 auto; } .content_body{ position: relative; width:100%; height:480px; background: olive; } .content_footer{ position: relative; height:60px; background: orangered; width:100% } .left{ height:100%; width:100px; float: left; background: orchid; } .right{ height:100%; width:100px; float: right; background:yellowgreen; } </style>
    </head>
    <body>
         <div class="container">
             <div class="box">
                <div class="header">header</div>
                <div class="content">
                    <div class="content_body">
                         <div class="left"></div>
                         <div class="right"></div>
                    </div>
                    <div class="content_footer">footer</div>
                </div>
             </div>
         </div>
    </body>
</html>

第三种:
有两列布局就有三列布局:
《常见的几种页面内容布局方式》
单列,两列,三列都有,那有没有四列…,我们说这只是常见的布局,并不是所有的布局,如果你需要,可以有无数列,只是这些布局是小众而已。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style> .box{ width:800px; height: 600px; text-align: center; line-height: 60px; } .container{ width: 805px; margin:0 auto; } .header{ width:100%; height:60px; background: orange; } .content{ position: relative; width:700px; margin:0 auto; } .content_body{ position: relative; width:100%; height:480px; background: olive; } .content_footer{ position: relative; height:60px; background: orangered; width:100% } .left{ height:100%; width:100px; float: left; background: orchid; } .center{ float: left; width: 500px; height: 100%; background: blanchedalmond; } .right{ height:100%; width:100px; float: right; background:yellowgreen; } </style>
    </head>
    <body>
         <div class="container">            
             <div class="box">
                <div class="header">header</div>
                <div class="content">
                    <div class="content_body">
                         <div class="left"></div>
                         <div class="center"></div>
                         <div class="right"></div>
                    </div>
                    <div class="content_footer">footer</div>
                </div>
             </div>
         </div>
    </body>
</html>

上面的中三种常见的布局都是内容居中的列式布局。这种方式一般内容区的大小是固定的,所以当浏览器窗口大小改变的时候,页面的布局不会改变,只是距离两边的距离会改变。这也是这种布局比较受欢迎的原因之一。
但是我们在一些管理类网站的时候,他也是列式布局,但是内容不是居中的,而是铺满屏幕:
《常见的几种页面内容布局方式》
这种布局内容区的宽度是不定的,这个时候就需要做自适应了。一般这种布局左边的菜单列宽度是固定的,但是右边的内容区域的宽度是不固定的。
实现方式一:

.left{ float:left; }
.right{ width:100%; }

这种方式比较简单,但是是有缺陷的,这种布局右边其实是填充满整个一行的,left只是浮动在他上面,造成了左右布局的现象,我们还需要给右边加上左边距,如果左边的菜单栏收缩时,还要动态的去改变右侧内容的左边距。这样是比较麻烦的。
实现方式二:
采用flex:

.content{ display:flex; }
.left:{ width:100px; }
.right:{ flex:1 }

这种方式最简单,完全符合我们的需求,但是他用的是弹性布局,兼容性你懂得。
实现方式三
css样式计算calc();


.left:{ float:left; width:100px; }
.right:{ float:right; width:100%-100px; }

calc这个属性也是css3提供的。所以兼容性…….
实现方式四:
宽度采用百分比的方式:

.left{ width:10% }
.right{ height:85%; }

这种方式的优势是兼容性好,但是,当页面宽度变化时,页面内容会被压缩变形。

实现方式五:
就是通过计算,浏览器宽度减去左边菜单宽度,当浏览器宽度改变的时候,再计算,这种方式比较耗浏览器性能,如果一定要兼容到低版本IE,一般不考虑这种方式。

如果有更好的布局方式,欢迎大家来交流交流

    原文作者:小飞猫_
    原文地址: https://blog.csdn.net/wang839305939/article/details/76178966
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞