display常用值

参考链接英文
参考链接中文

// 常用值
none：元素不显示
inline：将元素变为内联元素，默认
block：将元素变为块级元素
inline-block：将元素变为内联块级元素
list-item：inline：将元素变为列表显示（一般不用）
table：将元素变为块级表格元素，前后带有换行符
inline-table：将元素变为内联表格元素，前后不带换行符
table-row：将元素变为表格行，类似tr
table-cell：将元素变为表格列，类似td
grid：将产生一个块级网格布局
inline-grid：将产生一个内联块级网格布局
flex：将产生一个块级弹性盒子进行布局
inline-flex：将产生一个内联弹性盒子进行布局

position定位

CSS中的定位相当于PS中的新建图层，即在原有文档流上新开一层用于元素显示。
（1）position属性值

static：元素默认值，即没有定位，遵循正常的文档流对象
relative：相对定位
absolute：绝对定位，相对于static以外的第一个父元素进行定位，搭配元素：left/right    top/bottom
fixed：固定布定位，相对于浏览器窗口定位：搭配元素：left/right    top/bottom
inherit：规定应该从父元素继承 position 属性的值
sticky：css3新增，相当于relative和fixed结合，即滑动到一定程度就固定布局参考链接：https://jsbin.com/moxetad/edit?html,css,output

（2）定位相对性
相对于最近的有定位的父元素，绝对定位，如果向上级找，如果都没找到定位元素，则相对与html定位。

定位机制

控制元素布局的定位方案

1、普通流（normal flow）
HTML默认布局。
以HTML文档为基础，元素按照在HTML中出现的先后位置自上而下布局，内联元素水平排列，直到当行被沾满然后换行。
块级元素则会被渲染为完整的一个新行，除非另外制定，否则所有元素默认都是普通流定位。
也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。

2、浮动流（float flow）
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能地向左边或右边偏移，
其效果与印刷排版中的文本环绕相似。

3、定位（positioning）
（1）绝对定位：absolute positioning
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，
而元素具体的位置由绝对定位的坐标决定。这种定位通过设置top、right、bottom、left这些偏移值，
相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），
在没有父元素的条件下，它的参照为body，该方式脱离文档流；

（2）静态定位（static positioning）
当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，
这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

（3）相对定位（relative positioning）
该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流

（4）固定定位（fixed positioning）
生成绝对定位的元素，相对于浏览器窗口进行定位。这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，
就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

（5）inherit定位
这种方式规定该元素继承父元素的position属性值。

注意：
float，absolute，fixed，脱离文档流，即将元素从普通的布局排版中拿走，
其他盒子在定位的时候，会当没看到它，两者位置重叠就会发生重叠

布局

（1）table布局

（2）绝对定位布局

// 绝对定位中的两栏设计