浅谈css网页的几种布局详解css布局实现左中右布局的5种方式CSS实现多行多列的布局的实例代码css Flex布局的可伸缩性(Flexibility)如何理解 CSS 布局和块级格式上下文浅谈css sticker-footer 布局详解使用CSS3的@media来编写响应式的页面 CSS布局方案小结

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。

1、左边固定，右边自适应布局的两种实现方式

效果图如下：

大屏展示：

小屏展示：

第一种实现方式通过负边距与浮动 实现左边固定，右边自适应的布局。 主要代码如下：

 设置子元素的margin,然后父元素必须浮动。 用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个div包裹内容，并且去除right覆盖的宽度。 
-margin必须大于或等于自身的宽度才会上移

实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种 通过浮动布局来实现左边固定，右边自适应的布局

主要的代码如下：

左边固定宽度，右边自适应

实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

大屏展示：

小屏展示：

主要代码如下：

即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

实现过程中需要注意:

1.中间自适应的div需要放在left和right容器前面并且内容div需要用父容器包裹

2.left和right容器向同一个方向浮动。

主要代码如下：

左右固定宽度并且向两边浮动，中间的div设置两边的margin
该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了

实现过程中需要注意:

1.该方式只需要注意中间自适应的div需要放在left和right容器的后面。

2.left和right容器向两边浮动。

主要代码如下：

flex 语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

如果未了解过flex布局请移至文末点击链接查看 阮一峰大神写的关于flex语法

3、定位布局

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

-删除
提示
是否删除该项,点击确定
确定
取消
+添加
你是我的小可爱关闭

如果我们尝试把父容器上的transform属性去除，我们可以看到 子容器没有基于父容器定位，而是基于body定位的，宽度也是基于body给的50%宽度。效果图如下：

详细请看代码：