HTML行级元素和块级元素区别

HTML块级元素与行级元素

 

转自：http://gkecenter.blog.163.com/blog/static/181380305201291745234195/

 

一.两种类型

HTML中的大部分元素都可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。块级元素会从新的一行出现，行 级元素则不会。块级元素的前后都会有插入的断行，所以如果不用CSS则没法让两个块级元素并列在一起。

 

二.块级元素

块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如

只能包含块级元素。其他的块级元素则可以包含 行级元素如

.也有一些则既可以包含块级，也可以包含行级元素。如，

,

三.行级元素

行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性：

width

height

max-width

max-height

min-width

min-height

如果你想改变这些属性，应该应用给它的属于块级元素的父元素。

四.Spring Brother

有些元素既可以是块级元素，也能成为行级元素。例如 和。当这两个元素直接出现在中时，它们就是块级元素。如果作为

的子元素，他们就是行级 元素，此时不能包含其他的块级元素。

五.CSS中的类型

CSS中的盒子也有块级和行级之分，也包括其他类型，如，列表和表格等。HTML中的块级元素会产生块级盒子，行级元素会产生行级盒子。在CSS 中，可以用display控制盒子的类型。如，把一个行级元素转换成块级元素。注意，这种转换并不能改变元素本质。即使你把它转换成了 块级元素，你也不能让它包含其他的块级元素，你转换的只是CSS的盒子的外观。

通常没有必要改变元素的盒子类型，下列情况一般有改变盒子的需求：

水平的列表菜单

不断行的标题

隐藏元素

六.盒子类型的变化

对于应用了浮动或绝对定位的元素，如此类样式：float:left，position:absolute，position:fixed。这类元 素的盒子类型显然改变了。它们都变成了块级元素，因此display属性一般都被忽略。

七.盒子的消失

如果对元素应用display:none，它（包括它的子元素）将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。

 

一.行内元素和块级元素有哪些？

块级元素

	information on author
	long quotation
	push button
table caption
	definition description
	deleted text
	generic language/style container
	definition list
	definition term
	form control group
	interactive form
	heading
	heading
	heading
	heading
	heading
	heading
	horizontal rule