点击上方蓝字关注我哦前端五大常见布局
前端5种常见布局方式
作为前端开发工程师，布局方式有多种，对于不同的场景可以使用不同的布局方式，但是很多刚参加工作的同学对于这些不是很了解，那么我们就先来简单的来了解一下，那些前端开发必须了解的布局。之后我还会再详细地说说这五大布局。
1.静态布局：
静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。
2.弹性布局：
css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
3.自适应布局：
分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。
4.流式布局：
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。
5.响应式布局：
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。
注意的是：在我们学习或者是做项目时要怎么选择布局方式。
1.如果只做pc端，那么静态布局是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局(rem+js)是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，这个目前是比较流行的布局方式。
重点来啦！！！静态布局静态布局
一、静态布局
1. 布局概念
最传统、原始的Web布局设计。网页最外层容器有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
2. 优点
采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
3. 缺点
但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
4. 实现方法
(1)PC端:
最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。
(2)移动端
由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。
我们可以通过查看一个案例去看看效果，例如：看一下最近比较'火'的京东的案例:分别访问
弹性布局弹性布局
1. 布局概念
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂易错的hacks方法(如float实现流式布局)。
2. 优点
简单、方便、快速
3. 缺点
CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
4. 实现方法
(1)flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。属性用于设置或检索弹性盒模型对象的子元素排列方式。
(2)flex-direction: row(初始值) | row-reverse | column | column-reverse
flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向(一般而言是由左往右，但注意这个和书写模式有关)。
！！！注意下面的属性值解说：
row:主轴为水平方向，项目沿主轴从左至右排列
column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向
(3)flex-wrap: nowrap(初始值) | wrap | wrap-reverse
flex-wrap定义是否需要拆行，使得弹性项目能被容器包含。
nowrap：自动缩小项目，不换行
wrap：换行，且第一行在上方
wrap-reverse：换行，第一行在下面
(4)justify-content：
flex-start|flex-end|center|space-between|space-around|initial|inherit;
详细说明：
flex-start：默认值。项目位于容器的开头。
flex-end：项目位于容器的结尾。
center：项目位于容器的中心。
space-between：项目位于各行之间留有空白的容器内。
space-around：项目位于各行之前、之间、之后都留有空白的容器内。
initial：设置该属性为它的默认值。
inherit：从父元素继承该属性。
流式布局流式布局
流式布局也叫百分比布局：
这边引入一下自适应布局与流式布局的对比：
分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
流式布局常用的设计模板:
左侧固定+右侧自适应
左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
2. 优点
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
3. 缺点
屏幕尺度跨度过大的情况下，页面不能正常显示。
自适应布局Merry christmas
1.可以自动识别屏幕宽度、并做出相应调整网页布局。
网页头部引入：
网页宽度等于屏幕宽度(width=device-width，原始缩放比例为1.0(initial-scale=1)。
所有主流浏览器都支持(IE9)，对于IE6~8，引入css3-mediaqueries.js
2.注意事项：
①不适应绝对宽度/固定宽度。即css不能指定具体像素宽度，只能指定百分比宽度或者auto。
width: xxx %;或者width: auto;
②相对大小字体。字体不能使用绝对大小(px)，而是使用相对大小(em)。如：指定字体大小是页面默认大小的100%(浏览器的默认像素是16px)
?例子：
h1 {font-size: 1.5em; }
.small {font-size: 0.875em;}
img{max-width: 100%;width: 100%;}
指定h1的大小是默认大小的1.5倍，即24像素(16乘1.5=24)，small的大小是默认大小的0.875倍，即14px(16乘0.875=14)
响应式布局Merry christmas
！！！隆重介绍：它是采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局，现在优秀的页面都追求一套代码可以实现三端的浏览;
(1)从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
(2)通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
大名鼎鼎的bootstrap就是响应式布局的专家，官方放出狠话:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
平安夜祝您平安喜乐
更多前端干货
请扫码关注我哦
祝大家“平安喜乐”
