浅谈六种前端布局

妖狐艹你老母 2022-04-06 05:51 286阅读 0赞

目前前端页面的设计主要分为pc端和移动端，针对不同的项目需要我们可能会采取不同的布局格式

一，静态布局（static layout）

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

2、设计方法

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

<!DOCTYPE html>
    <html>
    <head>
    <meta>
    <title>静态布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:800px ;
    background:gray;
    padding:10px;
    margin:100px auto ;
    overflow: hidden; 
    }
    .left{
    width: 380px;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 380px;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }
     
    </style>
    </head>
     
    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是静态布局1
    </div>
    <div class="right">
    我是静态布局2
    </div>
    </div>
    </html

二，自适应布局

三，流式布局（百分比布局）

流式布局也叫百分比布局。把元素的宽,margin,padding不再用固定数值,改用百分比,这样元素的宽,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的

**\* 百分比是基于元素父级的大小计算得来的；**  
**\* 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)**  
**\* 边框不能用百分比设置**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:80%;
    background:gray;
    padding:10px;
    margin:100px auto ;
                    overflow: hidden; 
    }
    .left{
    width:40%;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 40%;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }
     
    </style>
    </head>
     
    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是流式布局1
    </div>
    <div class="right">
    我是流式布局1
    </div>
    </div>
    </html>

如上述代码：以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多。

四，响应式布局

五，多列布局

六，弹性布局

七，浮动布局

八，定位布局