HTMLCSS中的块级元素与行内元素

在HTML中，元素主要分为块级元素（block）和行内元素（inline）。

块级元素总是独占一行，一行内添加一个块级元素后一般无法添加其他元素，其后面的元素也会自动另起一行显示。块级元素的宽度、高度、内边距和外边距都是可控制的。块级元素一般可嵌套块级元素或行内元素。

在浏览器中，文本会将窗口的一行优先排满，实在排不开再重起一行，并不会延长到我们看不到的位置。

动手写2.4.1 HTML中的文本

“动手写2.4.1”中连续的文本在浏览器中展示如图2.4.1所示。

行内元素也叫内联元素，行内的意思就是元素像文本一样一行行往下排列。多个行内元素都在同一行上显示，只有当页面排不开的时候才会显示到下一行。行内元素的宽度、高度、左右内外边距不可改变。行内元素只能容纳文本或者其他内联元素，其子孙元素不能是块级元素。

常见的块级元素有：div、h1、h2、h3、h4、h5、h6、p、dl、ul、ol、form、fieldset、hr、pre、table等。

常见的行内元素有：span、a、b、i、em、label、input、select、textarea、img、br、code、strong、font等。(www.xing528.com)

还有一些元素会根据上下文语境成为块级元素或行内元素，例如applet、button、del、iframe、script等。

图2.4.1　HTML中长文本展示

动手写2.4.2 块级元素与行内元素

这个例子帮助我们理解块级元素和行内元素在浏览器中的展现形式，其实际效果如图2.4.2所示：

图2.4.2　“动手写2.4.2”在浏览器中的显示结果