定义

传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统。 其实框元素是指宏观上的框元素,它包括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、行内元素也只说明第三种情况

  块级元素内包含行内元素和匿名文本

 <p>
some
<em>em</em>
text
</p>

上面代码中some em text 显示在一行,这也就是匿名文本在行内元素周围显示为行内元素的效果,并且,这些匿名行内元素会继承他父级块元素的属性。这里特别说明一点,“white-space”属性不会产生任何匿名的行内元素。

总结

行内元素和块元素的定义对于布局有较大的影响,还有一个特殊的块级元素li,这个元素不仅产生主框,还会多出一个额外的序列编号,这2个是行内元素,但是整体显示为一个块级元素,可以更具list-type-style和list-style-position来确定mark box的位置。

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

HTML中的行内元素和框元素详解的更多相关文章

  1. HTML span标签:用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

  2. html中的行内元素和块级元素小结

    一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加 ...

  3. HTML中元素的position属性详解

    HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935   HTML中DOM元素有5种定 ...

  4. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  5. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

  6. 第15.41节、PyQt(Python+Qt)入门学习:输入部件QComboBox组合框功能详解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.概述 Designer中输入工具部件中的Combo Box组合框与 ...

  7. 《手把手教你》系列技巧篇(三十二)-java+ selenium自动化测试-select 下拉框(详解教程)

    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...

  8. 《手把手教你》系列技巧篇(四十七)-java+ selenium自动化测试-判断元素是否显示(详解教程)

    1.简介 webdriver有三种判断元素状态的方法,分别是isEnabled,isSelected 和 isDisplayed,其中isSelected在前面的内容中已经简单的介绍了,isSelec ...

  9. 《手把手教你》系列技巧篇(四十八)-java+ selenium自动化测试-判断元素是否可操作(详解教程)

    1.简介 webdriver有三种判断元素状态的方法,分别是isEnabled,isSelected 和 isDisplayed,其中isSelected在前面的内容中已经简单的介绍了,isSelec ...

  10. STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解)

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) 前面 ...

随机推荐

  1. 【JAVAEE学习笔记】hibernate03:多表操作详解、级联、关系维护和练习:添加联系人

    一.一对多|多对一 1.关系表达 表中的表达 实体中的表达 orm元数据中表达 一对多 <!-- 集合,一对多关系,在配置文件中配置 --> <!-- name属性:集合属性名 co ...

  2. 使用Windows Server 2012+ 搭建VPN 简单 高效 稳定

    前几天,在机缘巧合之下,买到了一台性能配置一般的腾讯云服务器(香港的),因为性能比较差,没啥太大用途,就想着试试搭建一个VPN,后来,经过多次尝试和查资料,总结出了一套几乎100%成功的教程,现在拿来 ...

  3. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  4. 使用DBeaver连接hive

    介绍 在hive命令行beeline中写一些很长的查询语句不是很方便,查询结果也不是很友好,于是找了一个hive的客户端界面工具DBeaver,它也支持很多符合JDBC连接的数据库,例如MySQL.O ...

  5. 说说ajax上传数据和接收数据

    我是一个脑袋不太灵光的人,所以遇到问题,厚着脸皮去请教大神的时候,害怕被大神鄙视,但是还是被鄙视了.我说自己不要点脸面,那是不可能的,但是,为了能让自己的技术生涯能走的更长远一些,受点白眼,受点嘲笑也 ...

  6. [codeforces113D]Museum

    D. Museum time limit per test: 2 seconds memory limit per test: 256 megabytes input: standard input ...

  7. [转] 传说中的WCF

    这个解决方案中包含两个项目,一个叫Server,另一个叫Client,天生一对. 1.启动VS 2010,推荐用2010以上版本(2012 RC版也行),因为越高版本越好用,最好Express的,不要 ...

  8. ListView实现下拉刷新和上拉加载功能

    1 public class RefreshListView extends ListView implements OnScrollListener { private View mHeaderVi ...

  9. Xamarin开发笔记—设备类&第三方弹窗的使用和注意事项

    一.设备类是Xamarin重要开发组成部分,下面介绍一下设备类的主要用法: //唤醒打电话 Device.OpenUri(new Uri("tel:180xxxxxxxx")); ...

  10. 【Android Developers Training】 11. 支持不同语言

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...