行内元素、块元素和css属性display

1.行内元素和块元素特征的区分

行内元素：相同的元素同行显示，不会换行，除了图片<img>，图片按钮input type='image'（感觉有点像是display:inline-block)，一般不能设置宽高(css里display:inline)。

块级元素：前后都有换行符，可以设置宽高，也可以按照内容自动自动增加高度。一般默认时，宽度为100%，独占一行（display:block)。

2.常见的行内元素和块级元素

根据行内元素和块级元素的显示特性不同，可以找出常见的html标签到底哪些属行内元素，哪些块级元素。以下标签都有代码验证过。

块级元素：常见的有<div>，<p>，标题<h1>-<h6>

行内元素：有<span>，<a>，以及图片<img>，换行符<br/>

剩下的根据几种数据形式里，form表单，table表格，以及列表（dl定义列表，ul无序列表，ol有序列表），以及文字修饰，来进行区分。

2.1 form表单

包含几乎所有form标签的代码：

以上的form表单几乎涵盖了所有的form标签，根据上述代码的显示结果发现：

1.form表单标签的绝大多数是行内标签，

包括input输入框，input输入框的type属性值有（text文本，password密码，radio单选，checkbox复选框，reset重置按钮，submit提交，image图片按钮，file上传文件，hidden隐藏，button普通按钮）；

其它的select下拉列表，<button>xaf</button>定义按钮，<textarea></textarea>多行文本，都是属于行内标签。

2.也有例外，<fieldset>分区域标签是块标签，它里面的内容独占一个区域，有点类似一个div，但他有legend子标签表标题，会显示在border上。<fiedlset><legend>用户名<input type='text'/></legend></feildset>

另外，form表单的form标签自身也是块级标签，表单与表单之间也是换行，默认自增加高度。

2.2table表格

几乎包含所有的talbe标签：

上述代码实验结果表明：

一般情况下，table里块状标签有，table，tr，caption（表格标题），但是某些情况下，会把table放到一个td里，这时候，就有点像是css里dispaly属性的一些属性值。

2.3列表

列表分三种，前两种比较常见，分别是无序列表ul和有序列表ol，以及他们共同的列表项标签li。后一种是定义列表dl，一般更倾向于是对于某一项的解释和说明，其中，名字，dt，说明/举例,dd。

包含了三种列表标签的代码：

上述代码结果表明，列表都是块状标签，即ul，ol，li，和dl，dt，dd都是块状标签

2.4文字修饰

在文字使用时，一般相关的标签都是p段落，div块，h1-h6标题这些块标签，或者span，a这些行内标签。然而在对于文字的修饰方面，又有许多我们易忽略的小标签。

strong：加粗

em：强调

i:斜体

sub：下标

sup:上标

small：字体变小和，big：字体变大

还有换行符：br，以上这些经过文字实验，都是类似span这样的行内标签。

3.css里的display属性，可以改变标签的显示属性

既然每个标签都有自己的显示属性，那么，当我们想使用的标签属性不是我们想要的显示属性时，使用css样式里的display属性，它能改变标签的显示方式。由于display属性的属性值太多，只验证几个常见的属性值。

1.display:none，完全不显示，也不占用网页位置，（不同与visibility:hidden，不显示但占用位置）

2.display:block，

3.display:inline，

4.display:inline-block，

以下关于display的综合代码：