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

定义

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

转载于:https://www.cnblogs.com/bdbk/p/4987174.html

HTML中的行内元素和框元素详解相关推荐

Python中过滤序列内置函数filter()的详解（常用）
目录一.功能二.语法三.举例 3.1代码 3.2运行结果一.功能用于过滤序列,过滤掉不符合条件的元素,返回一个迭代器对象,如果要转换为列表,可以使用 list() 来转换. https: ...
html中的行内标签吗,HTML标签中行内元素和块级元素详解
本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...
html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...
HTML中元素的position属性详解
HTML中元素的position属性详解转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
python多维数组添加元素_numpy中三维数组中加入元素后的位置详解
今天做数据处理时,遇到了从三维数组中批量加入二维数组的需求.其中三维数组在深度学习的特征数据处理时经常会使用到,所以读者有必要对该小知识点做到清楚了解并掌握.现对三维数组中的元素位置结合代码做详细归纳 ...
java迭代器删除元素_java迭代器中删除元素的实例操作详解
java迭代器中删除元素的实例操作详解 2021-01-21 16:40:08 我们知道通过Iterator,可以对集合中的元素进行遍历.那么在其中遇到我们不需要的元素时,可不可以在遍历的时候顺便给删 ...
android启动页使用gif,android中使用react-native设置应用启动页过程详解
一.背景在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案二.方案 1 ...
python 命令-python解析命令行参数的三种方法详解
这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 python解析命令行参数主要有三种方法: ...
python标准类型内建模块_Python内建模块struct实例详解
本文研究的主要是Python内建模块struct的相关内容,具体如下. Python中变量的类型只有列表.元祖.字典.集合等高级抽象类型,并没有像c中定义了位.字节.整型等底层初级类型.因为Pytho ...

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

定义

例子

总结

HTML中的行内元素和框元素详解相关推荐

最新文章

热门文章