当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:2个重要概念块状元素和内联元素

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

No. « 113 114 115 116 »

技术文章搜索

关键字

CSS样式表 中的 CSS教程:2个重要概念块状元素和内联元素

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-03   浏览: 46 ::
收藏到网摘: n/a

在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。

注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟~
块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
做了个对比表，帮助大家更容易理解。

  块状元素 内联元素
是否允许其他元素同处一行 no yes
width和height是否起作用 yes no


对于上面的概念，我们用实例的方式给大家讲明白，要注意听哟~
要求：ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度
均为100像素的div2。
CSS代码如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
HTML代码如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. </div>
为了方便初学者更好的学习，我把完整的代码发出来
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>CSS学习网---“可容纳内联元素和其他块状元素”</title>
  7. <style type="text/css">
  8. <!--
  9. #div1{width:300px; height:300px; background:#900;}
  10. #div2{width:100px; height:100px; background:#090;}
  11. -->
  12. </style>
  13. </head>
  14. <body>
  15. <div id="div1">
  16. <div id="div2"></div>
  17. </div>
  18. </body>
  19. </html>
怎么样，是不是下面的效果
 

1.gif

如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联
元素和其他块状元素”颜色为白色。
CSS代码如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. a{color:#fff;}
HTML代码如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <a href="#">可容纳内联元素和其他块状元素</a>
  4. </div>
是不是下面的效果
 

2.gif

到这里，我们可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。

好~！我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如
下
CSS代码如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff;}
HTML代码如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <div id="div3"></div>
  4. <a href="#">可容纳内联元素和其他块状元素</a>
  5. </div>
是不是下面这个效果
 

3.gif

是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个div4，div5同样的他们还是继续位于前一个下面，垂直排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的块状元素还是毫无联系的内联元素，都不行，都到下面一行待着去，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素a也别想和他处一行，但是事情是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，咱有办法，具体什么办法，我们后面会详细讲解，知识不属于本节内容，就也不多说了，大家留意后面的教程唷~

到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在a的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93)
CSS代码如下：
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff; background:#F93;}
HTML代码如下：
  1. <div id="div1">
  2. <div id="div2"></div>
  3. <div id="div3"></div>
  4. <a href="#">可容纳内联元素和其他块状元素</a>
  5. <a href="#">Love CSS</a>
  6. </div>
效果是不是下面这个
 

4.gif

两个连接a是不是处于同一行(不要忘记a是内联元素哟~)，这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”，为什么不说“内联元素允许其他元素与其位于同一行”，因为其他元素包括两种元素，内联元素和块状元素，它如果和内联元素在一块那就肯定在一行了，如果和块状元素在一块，即使它同意，他后面的块状元素也不同意，块状元素会另起一行位于它的下一行。

我们继续添加条件，现在大家给内联元素a在css中加上宽度和高度，比如width:100px;height:50px;看看有什么变化
CSS代码
  1. #div1{width:300px; height:300px; background:#900;}
  2. #div2{width:100px; height:100px; background:#090;}
  3. #div3{width:100px; height:100px; background:#009;}
  4. a{color:#fff; background:#F93;width:100px;height:50px;}
看到效果了没有，是不是没有任何变化呢，这就说明了概念中的内联元素的宽度(width)高度(height)不起作用，它的大小只随内部文本或者其他内联元素变化，具体证明算是给大家一个作业，自己来证明一下。

如果要让定义好的宽度和高度对内联元素起作用，有什么办法没有？答案是：当然。因为事情没有绝对的在CSS上面也成立，因为CSS中有两种元素，内联元素和块状元素，但是宽度和高度只对块状元素起作用，内联元素不起作用，如果我们把内联元素转化成块状元素，他不就具有了块状元素的特性了嘛，当然宽度和高度也就起作用了，如果你能想到这个思路，证明你的大脑现在非常活跃哟，这时候我们只需要给相应的内联元素加上一个属性display:block就可以了，如下
  1. a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
怎么样，起作用了吧，和下面的效果一样嘛~
 

5.gif

为什么两个a不处于同一行了呢，那是因为这两个内联元素a都被转化成了块状元素，既然成功转化为块状元素，就应该具有块状元素最显著的一个特点，不允许其他元素与他同一行，所以这两个a垂直排列喽~
那有没有把法让他们处于同一行？当然有啦，后面课程会告诉大家^_^
好了，到这里，大家通过实例对内联元素的概念理解的也应该很透彻了，后面就列出所有的内联元素和块状元素，方便以后大家查阅


块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量