前端布局以及他们的区别

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

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

第一：固定布局

我是固定布局1

我是固定布局2

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

二 流式布局

我是流式布局1

我是流式布局1

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

三 弹性布局

   

1

   

2

   

3

   

4

   

5

   

6

   

7

   

8

  
   

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

四 浮动布局

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

五 定位布局

我是固定定位

我是绝对定位1

我是绝对定位2

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

六 margin和padding 

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

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