注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

块元素和行内元素(内联元素)的区别  

2014-03-02 10:54:00|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块元素,是独占一行的。常见的块元素:div、h1-h6标题、form(只能用来容纳其他块元素)、hr、p、table、ul、ol等。内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素有a和span。

块元素与内联元素的区别?

1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。

块元素和行内元素(内联元素)的区别 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。

3.块元素中高度,行高以及顶和底边距、padding上下左右都可控制;内联元素中高,行高及顶和底边距不可改变。

块元素和行内元素(内联元素)的区别 - 我的左手旁边就是你~ - 我的左手旁边就是你的右手
(这上面的区别,指的是默认情况下的,不包括CSS的刻意控制。也就是说当使用css控制时,块元素和内联元素的属性差异会越来越小。)

.......................................实例代码................................................

<html>

<head>

<meta charset="UTF-8">

<title>HTML5Course - 梦幻雪冰</title>

<style type="text/css">

.a { 

border:1px solid green;

}

.margin_txt{

margin:30px;

}

.padding_txt{

  padding:20px;

}

</style>

</head>

<body>

<span class="a margin_txt padding_txt">

这是行内元素span标签,margin上下左右都是30px,padding都是20px

</span>

<span class="a margin_txt padding_txt">

这是行内元素span标签,margin上下左右都是30px,padding都是20px

</span>

<div class="a margin_txt padding_txt">

这是块元素div标签,margin上下左右都是30px,padding都是20px

</div>

</body>

</html>


  评论这张
 
阅读(162)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017