/* postion:
absolute 不占用文档流空间，父元素没有position属性，相对于body定位元素位置
relative是占用文档流空间 相对于文档流中原来的位置进行定位
fixed 不占用文档流空间 相对于body定位*/
/* display:
none; 在文档流中删除标签占的空间
* block 显示，会频繁创建DOM标签/
/* visibility:
hidden;标签在文档流中占用空间，只是被隐藏。
visible 显示*/
/* clear:both清除后面元素的浮动效果 */
/* float: left right none 左浮动，右浮动不占用文档流空间 */
/* 布局标签元素举例：div 块结构 span 行内 p 段落 ul 有序 li 列表项 ol 无序 a 超链接 img 图片链接 i 斜体 b 粗体 */
/* CSS标签选择器：
id选择器： #id
类选择器； .class
关系选择器： div>span>.class div,span选择所有div和span div p 选择div里面的所有p标签 div+p div标签后面的所有p标签
伪类选择器： :hover
结构性选择器：div:after 在div标签里面的内容之后插入内容 div":before 在div标签内容之前插入内容* #div :nth-child(n) 选择包含父元素中的第n个子元素
#div :nth-last-child(n) 选择父元素中倒数第n个子元素。
#div :nth-last-of-type(n) 选择父元素中 同一类型的元素的第n个元素。
first-child 父元素中，某一类标签第一个
last-child 父元素中，某一类标签最后一个
*/
/* 常用属性：font-size color backgroud-color 文本 text-align text-decoration 去掉修饰下划线 text-indent 缩进 line-height行高 width height
list-style-type:none; min-height max-height border padding margin border-radius圆角 text-shadow 字体阴影 box-shadow标签阴影 float:left|right|none clear:both
position:absolute|relative|fixed|static display:none|block|inline-box|flex
display:flex
flex-wrap:wrap 必要的时候换行
justify-content:space-between|center|flex-start|flex-end| x轴（水平）排列方式
align-content:space-between|center|flex-start|flex-end 垂直排列方式 align-content 起作用 配合flex-wrap：wrap 比较好
flex-grow:数字 代表一行中子标签占的百分比
*/
来源：https://www.cnblogs.com/chencn/p/12493538.html