一,文档流布局
- 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;还会保留