前端布局以及他们的区别

最新推荐文章于 2024-10-12 14:33:26 发布

「已注销」

最新推荐文章于 2024-10-12 14:33:26 发布

阅读量566

点赞数 1

分类专栏：前端

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

出自：https://blog.csdn.net/gj1949/article/details/53379324

目前针对web前端页面的设计主要分为pc端和移动端页面，针对不同的页面我们可能会采取不同的布局格式，在整个布局的选择上，没有一成不变的，也没有任何一种布局能够满足各个方面的需要，在众多的布局方式中，我这边主要针对以下几种布局方式简单的发表一下个人的看法。

第一：固定布局

<!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: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>

如上述代码，宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。

二流式布局

<!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端用的不是非常多。

三弹性布局

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>弹性布局</title>
<style type="text/css">
.outer {
width:1000px;
padding: 10px;
margin:120px auto ;
background: red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
overflow: hidden;
}
/*.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}*/
#div1 {
width:230px;
height:200px ;
display: inline-block;
margin: 0px 0px 6px 0px;
*margin: 0px 0px 6px 16px;
margin: 0px 0px 6px 16px\9;
background: blue;
text-align: center;
line-height:200px ;
float: left;
position: relative;
}
#div1-1{
width: 20px;
height:20px ;
position: absolute;
left: 25%;
top:30% ;
border:1px solid black ;
text-align: center;
line-height:20px;
}
</style>
</head>
<body>
<div class="outer clearfloat">
<div id="div1">1</div>
<div id="div1">2</div>
<div id="div1">3</div>
<div id="div1">4</div>
<div id="div1">5</div>
<div id="div1">6</div>
<div id="div1">7</div>
<div id="div1">8</div>
</div>
</div>
</body>
</html>

如上述代码，浮动部分和清楚浮动部分主要是兼容添加的一些代码，重点看弹性布局的部分，这里面我是在pc端设计的，移动端用rem，弹性布局相对前两种出现的比较晚些，但是弹性布局功能还是很强大的，布局也非常方便，但是此布局形式在pc端并不推荐使用，ie9以下浏览器均不支持，另外火狐等一些浏览器也需要做兼容，移动端目前绝大部分浏览器都已经支持弹性布局，在移动端大家可以尝试使用。

四浮动布局

此布局上述都有演示浮动布局，此处就不做代码演示，浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动哦。

五定位布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100% ;
height: 100%;
}
.fix{
width:200px ;
height: 200px;
background:yellow ;
position: fixed;
left:50% ;
top:50% ;
z-index:10 ;
margin-left:-100px ;
margin-top:-100px ;
}
.location{
width:960px;
height: 500px;
background:gray;
padding:10px;
margin:100px auto ;
position: relative;
}
.div1{
width: 300px;
height:300px ;
background:red ;
position: absolute;
left:10%;
top:20% ;
text-align: center;
line-height: 300px;
}
.div2{

width: 300px;
height:300px ;
background:blue ;
position: absolute;
left:50%;
top:20% ;
text-align: center;
line-height: 300px;
}

</style>
</head>

<body>
</body>
<div class="fix">
我是固定定位
</div>
<div class="location">
<div class="div1">
我是绝对定位1
</div>
<div class="div2">
我是绝对定位2
</div>
</div>

</html>

定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

六 margin和padding

这个就不做展示，上面显示都有用到，margin是外边距，padding内边距，外边距是盒子与盒子之间的距离，内边距是盒子的边和盒子内部元素的距离，因此在使用的时候应该有选择的使用，另外margin会出现吃边距的情况，大家可以自己测试下。

最后，还是那句话，没有一成不变的布局方式，也没有任何一种方式能够满足各方面的需求，大家可以多积累些经验，根据自己的需要使用最有效布局方式做出最帅最美的页面。