css中display解析

常见属性值

（1）inline

（2）block

（3）inline-block

（4）none

（5）flex

（6）table

行级元素特点

（1）和其它元素在同一行上

（2）元素的高度、宽度、行高及顶部和底部边距不可设置

（3）元素的宽度就是它包含的文字或图片的宽度，不可改变

块级元素特点

（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行

（2）元素的高度、宽度、行高以及顶和底边距都可设置

（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

行级元素标签

<a>	标签可定义锚
<abbr>	表示一个缩写形式
<acronym>	定义只取首字母缩写
<b>	字体加粗
<bdo>	可覆盖默认的文本方向
<big>	大号字体加粗
<br>	换行
<cite>	引用进行定义
<code>	定义计算机代码文本
<dfn>	定义一个定义项目
<em>	定义为强调的内容
<i>	斜体文本效果
<img>	向网页中嵌入一幅图像
<input>	输入框
<kbd>	定义键盘文本
<label>	标签为 input 元素定义标注（标记）
<q>	定义短的引用
<samp>	定义样本文本
<select>	创建单选或多选菜单
<small>	呈现小号字体效果
<span>	组合文档中的行内元素
<strong>	语气更强的强调的内容
<sub>	定义下标文本
<sup>	定义上标文本
<textarea>	多行的文本输入控件
<tt>	打字机或者等宽的文本效果
<var>	定义变量

块级元素标签

<address>	定义地址
<caption>	定义表格标题
<dd>	定义列表中定义条目
<div>	定义文档中的分区或节
<dl>	定义列表
<dt>	定义列表中的项目
<fieldset>	定义一个框架集
<form>	创建 HTML 表单
<h1>	定义最大的标题
<h2>	定义副标题
<h3>	定义标题
<h4>	定义标题
<h5>	定义标题
<h6>	定义最小的标题
<hr>	创建一条水平线
<legend>	元素为 fieldset 元素定义标题
<li>	标签定义列表项目
<noframes>	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>	定义在脚本未被执行时的替代内容
<ol>	定义有序列表
<ul>	定义无序列表
<p>	标签定义段落
<pre>	定义预格式化的文本
<table>	标签定义 HTML 表格
<tbody>	标签表格主体（正文）
<td>	表格中的标准单元格
<tfoot>	定义表格的页脚（脚注或表注）
<th>	定义表头单元格
<thead>	标签定义表格的表头
<tr>	定义表格中的行

可变元素标签

可变元素为根据上下文语境决定该元素为块元素或者行元素

<button>	按钮
<del>	定义文档中已被删除的文本
<iframe>	创建包含另外一个文档的内联框架（即行内框架）
<ins>	标签定义已经被插入文档中的文本
<map>	客户端图像映射（即热区）
<object>	object对象
<script>	客户端脚本

display:inline

（1）设置属性height和width无效

（2）text-align属性无效

（3）设置了line-height会让inline元素居中

（4）行内级元素所占具的空间就是他的标签所定义的大小

（5）inline元素不独占一行，其它元素会紧跟其后

display:block

（1）可设置宽高

（2）独占一行

（3）如果不指定宽高，默认会继承父元素的宽度

（4）如果不指定宽高，高度一般以子元素撑开的高度为准

（5）设计的过程中有时需要设计一个div宽高都是整个屏幕，可用如下技巧：div继承的是父元素body的高度，body是继承html的高度，html是继承的浏览器屏幕的高度

html{
  height: 100%;
}
body{
  height: 100%;
  padding: 0;
  margin:0;
}
div{
  background: red;
  width: 100%;
  height: 100%;
}

display:inline-block

（1）具有block的宽高特性又具有inline的同行元素特性

display:none

（1）将元素与其子元素从普通文档流中移除

（2）相当于它所占据的空间被折叠了

（3）元素的内容也会被屏幕阅读所忽略

（4）该属性可以用来改善重排与重绘

display:flex

（1）flex是一种弹性布局属性

（2）在一个元素上声明dispaly: flex，它就会变为flex容器，同时它的子元素就会变为flex项

display:table

（1）table 此元素会作为块级表格来显示（类似table），表格前后带有换行符

（2）display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样

（3）使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式

table	对应于HTML元素中的`<table>`。定义了一个块级框。
`table-header-group`	对应于HTML元素中的`<thead>`
`table-row`	对应于HTML元素中的`<tr>`
`table-cell`	对应于HTML元素中的`<td>`
`table-row-group`	对应于HTML元素中的`<tbody>`
`table-footer-group`	对应于HTML元素中的`<tfoot>`
`table-column-group`	对应于HTML元素中的`<colgroup>`
`table-column`	对应于HTML元素中的`<col>`
`table-caption`	对应于HTML元素中的`<caption>`
`inline-table`	这是唯一没有直接映射到HTML元素的值。这个元素的表现形式将为表格HTML元素，但是是一个内联块而不是块级元素。

（4）例子

<div class="main">
  <div class="tr tr1">
    <div class="td">head1</div>
    <div class="td">head2</div>
    <div class="td">head3</div>
  </div>
  <div class="tr tr2">
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
  </div>
</div>






.main{
  display: table;
  width:100%;
  border-collapse: collapse;/*为表格设置合并边框模型：*/
}
.tr{
  display: table-row;
  border-color: inherit;
}
.tr1 .td{
  height:50px;
  vertical-align: middle;
}
.td{
  display: table-cell;
  border: 1px solid;
}
.td:nth-of-type(1){
  width: 100px;
}
.td:nth-of-type(3){
  width: 100px;
}