HTML5权威指南——创建布局

定位内容

• position属性设置元素的定位方式
• 以下是该属性的值

值	说明
static	默认值，普通布局
relative	元素位置相对于static定位
absolute	元素相对于position值不为static的第一位祖先元素定位
fixed	元素相对于浏览器窗口定位

• 在设置了position之后，用top/left/right/bottom来指定元素的偏移量
• z-index指定元素的层叠顺序，值越小层叠顺序越靠后且允许负值

创建多列布局

跟报纸的排版一样

果然如同报纸一样！

创建弹性盒布局

书中写的已经有些过时了。我就找一些资料按照书上的思路整理一下吧。（下面的图都是来自于阮一峰的Flex 布局教程：语法篇）

• 通过设置display为flex或者是inline-flex将其定义为弹性容器

• flex-direction属性决定项目的排列方向。flex-direction的值有：row|row-reverse|column|column-reverse
  方向如下图所示：
  

• flex-wrap定义项目一行排不下的请况如何换行，他有三个值nowrap（不换行）|wrap（换行，第一行在上方）|wrap-reverse（换行，第一行在下方啊）
  

• flex-flow是flex-direction和flex-wrap属性的简写形式，默认值是 row nowrap

• justity-content属性定义项目在主轴上的对齐方式：属性值有：flex-stat|flex-end|center|space-between|space-around
  

• align-items属性定义项目在交叉轴上如何对齐，它的属性值有：flex-start | flex-end | center | baseline | stretch
  

• align-content属性定义了多跟轴线的对齐方式，若项目只有一根轴线，该属性不起作用。它的属性值：flex-start | flex-end | center | space-between | space-around | stretch
  

创建表格布局

使用table元素来进行布局使内容呈现网格状，我觉的现有的grid布局很好的完成了这个功能

网格化布局

不想写了参考这个吧网格化布局

• display的值设为grid
• 使用grid-template-colums和grid-template-rows来设置网格的宽高以及几行几列。