一，文档流布局
- 1，也称标准流布局，或者普通流布局
- 2，是浏览器默认的排版方式
- 3，有两种排版方式：
- 垂直排版, 如果元素是块级元素, 那么就会垂直排版；
- 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
二，所有display布局参数
- block :块对象的默认值。用该值为对象之后添加新行
- none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
- inline :内联对象的默认值。用该值将从对象中删除行
- compact :分配对象为块对象或基于内容之上的内联对象
- marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
- inline-table :将表格显示为无前后换行的内联对象或内联容器
- list-item :将块对象指定为列表项目。并可以添加可选项目标志
- run-in :分配对象为块对象或基于内容之上的内联对象
- table :将对象作为块元素级的表格显示
- table-caption :将对象作为表格标题显示
- table-cell :将对象作为表格单元格显示
- table-column :将对象作为表格列显示
- table-column-group :将对象作为表格列组显示
- table-header-group :将对象作为表格标题组显示
- table-footer-group :将对象作为表格脚注组显示
- table-row :将对象作为表格行显示
- table-row-group :将对象作为表格行组显示
三，常用的属性
1，inline：
- 多个内联元素占同一行，直到放不下才换行。
- 设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
- <span> <a> <label> <input> <img> <strong> <em>就是典型的行内元素（inline）元素
2，block：
- 单独占一行；
- 可以设置width,height，maigin四个方向，padding四个方向；
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；
- <div> <p> <h1> <form> <ul> <li>就是块级元素
3，inline-block
- 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。
- 和内联元素在同一行，但自身相当于块级元素，可以设置width,height等属性
- 比如标签：input,select,img等
4，none
- 隐藏该区域，不占实际空间。但对后台来说真实存在，可以获取被隐藏的元素
- display:none通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和visibility属性不一样。把 display 设置成 none
- 不会保留元素本该显示的空间，但是 visibility: hidden;还会保留