CSS元素类型
来源:豆豆猫的窝 发布时间:2009-04-27 12:25:00
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。
1. 替换和不可替换元素
从元素本身的特点来讲,可以分为替换和不可替换元素。
a) 替换元素
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:
<img src=”cat.jpg” /><input type="submit" name="Submit" value="提交" />
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
b) 不可替换元素
(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:
<p>段落的内容</p>
段落<p>是一个不可替换元素,文字“段落的内容”全被显示。
2. 显示元素
除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。
a) 块级元素
在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。
典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。
通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。
但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。
b) 行内元素
行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。
display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。
不过元素的类型也不是固定的,通过设定CSS 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。
猜你喜欢
- 阅读上一篇:微软建议的ASP性能优化28条守则(3) 技巧 8:迟一点获得资源,早一点释放资源 这里是一个小技巧供您参考。一般来说,最好迟一
- 采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值&g
- 这是一个给新手学习代码的帖子,包含以下内容:如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷
- 本次薯片会一改以往低调、沉稳之作风,先瑜伽团美女show上阵,再是以臭为首的吃喝团上阵,两轮下来大家情绪Hight到了极点,自然讨论的时候思
- 在一般的情况下,使用批量fetch的几率并不是很多,但是Oracle提供了这个功能我们最好能熟悉一下,说不定什么时候会用上它。declare
- 昨天晚上睡觉前突然想到的,在此记一笔。传统方式以前我们做文章系统或新闻发布系统的时候,做文章内链(标签)的时候,通常是通过以下方式来实现的:
- 一个页面执行一次Sql语句的话,不会影响到性能。如果一个页面要执行很多次Sql语句,而且使用的是同一个数据库连接,那么上面的方法可能会影响到
- 在我们写样式的时候,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在
- Response是负责将信息传递给用户的对象,它可动态地响应客户端的请求,并将动态生成的响应结果返回给客户端浏览器。 一,Resp
- 最好也是最简单的办法就是利用Cookie,而不必用到数据库。当然,你愿意用数据库也可以。下面就是利用Cookie来实现的:< 
- 防止Application对象在多线程访问中出现错误asp代码处理代码如下(VB):<%Application.Lock()Appli
- 在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavi
- Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书
- 如何用ADO批量更新记录?是的,ADO有这项功能,不过好像用的人不太多(不了解还是不会用呢?):<HTML> &nbs
- 前面已经介绍了关于Dreamweaver MX 2004的基本操作
- 最近接触到Tencent的广告越来越多,户外广告牌和电视上都是,可以明显感觉到Tencent的扩张野心,以及对QQ品牌定位的重塑。摆脱低龄化
- 动态生成的IFRAME,设置SRC时的,不同位置带来的影响。以下所说的是在IE7下运行的。IE6下也是同样。在这个blog中,直接点击运行代
- SQL Server导出表到EXCEL文件的存储过程:*--数据导出EXCEL导出表中的数据到Excel,包含字段名,文件为真正的Excel
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client,并创建好了和Oracle8数据库的
- 常见的误解有: 1. 只用 ado.net ,无法进行动态 SQL 拼接。 2. 有几个动态参数,代码的重复量就成了这些参数的不同数量的组合