码迷,mamicode.com
首页 > Web开发 > 详细

HTML中的行内元素和框元素详解

时间:2015-11-23 00:46:28      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

定义

传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统。 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3.由于某些元素的包含关系迫使其形成块级元素。前2类比较容易理解,第3类稍后举例时候回说明。

而,行内元素也是指宏观上的行内元素,分类和上面一样。

注意,以上块级元素和行内元素都没有在table中,如果加入table会产生很多匿名块级元素或者匿名行内元素,更何况现在布局已经很少有table了。

例子

1、对于块级元素,前2类就不必举例了,属于正常情况,那么第三类具体是什么情况呢?

  1)块级元素的所有子元素都是块级元素

  <div>
    <p>this is p1</p>
    <p>this is p2</p>
    <section>this is section</section>
  </div>

那么div下面的p和section都各自占一行。正常显示。

  2)块级元素里面包含块级元素和匿名文本


<div>
some
<p>this is p</p>
text
<p>this other p</p>
<span>this is span</span>
other text
</div>

按照官方说法,“if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.” 然而事实上并不是如此,只有在块级块周围的匿名文本元素才会产生块级效果,如上面的some和text显示为块级元素,二other text显示为行内元素。

  3)行内元素包含块级

p{
  display:inline;
}
span{
  display:block;
} 

 <p>
    some
    <em>this is em</em>
    <span>this is span</span>
    text
  </p>

上面的some和this isem显示在一行,thisis span和text各占一行。如果 一个行内

2、行内元素也只说明第三种情况

 

 

 

 

 

 

 

 

 

 

参考:http://www.w3.org/TR/CSS21/visuren.html#containing-block

HTML中的行内元素和框元素详解

标签:

原文地址:http://www.cnblogs.com/bdbk/p/4987174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!