您的位置:首页 > 其它

浅谈几种常用的布局方式

2016-11-28 16:13 127 查看
      目前针对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">

    <
b2ef
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会出现吃边距的情况,大家可以自己测试下。

最后,还是那句话,没有一成不变的布局方式,也没有任何一种方式能够满足各方面的需求,大家可以多积累些经验,根据自己的需要使用最有效布局方式做出最帅最美的页面。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  布局