css布局篇

其实练习布局在接触了一些布局方法之后，找一两个项目做一下。通过项目找到感觉也是

不错的选择。因为自己学的布局其实已经很多了，但是没有做一个系统的总结。其实也是

担心自己接下来面试被提问到无从下手的问题。所以今天就通过阅读一些博客和简书中各

类大神的布局，来做一个自己认为比较好的总结！

步入今天的正文，请出我们的秀儿：css布局

列一下我要讲的内容：

1、行水平垂直居中

2、两列布局

3、三列布局

4、圣杯布局

5、双飞翼布局

6、flex弹性布局

7、响应式布局

8、Grid布局

一、什么是行布局水平垂直居中？

来，我们用实例证明：

思考一个问题：除了以上三种方法还有没有其他方法？

想想还是解释一下，照顾一下，刚进门的读者。

第一种方法：我们称为拔河效应利用绝对定位和外边距的一起来完成拔河效果。

第二种方法：利用绝对定位进行盒子布局之后，再让margin-left和margin-top的值为他们的宽和高的一半，负值代表向左和向上方向偏移。

二、什么是两行布局固定和什么是两行布局自适应？

固定：在一个自适应的容器里面，通过浮动的方式进行布局。

注意：宽度都是写固定的。

思考一个问题：如果想要让他称为自适应布局需要怎么修改？

自适应：

这里就是上面固定的例子：将宽度改为百分比形式而已。

三、三列布局固定和三列布局自适应

固定：这个宽度是一定的 ，主要就是利用浮动来实现 自适应：宽度百分比，其他一样。

四、圣杯布局

解释一下：圣杯布局利用浮动将他们排列起来，我个人的理解是不同行但是还是按照html结构里面的标签排序，然后就是通过margin进行位置偏移到一个位置之后，再进行相对定位偏移。

下面是两张圣杯布局的效果图：看看中间内容自适应。

这个效果图中间是自适应，所以文字跟下面一张效果图对比不一样。 效果图二

五、双飞翼布局

圣杯布局和双飞翼布局有哪些相同和不同之处？

我想着用对比来解释双飞翼布局效果会更好，圣杯布局和双飞翼布局的HTML结构，可以看出双飞翼布局的没有被一个容器包裹着，那他为什么要这样设计呢？这就涉及到两者的第二个不同点：圣杯布局使用padding来实现而双飞翼布局用margin来实现。我说一下关键点：这两个布局在于margin取值为负,你是否理解了它的原理。不理解的，写上我的这些代码分别看一下写上这个代码和没写的效果区别就知道了。

写到这，我觉得已经很多东西，需要去写一下代码了。而且我觉得如果要用一篇文章来把这些布局都介绍完，有点冗长。分多几篇文章来说。

可以到我的个人主页看，觉得我写的不错，给个赞吧！我也有更多的动力

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