之前写过布局但是没有给一个具体的分类，这一篇重新补上。

布局其实就是衡量一个前端开发者对css的掌握程度，也是面试对前端初级者常考的一个出问题的方向。对于前端初学者在分析设计图的时候就应该思考运用哪种布局，在哪一模块了。

下面介绍几种比较常用的布局方式，以及运用该布局会产生什么样的问题。

1、float布局

2、inline-block布局

3、flex弹性布局

4、响应式布局

在进入主题之前，还是需要一些基础的。下面介绍我精心选择的基础知识点简书，可以看一下。

第一个基础知识点：盒模型

第二个基础知识点：布局属性

看完那两篇就基本上都布局有个大致的了解，虽然里面的姿势也有和我今天要总结的一样的，还是按照我的思路来。好，有请我们今天的嘉宾

第一个嘉宾：什么是float布局？

float布局顾名思义就是浮动布局，简单的说就是在一个盒子里面浮动。经常和margin一起使用来实现布局。

他有哪些特性呢？

①脱离文档流

②不脱离文本流（就是在一个盒子（容器）里面，如果有文字，浮动子后文字会被挤到一边。）心里是不是有点觉得简单啦！

那就来见识一下给我们带来的麻烦：

①父元素高度塌陷（前提父元素没有设置高度）

②浮动溢出（子元素没有完全被父元素包裹）

问题来了自然有解决的方案

有的人想给父元素添加高度，不建议。每次浮动又要添加，这个有点麻烦，而且控制不精准。

下面这两种给父元素添加一个class属性就行了，自己都声明好了，直接cv大法（ctrl+c和+v）就行了。

解决高度塌陷问题：

给这个方法取个名字：（::after方法）

这一种方法比较常用

浮动溢出的话，可以选择在父元素添加（overflow：hidden或auto）

二、什么是inline-block布局？

布局呢？其实就是将盒子并列排布，就相当于将block元素一行排布。

所以就想到还有inline-block这个布局属性。

inline-block布局没有像浮动布局一样有浮动问题。但是呢！还是有它独特的问题存在！

就是各个盒子之间的间隙问题（由html结构里面的空格符产生。）

既然问题来了就想着怎么解决，在还没有和浮动划清楚界限的时候，我是使用inline-block和float来解决的，这种我觉的也可以，但是会让降低自己的技术水平。

所以，第一种解决方案：用css选择器选择第二个元素起，加一个margin-left取值为负。

还有，第二种解决方案：在父元素加font-size：0；子元素font-size先注释掉，再弄回来。这种解决方法会不会在用户使用的时候出现问题，有待验证。

三、flex布局

先分享一篇：flex总结

flex布局在微信小程序应用很广泛，有兴趣了解一下。了解基础的看flex总结。

如果要我介绍flex布局，我觉得画图是最好的。

将主轴、交叉轴和父容器和项目的各种属性介绍 一下，这里就不演示了。看flex总结里面有介绍

下面是父容器属性：

利用flex布局实现水平垂直居中，超级简单

项目属性：

align-self 自己控制自己在交叉轴的对齐方式

order  控制伸缩项目的顺序

flex-shrink只有当容器宽度小于项目的总宽度和时才有用，默认值是1，改为0不压缩。

flex-basis 内容的空间和平均分配的空间重合，也即是剩下的空间平均分配

flex-grow剩余空间平均分配，指抛弃内容空间之后的空间。

四、响应式布局

①什么是响应式布局？为什么需要响应式布局？

在还没有响应式布局的时候，我们的布局方式仅仅局限在网页布局。随着移动端的出现，我们发现做一个项目要在不同的设备上有比较好的体验需要同样有一个项目做几次。所以就开始流行响应式布局。

响应式布局主要是能够让项目在不同设备上正常使用，具体差异主要体现在移动端。

②响应式布局的主要方法有哪些？

由于在移动端屏幕比较小，所以可以通过

1、隐藏+折行+自适应空间

2、rem/viewport（视口）/media query（媒体查询）

下面上图解释一下

第一步：加viewport可以让页面适配移动端

viewport视口，content是页面宽度等于设备宽度

第二步：两行自适应变成这样子

第三步：通过控制设置适配的屏幕宽度来写样式（一种隐藏的方法）

这个就是媒体查询的方法，还可以是min-width

第四步：左边的就不见了。在实际开发中一些不重要可以隐藏。

这里有一篇响应式布局的可以看看。

有问题欢迎提问

                                                                                                     本文如有侵权，联系作者删除。