元素类型

元素是文档结构的基础,在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属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。

转载于:https://www.cnblogs.com/iloveyoucc/archive/2012/09/17/2688637.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React 等框架使用 index 做 key 的问题

React 等框架使用 index 做 key 的问题 假如有两个树&#xff0c;一个是之前&#xff0c;一个是更变之后&#xff0c;我们抽象成两种可能性。 插入内容在最后插入内容在最前 关于插在中间&#xff0c;原理一样&#xff0c;就不阐述。 使用 ul 代表树&#xff0c;并且使用了…

非捕获Lambda的实例

大约一个月前&#xff0c;我在Java 8的lambda表达式框架下总结了Brian Goetz的观点 。 目前&#xff0c;我正在研究有关默认方法的文章&#xff0c;令我惊讶的是&#xff0c;我又回到了Java处理lambda表达式的方式。 这两个功能的交集可能会产生微妙但令人惊讶的效果&#xff0…

SQL Server 查询性能优化——创建索引原则(一)

索引是什么&#xff1f;索引是提高查询性能的一个重要工具&#xff0c;索引就是把查询语句所需要的少量数据添加到索引分页中&#xff0c;这样访问数据时只要访问少数索引的分页就可以。但是索引对于提高查询性能也不是万能的&#xff0c;也不是建立越多的索引就越好。索引建少…

WordPress强制跳转https教程

在互联网火热的今天&#xff0c;安全问题显得越来越重要&#xff0c;为了用户信息安全&#xff0c;很多热门网站都启用了https 有小伙伴就问&#xff1a;我启用了https&#xff0c;为什么访问的时候显示的还是http呢&#xff1f; 其实&#xff0c;有时候并不是因为我们ssl证书…

AEM中的单元测试(大声思考)

如果要在AEM中进行单元测试&#xff0c;这不是任何建议&#xff0c;而是各种思想的总结和一些可供选择的选项。 一段时间以前&#xff0c;我已经为客户进行了一些研究&#xff0c;这篇文章在很大程度上受到了这项工作的影响&#xff0c;但是很多上下文相关的东西已经被淘汰了。…

Java 8的装饰器模式

在最近的一篇文章中&#xff0c;我描述了装饰器模式如何拯救了我的一天。 我给出了一个小代码段&#xff0c;其中包含创建装饰器的最简单方法&#xff0c;但承诺Java 8会有更好的方法。 这里是&#xff1a; 用Java 8装饰 HyperlinkListener listener this::changeHtmlViewBa…

WPF中使用流文档灵活地显示内容

WPF中使用流文档灵活地显示内容 by: Markus Egger form: http://msdn.microsoft.com/msdnmag/issues/07/08/wpf/default.aspx?loczh Windows Presentation Foundation (WPF) 提供了一系列功能。事实上&#xff0c;功能…

canvas图表(4) - 散点图

原文地址&#xff1a;canvas图表(4) - 散点图 今天开始完成散点图&#xff0c;做完这一节&#xff0c;我的canvas图表系列就算是完成了&#xff0c;毕竟平时最频繁用到的就是这几类图表了&#xff1a;柱状&#xff0c;折线&#xff0c;饼图&#xff0c;散点。经过编写canvas图表…

Java8排序–性能陷阱

Java 8带来了lambda的所有优点&#xff0c;使我们能够使用声明式样式进行编程。 但这真的免费吗&#xff1f; 我们是否应该担心必须为新的编程功能付出的代价&#xff1f; 这是一个我们可能要担心的例子。 考虑对这个简单类的实例进行排序&#xff1a; private static class…

词频统计工程相关

&#xff08;the format of this article is from SkYjoKEr&#xff09; //开始干之前 模块1、WordClass 一个存放单词以及实现相关操作的类&#xff0c;其中单词以二元组<word, freq>的形式存储。 &#xff08;20min&#xff09; 2、WordCounter 完成单词统计&#xff0…

canvas图形编辑器

原文地址&#xff1a;http://jeffzhong.space/2017/11/02/drawboard/   使用canvas进行开发项目&#xff0c;我们离不开各种线段&#xff0c;曲线&#xff0c;图形&#xff0c;但每次都必须用代码一步一步去实现&#xff0c;显得非常麻烦。有没有一种类似于PS&#xff0c;CAD…

2015年Java 8强势开始

JDK 8从2015年开始&#xff0c;其博客文章和文章的受欢迎程度将激增。 这与Java本月自动升级到JDK 8恰好吻合。 在这篇文章中&#xff0c;我列出并简要描述了2015年已经发布的有关JDK 8的众多文章和文章。 JDK 8 Streams在最近的帖子中很受欢迎。 我在2015年发表的第一篇博文是…

富文本编辑器、日期选择器、软件天堂、防止XSS攻击、字体icon、转pdf

【超好用的日期选择器】 Layui&#xff1a;http://www.layui.com/laydate/ 备注&#xff1a;日期选择器&#xff0c;用过很多很多&#xff0c;自己也写过一些&#xff1b;相信这个简单而又不简单的选择器&#xff0c;能够给你多些美好的时光 【很不错的几个富文本编辑器】 …

GIS开源程序收集(转载)

分类包括&#xff1a;GIS基础函数库、GIS控件、GIS桌面程序、GIS数据引擎、WEBGIS浏览器端程序、WEBGIS服务器程序、GPS相关程序&#xff0c;其它分类 派系&#xff1a;“NET”派系&#xff0c;“C”派系&#xff0c;“Java”派系&#xff0c;脚本派系&#xff0c;其它派系 “N…

Sacrilege –自定义SWT滚动条

SWT是本机OS小部件之上的薄抽象层。 如果您打算将应用程序与OS外观很好地集成在一起&#xff0c;那将是一件非常好的事情。 但是&#xff0c;作为一种折衷方案&#xff0c;这种方法大大限制了样式功能。 特别是&#xff0c;我感觉到本机SW​​T滚动条通常会干扰更精细的视图布…

关键字屏蔽-正则

【问题】关键字屏蔽是社交类软件必做的功能&#xff0c;当然了&#xff0c;一般来讲都是产品的中后期来做&#xff1b;不同产品规定不一样&#xff0c;跟着产品运营走&#xff0c;可以的 【方法】我们从技术的角度来看到这个问题&#xff0c;实现一个功能后者说实现一个需求&a…

Sub-Projects in Xcode(Xcode中的子项目)

source:http://www.cocoanetics.com/2011/12/sub-projects-in-xcode/ translation:http://www.xiaojiayi.com/2012/08/15/xcode中的子项目&#xff08;译文&#xff09;/ is work! 转载于:https://www.cnblogs.com/snowleung/archive/2012/09/26/2703250.html

堆上与堆外的内存使用情况

总览 最近有人问我在Java中使用堆内存的好处和智慧。 面临相同选择的其他人可能会对这些答案感兴趣。 堆外内存没什么特别的。 线程堆栈&#xff0c;应用程序代码&#xff0c;NIO缓冲区都在堆外。 实际上&#xff0c;在C和C 中&#xff0c;您只有非托管内存&#xff0c;因为默…

从CSS实现正片叠底看=混合模式mix-blend-mode

兼容性&#xff1a;这个东西说多了也没意思&#xff0c;像HTML5和CSS3这种兼容性时刻变化的东东&#xff0c;我们最好在自己支持的设备上实验&#xff0c;不支持&#xff0c;就在想办法呗&#xff0c;这个东西就是为了方便和好玩 所有属性&#xff1a; mix-blend-mode: normal…

实现对gridview删除行时弹出确认对话框的四种方法

实现对gridview删除行时弹出确认对话框的四种方法 在.net2.0中&#xff0c;实现对gridview删除行时弹出确认对话框的四种方法 1&#xff0c;GridView中如何使用CommandField删除时&#xff0c;弹出确认框? 在VS2005提供的GridView中我们可以直接添加一个CommandField删除列&am…