html中默认元素类型和默认显示属性

作者:enenba | 发表于:2012-02-15 01:41 | 分类:html+css

除 html、body 和 table 部分之外,在 HTML 4.01 推荐中与主要内容有关的所有元素都有一种相关联的类型:内联或块。每种类型以不同方式决定了默认布局表现:

inline

紧接在内联元素前/后的文本和图片与内联元素的内容渲染为同一基准线。但如果该文本或图片过长,它们就会与包含元素的边缘相重叠,在这种情况下,内嵌内容就会跑到一条新基准线上面,而该基准线位于之前的那条基线的下面。

内联元素中,文本行的布置会视需要(或允许)而带有软换行符,除非用 white-space 属性修改了这种方式。

样式表规则中可应用于这些元素的 margin、width、height 和 float 属性被忽略。(除了 img 和 object)

内联元素只能容纳文本或其它内联元素。

block

这些元素将在其容器中渲染为离散块。

这些元素的前后将总是渲染有断行点,除非将 float 值设为 left 或 right。

如果嵌套块元素之间没有任何内容,它们之间的断行点通常会被合并。

宽度为 auto(默认)的块元素会一直扩展,直到占满所有可获得的宽度。

display 属性有三个常用的值¬——block、inline 和 none——其中两个是指对应的元素类型。改变元素的 display 值可以使内联元素的表现方式像块元素那样,也可以使块元素的表现方式像内联元素那样,还可以改变文件的渲染效果,使之看起来就像元素(和它的所有内容)根本不存在一样。

 

html标签在默认情况下哪些元素与哪些类型相对应是很关键的,其关系简列于表2中:

元素 类型 子类型 说明
a inline special  
abbr inline phrase  
acronym inline phrase  
address block   一般与p的行为方式类似
blockquote block   在!DOCTYPE声明为Strict时,必须包含至少一个块元素
body     封装了整个文档画布;一般会有 10px 的边距(在 IE, Firefox 和 Safari中)或是填充距(在Opera中),像素大小视所用的 screen 媒体而定
cite inline phrase  
div block    
em inline phrase  
fieldset block   默认情况下一般按照 border: 1px black; 渲染
form block    
h1 … h6 block heading  
input inline formctrl  
img inline special  
label inline formctrl  
li block   文档类型定义中没有指明该元素的类型,但该元素可包含块元素和内联元素;完成版的 CSS2.1 推荐为列表项留出了 display 值
ol block list  
p block   只能包含内联元素;一般会渲染有顶边距和底边距
span inline special  
strong inline phrase  
table block    
ul block list  

表2: 常用 HTML 元素和它们的类型。只有具有相同子类型的相邻块元素之间的边距才会合并。

上一篇: JS验证时间格式   |   下一篇:php采集网站的title部分» 标签: css html标签

评论: