浅谈六种前端布局

最新推荐文章于 2024-03-19 15:54:13 发布

Gao++

最新推荐文章于 2024-03-19 15:54:13 发布

阅读量951

点赞数 1

本文链接：https://blog.csdn.net/qq_32741973/article/details/84893978

版权

目前前端页面的设计主要分为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端用的不是非常多。

四，响应式布局

五，多列布局

六，弹性布局

七，浮动布局

八，定位布局

Gao++

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
浅谈六种前端布局

目前前端页面的设计主要分为pc端和移动端，针对不同的项目需要我们可能会采取不同的布局格式一，静态布局（static layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动...
复制链接

扫一扫