CSS块级元素和行内元素

CSS块级元素和行内元素

在CSS布局中，元素分为行内元素和块级元素：

1. 行内元素也称为内联元素，所有的元素都可以先定义为行内元素。使用下面的CSS样式代码：

display:inline; /* display属性：指定元素的显示类型 */

可以将所有的元素预先定义为行内元素，从而以行内元素的形式显示出来。

行内元素不能单独占据一行，元素前后没有换行符，行内元素之间不能换行，width、padding-top、padding-bottom、margin-top和margin-bottom属性等对行内元素都不起作用。

在行内元素的左右两边可以有其它元素，如<a>、<span>、<strong>等，都是典型的行内元素。

2. 所有的元素也都可以先定义为块级元素。使用下面的CSS样式代码：

display:block;

可以将所有的元素预先定义为块级元素，从而以块级元素的形式显示出来。

块级元素默认会单独占据一行，元素前后带有换行符，同时，可以设置块级元素的高度、宽度以及边距等。

在块级元素的左右两边没有其它元素。

提示：

可替换元素有可能是块级元素，而块级元素一般都不是可替换元素。通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定display属性为“block”或“list-item”的元素都是块级元素。

display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，如<img>、<input>等。

不过，元素的类型也不是固定的，通过设定CSS的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。

但是浮动元素比较特殊，由于浮动，其旁边可能会有其它元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号或者数字序号。

---

CSS浮动元素

在CSS中，所有的元素，不论它是行内元素还是块级元素，只要将该元素的float属性设置为非none值，则它就变成了浮动元素。

浮动元素自动将display属性设置为block，所以说浮动元素就是浮动的块级元素。

而当块级元素变为浮动元素时，该块级元素的display属性的block值会自动被忽略。

1. 元素的分类

元素分为浮动元素和非浮动元素。非浮动元素又分为行内元素和块级元素。而行内元素和块级元素将float属性设置为非none值时，又会变成浮动元素。

2. 所以说，非浮动元素如果是行内元素，则它不能单独占据一行；如果是块级元素，则它会单独占据一行。而浮动元素会漂浮在它的父元素的一边，当那一行容不下时，则会在新的一行继续漂浮。

---

CSS文档流

文档流是将窗体按照从上到下的顺序分成多行排放元素，并且在每一行中又按照从左到右的顺序排放元素。简单地说，就是按照正常书写汉字的顺序来排放元素的。

浮动元素不占据正常的文档流的空间，但是，浮动元素还是基于正常的文档流进行定位的，然后从文档流中抽出该浮动元素，并移动到它的父元素的左边或者右边，如果父元素是文字内容，则文字会围绕在浮动元素的周围。

当一个浮动元素从正常的文档流中抽出以后，仍然在文档流中的该浮动元素后面的其它元素，将会忽略该浮动元素并填补它原来的空间。

基于文档流， 我们可以很容易地理解下面的定位模式：

• 相对定位：将position属性设置为relative值，是相对于该元素在文档流中的位置进行偏移，并保留原来的空间。
• 绝对定位：将position属性设置为absolute值，并完全脱离文档流，是相对于position属性非static值的最近的父级元素进行偏移。
• 固定定位：将position属性设置为fixed值，并完全脱离文档流，是相对于浏览器窗口进行定位的。

---

块级元素和行内元素的区别

行内元素表现为“行布局”形式，是指元素始终以行的形式进行显示。比如，设置一个行内元素为：

border-bottom:1px solid #000; /* border-bottom属性：设置下边框 */

此时，会在每一行的下方都显示一条黑色的细线。如果是块级元素，那么黑线只会在块的下方显示。

块级元素显示为一个四方块的内容，可以放在页面上的任何地方；行内元素的内容只显示在行中，即“行内框”。

块级元素的显著特点是：每个块级元素都是从一个新行开始显示的，而且它后面的元素也需要另起一行进行显示，块级元素中可以放入多个行内元素和其它的块级元素。

而行内元素只能容纳文本或者其它的行内元素！

如果用容器一词比喻块级元素和行内元素，那么块级元素就相当于一个大容器，而行内元素就相当于一个小容器，大容器中可以放多个小容器。如果我们在大容器中装入清水，同时也想装入一些墨水时，可以将墨水装入小容器，然后将小容器放入大容器中就行了。

如果没有CSS的作用，块级元素会按照每次另起一行的顺序一直往下排。使用CSS，我们可以改变这种默认的HTML布局模式，而把块级元素摆放到我们想要的位置上去，而不是每次都另起一行，同时，一个页面中可以摆放多个块级元素。

就像剪贴文章，我们先把需要的文章从各种报纸、杂志裁剪下来，裁剪下来的每一块内容就相当于一个块级元素，然后，我们把这些纸块按照自己的排版意图，用胶水重新粘贴到一张空白的新纸上，就形成了自己独特的文摘快报了。

作为一种技术的延伸，网页的布局设计也遵循了这种同样的模式！

块级元素和行内元素都是HTML规范中的概念！块级元素和行内元素的基本差异是块级元素都从一个新行开始。而当加入CSS控制以后，块级元素和行内元素的这种属性差异就不成为差异了。比如，我们可以把行内元素加上

display:block;

属性，让行内元素也有每次都从新行开始的属性，从而像块级元素一样进行使用。

---

块级元素（block element）有：

<address>标签、<blockquote>标签、<center>标签、<div>标签、<dl>标签、<fieldset>标签、<form>标签、<h1>标签、<h2>标签、<h3>标签、<h4>标签、<h5>标签、<h6>标签、<hr>标签、<menu>标签、<noframes>标签、<noscript>标签、<ol>标签、<p>标签、<pre>标签、<table>标签、<ul>标签。

---

行内元素（inline element）有：

<a>标签、<abbr>标签、<acronym>标签、<b>标签、<bdo>标签、<big>标签、<br>标签、<cite>标签、<code>标签、<dfn>标签、<em>标签、<font>标签、<i>标签、<img>标签、<input>标签、<kbd>标签、<label>标签、<li>标签、<q>标签、<s>标签、<samp>标签、<select>标签、<small>标签、<span>标签、<strike>标签、<strong>标签、<sub>标签、<sup>标签、<textarea>标签、<tt>标签、<u>标签、<var>标签。

---

可变元素

可变元素指的是根据上下文的语境来决定该元素为块级元素，还是为行内元素。一旦上下文关系确定了它的类别，那么它就要遵循块级元素或者行内元素的规则限制！

常见的可变元素有：<applet>标签、<button>标签、<del>标签、<iframe>标签、<ins>标签、<map>标签、<object>标签、<script>标签。

---

提示

对于块级元素和行内元素来说，它们都可以称为CSS中的盒子！