举例:
请把下面二行代码放进body标签里:
<div style=”border: 1px solid red;”>div1</div>
<div style=”border: 1px solid red;”>div1</div>
浏览器的呈现效果:
div1
div1
这二个div占据了二行空间,叫做块级元素(block)。
再把下面二行代码也放进body标签里:
<span style=”border: 1px solid red;”>span1</span>
<span style=”border: 1px solid red;”>span2</span>
浏览器的呈现效果:
span1 span1
这两个span并列在一行,叫做内联元素(inline)。
块级元素和内嵌元素的区别:
· 块级元素 用来搭建网站架构、布局、承载内容,如:div、ul、li、dl、dt、dd、h1-h6、p、address……
内联元素 用在文本之中的某一行的修饰,如:a、span、strong、sub、sup、img……
· 块级元素是盒子,盒子是有宽高的,即不管里面有多少东西,外部就可以设置其宽高。
内联元素是袋子,其宽高由里面的东西撑起来的。
· 块级元素和内嵌元素之间互相转换,转换的代码如下:
display:block; /* 转成块元素 */
display:inline; /* 转成内嵌元素 */
· 块级元素和内嵌元素对于CSS的调用规则:
1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错
2. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
h1-h6、p、dt。
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
3. li内可以包含div标签/父级ul或者是ol
li和div标签都是装载内容的容器,地位平等,没有级别之分。
4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错
分享到:
相关推荐
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等
12.5.2 为内嵌元素定义热点 12.6 巩固与自测 第13章 使用脚本语言 13.1 了解脚本语言 13.1.1 客户端脚本 13.1.2 服务端脚本 13.2 在html文档中使用脚本代码 13.2.1 使用script元素定义脚本代码 13.2.2 在内建事件中...
首先讲两个概念,一个是行内元素,一个是块级元素。行业元素是指该元素标记的内容不不会对... 块元素相当于内嵌元素在前后各加一个 换行。其实,块元素和行内元素也不是一成 不变的,只要给块元素定义display:inline,
提到 XHTML 标签的嵌套规则,我们先得知道有这么二类 XHTML 标签,一类叫做 块级元素(block),一类叫做 内嵌元素(inline,也有许多人叫它:内联、行内、线级等)。 块级元素 和 内嵌元素 的划分标准很简单,请把...
使用java代码处理html标签代码,支持html样式内嵌,支持标签,图片地址属性替换。为富文本框上传(word文档转html)提供方便,如有问题可以联系本人。
网站静态网页设计入门基础,包括html各个元素的设计
主要介绍了html标签的嵌套规则介绍,本文讲解了块级元素、内嵌元素以及HTML 标签的嵌套规则等内容,需要的朋友可以参考下
winform与内嵌echarts的数据交互,让数据动起来.zip
AT&T汇编语言与GCC内嵌汇编简介 linux 内核 汇编 介绍以上内容。pdf文件
PHP PHP,一个嵌套的缩写名称,是英文超级文本预处理语言...PHP 是一种 HTML 内嵌式的语言,PHP与微软的ASP颇有几分相似,都是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言
Unity苹果安卓平台内嵌浏览器
AT&T汇编语言与GCC内嵌汇编简介.pdf
将图片以Base64的编码,内嵌在html的代码中, 提供的是样例代码 即: 不是在html中指定图片的路径的形式 结合: http://download.csdn.net/detail/okpfsje123/5304296 这样就可以在发送的邮件中,直接看到图片(图片...
2.1.4. 内嵌的媒体 8 2.1.5. 交互 8 2.2. 新表单元素 9 2.2.1. 新表单元素 9 2.2.2. 表单元素的新特性 10 2.2.3. 验证支持 10 2.3. JS的增强 11 2.4. Canvas 11 2.5. 地理位置 12 2.6. 跨文档消息机制 13 2.7. ...
PyQt5 QWebEngineView内嵌本地HTML。实现数据交互完整代码。