加载中…
个人资料
jannesand
jannesand
  • 博客等级:
  • 博客积分:0
  • 博客访问:163,995
  • 关注人气:21
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

内联元素与块元素的区别

(2013-09-17 14:24:09)
标签:

内联元素

块元素

it

分类: DIV CSS
div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;

与之相反,

像“span”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

其实你需要知道的行内元素就是 span 和 a ,其他的行内元素,比如 strong、b、font 这些都是以前在HTML中用来设定文字样式的标记,而使用CSS以后,这些标记应该都不用了,所以知道它们没有什么用,弄不好反而让初学者混淆了一些概念。

block表现出来的特点是折行的.
inline表现出来是不换行的.

但如果给一个元素加入了浮动(float)的话.他们就会排在一行,按自然顺序.不管是block还是inline定义了浮动之后,可以定义高度,宽度.

inline单独存在的条件下是定义不了宽度高度的.block可以.

 例如:

a正常情况下是不能定义高度的。宽度倒是可以定义,但是对鼠标有反应的只有文字部分

如果加上display:block的话,高度可以定义,但是不在一行了,整个块对鼠标都有反应了

如果加上float:left的话,能定义高宽,整块对鼠标有反应 但是 它是横向菜单,

    所有允许被 BODY 元素包含的元素,要么是块级的;要么是内联的;要么既可以算作块级的,也可以算作内联的。但是绝对不存在一个能被BODY包含,但即非块级,又非内联的元素。
   
    常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
    常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
    另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素,既可以作为块级元素,也可以作为内联元素。

    一般来说块级元素可以包含块级元素和内联元素;
    但内联元素只能包含内联元素。
    要注意的是,每个特定的元素,能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。
    比如 P 元素,只能包含内联元素,而不能包含块级元素。

 块元素(block element)
     一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P。"form"这个块元素比较特殊,它只能用来容纳其他块元素。

    

    

 内联元素(inline element)
    一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素"a"。

    ps:关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。
   
    另外提到内联元素,我们会想到有个display的属性是
display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

 
 可变元素
    需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。


块元素(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 排序表单
段落
pre 格式化文本
table 表格
ul 非排序列表

内联元素(inline element)
锚点
abbr 缩写
acronym 首字
粗体(不推荐)
bdo bidi override
big 大字体
br 换行
cite 引用
code 计算机代码(在引用源码的时候需要)
dfn 定义字段
em 强调
font 字体设定(不推荐)
斜体
img 图片
input 输入框
kbd 定义键盘文本
label 表格标签
短引用
中划线(不推荐)
samp 定义范例计算机代码
select 项目选择
small 小字体文本
span 常用内联容器,定义文本内区块
strike 中划线
strong 粗体强调
sub 下标
sup 上标
textarea 多行文本输入框
tt 电传文本
下划线
var 定义变量

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet java applet
button 按钮
del 删除文本
iframe inline frame
ins 插入的文本
map 图片区块(map)
object object对象
script 客户端脚本

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有