行内元素、块元素和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标签的代码：

 

用户名 密码 性别男女 我同意百合服务完协议

 

学历：本科硕士博士 自我介绍：

fieldset和legend（标题） 文本框 什么？

自我介绍： 自我介绍： 自我介绍：

以上的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标签：

 

楚天中学初中一年级成绩表

姓名	学号	语文	数学	英语	总成绩	平均成绩
总人数		语文总分	数学总分	英语总分	全班总成绩	全班平均成绩
张三	00001	85	90	95	270	90
李四	00002	80	90	85	255	85

 

 

 

上述代码实验结果表明：

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

2.3列表

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

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

 

列表里的标签

dl定义列表（项目后面是注释说明用的）之水果

苹果

香蕉

水蜜桃

甜品

提拉米苏

黑森林

• ul无序列表之苹果
• 香蕉
• 水蜜桃

1. ol有序列表之提拉米苏
2. 黑森林

 

 

上述代码结果表明，列表都是块状标签，即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的综合代码：

 

display属性的常见四个属性值：none,inline,block,inline-block

test1:

test2:none

test3:inline

让P标签不在是分段的，而是同行显示

我是第二段

我是第三段

我是第四段

test4:inline-block 由于Inline-block非常像img,即是同行显示（行内元素特性，块级元素独占一行，前后都有换行符），同时也可以设置宽高，（普通的行内元素无法设置宽高（少数可以，除了img就是imput type='image')，块级元素根据内容自动增加宽高，或者直接设置 这是inline-block 这是inline-block

test5:block 我是span但我要行级显示了！ 我是span但我要行级显示了！ 我是span但我要行级显示了！

test5:list 我是span,听说我要列表显示。。 我是span,听说我要列表显示。。 我是span,听说我要列表显示。。

同样不可见，display:none和visibility:hidden的区别-----后者占空间

div{ border:2px #CC6600 solid;} div p{display:inline; color:#F00;} .test_5 span{display:block; width:200px; height:50px; background-color:#CF0; border:#930 2px solid;} .test_6 span{display:list-item; border:2px #6666CC solid;}