各种前端布局方式总结

前端布局方式：其实现实上最多的是各种布局混合。
注意布局与布局方式的区别
下面列一下常用的布局方式：

1. flex (Flexible Box)： （我的最爱）译为弹性布局

• 6大属性：

属性	语义	可选值
flex-direction	主轴的方向	row ， row-reverse ， column ， column-reverse
flex-wrap	是否换行	nowrap ， wrap ， wrap-reverse
flex-flow	flex-direction属性和flex-wrap属性的简写形式	如：row wrap
justify-content	项目在主轴上的对齐方式（注意是主轴 column 就是竖着了）	flex-start ， flex-end ， center ，space-between（先贴两边 再评分剩余空间） ， space-around（平分剩余空间）
align-items	侧轴（单行）（交叉轴,注意主轴是column时侧轴就是水平方向了，以前傻傻分不清概念）	flex-start ， flex-end ， center ，baseline ， stretch（拉伸 默认 盒子不要给高度 沿着y（侧轴）拉伸）
align-content	多行，就是换行的情况下使用	flex-start ， flex-end ， center ，space-between ， space-around，stretch

• 项目属性（也就是子元素）

属性	语义	可选值
order	项目的排列顺序。数值越小，排列越靠前，默认为0	0-x
flex-grow	项目的放大比例，默认为0，即如果存在剩余空间，也不放大	1-x
flex-shrink	项目的缩小比例，默认为1，即如果空间不足，该项目将缩小	1-x
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间	x or auto
flex	flex-grow, flex-shrink 和 flex-basis的简写	none or [ flex-grow flex-shrink flex-basis ]
align-self	单个子元素覆盖align-items	与align-items一致

• 注：
  Webkit 内核的浏览器，必须加上-webkit前缀。
  
  子元素的float、clear和vertical-align属性将失效。
  flex : auto (1 1 auto) 和 none (0 0 auto)
  flex：1 经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。 原理网上说法不一

2. postion： 定位 (不应把它归到此处，他不是一种布局方式，应该说是定位方式，但常与布局一起故归到这里 display是布局方式）

模式	语义	作用
static	静态定位	无定位的意思，元素默认的定位方式
relative	相对	元素移动位置的时候，相对它原来的位置移动，原来位置继续占有
absolute	绝对	移动时候相对于最近一级有定位的祖先元素来说，没有祖先元素或者祖先元素没有定位则相对文档，不再占有原有位置
fixed	固定	相对于浏览器得可视窗口，不占位置
sticky	粘性定位	相对于固定的结合，相对于浏览器得可视窗口，占位置,必须添加top left right bottom 其中一个才有效，ie不支持

• 子绝父相： 子元素用绝对时定位父得用相对定位 好处子不会占有位置不会影响兄弟元素
• 如果有重叠用z-index :x 控制顺序
• 加了绝对定位的盒子不能通过margin: 0 auto 来水平居中 可以通过 left:50%;margin:-xpx; x 盒子自身的一半
• sticky 堆叠效果和 表格表头锁定

3. float：
   容易理解，但清除浮动的方法就多了

float:left right none

浮动由来：

有时候父容器不方便给定高度，而浮动不占位置导致 父容器高度为0
清除浮动后，父容器会根据子容器得出高度，就不会影响下面的标准流盒子（前提父盒子没给定高度）

常用解决方法：

方法	举例
额外标签法（浮动元素下方添加一个非浮动元素）	在浮动标签末尾添加一个空元素(br 或者不能是行内元素)调用clear :none
父级添加overflow	hidden auto scoll
父级添加:after伪元素	如下

额外：

<div>

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>

<div style="clear:both;"></div>

</div>

overflow :(ie6 不支持)

<div style="overflow: hidden;">

<div style="float:left;width:45%;"></div>

<div style="float:right;width:45%;"></div>

</div>

after (ie6 不支持)

.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}

通用：

.cf:after {
　　content:"";
　　display:block;
}

.cf:after {
　　clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
　　zoom:1;
}

4. grid 布局（Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。）
   基本概念：

row 行 column 列
cell 单元格
网格线 grid line float、
display: inline-block、display: table-cell、vertical-align和column-*失效

属性	语义	属性值
grid-template-columns	每一列的列宽	px ，%， repeat() 重复， auto-fill（自动填充）， fr 关键字（比例关系） minmax(min ，max)(某个范围)，auto
grid-template-rows	每一行的行高	px
–	–	–
grid-row-gap	行间距	px
grid-column-gap	列间距	px
grid-gap	简写
–	–	–
grid-template-areas	指定"区域（area），一个区域由单个或多个单元格组成	举例如下
–	–	–
grid-auto-flow	划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"	row ，column， rowdense（先行后列"，并且尽可能紧密填满，尽量不出现空格），column dense
–	–	–
justify-items	设置单元格内容的水平位置	start ， end ， center ， stretch
align-items	置单元格内容的垂直位置	同上
place-items	简写
–	–	–
justify-content	整个内容区域在容器里面的水平位置	start ， end ，center ，stretch space-around:（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍） space-between (项目与项目的间隔相等，项目与容器边框之间没有间隔)， space-evenly(项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔)
align-content	整个内容区域在容器里面的垂直位置	同上
place-content	简写
–	–	–
grid-auto-columns	有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目	与grid-template-columns一致
grid-auto-rows	同上	同上
grid-template	简写
–	–	–
grid	简写grid-auto-columns/rows， grid-template-areas, grid-auto-columns/rows，grid-auto-flow	6个，不建议使用 乱

grid-template-columns属性和grid-template-rows属性里面，
还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
  }

grid-template-areas：如果某些区域不需要利用，则使用"点"（.）表示

项目属性：

属性	语义	默认值
项目的位置是可以指定的	指定项目在那几条网格线之间	除了指定为第几个网格线，还可以指定为网格线的名字
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column	grid-column-start，grid-column-end	两个的简写
grid-row	同理	这两个属性之中，也可以使用span关键字，表示跨越多少个网格
–	–	–
grid-area	指定项目放在哪一个区域	项目名
也可以是	grid-row-start、grid-column-start、grid-row-end、grid-column-end	简写
单个项目在单元个的位置	–	–
justify-self
align-self
place-self

有点多，多练。
5. 移动端布局（粗略）

em:相对于父级字体大小 rem:相对于根元素的字体大小（html）
vh：等于viewport高度的1/100。例如，如果浏览器的高是900px,1vh求得的值为9px。
vw：如果显示窗口宽度为750px,1vw求得的值为7.5px。

6.百分比布局