对p标签嵌套块级元素的思考
来源:互联网 发布:武汉矩阵互动怎么样 编辑:程序博客网 时间:2024/06/05 14:34
今天在准备给学弟学妹讲css的子选择器时,列了一个简单的小demo,结果却发现了问题
- <p class="maindiv">
- 我是父元素
- <p>
- 子元素
- <p>
- 孙子元素
- </p>
- </p>
- </p>
当用p的时候
会发生无法包裹子元素,而使用div时候却可以
- <div class="maindiv">
- 我是父元素
- <div>
- 子元素
- <div>
- 孙子元素
- </div>
- </div>
- </div>
通过上网的查询和学习,发现原来p元素内无法包裹块级元素。
因为我们使用的DTD中规定了块级元素是不能放在<p>里面的,再加上一些浏览器纵容这样的写法:
<p>这是一个段落的开始
<p>这是另一个段落的开始
当一个<p>签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:
<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
这也就解释了,为何firebug中最后会多出2个空的<p></p>。
很多浏览器把<body>视为一级,一部分块级元素二级,而有一部分不能自由嵌套的块级元素则被视为三级
,它们包括有:标题标记 的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>; 段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
三级元素就是指,只能嵌套内联元素的块级元素。p也恰好是其中之一。其实在内联元素中,还是可以再区分一下的,有几个元素 (<img>、<input>等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,其实它们也就是我们常说的行内块,虽然这些元素属于inline,但是却具有一定的block(可以设置宽高),我们也可以赋予任何元素css属性display:inline-block。本身具有inline-block的元素应该没有!
- 对p标签嵌套块级元素的思考
- 对p标签嵌套块级元素的思考
- 【html基础】p标签里面不能嵌套块级元素
- P标签为什么不能嵌套块级标签
- 从块级元素和内联元素浅谈标签的嵌套规则
- 从块级元素和内联元素浅谈标签的嵌套规则
- 从块级元素和内联元素浅谈标签的嵌套规则
- p标签内不能包含块级元素
- 块元素,内联元素,内联块标签的划分及相互转化和嵌套
- 块级标签和内联标签之间的嵌套规则
- HTML 关于块级元素<p>所遇到的问题
- html标签的元素分类-块级元素,内联元素,块级内联元素
- 块级元素 内联元素嵌套规则
- 嵌套div(块级元素)的静态定位
- span元素与块级元素(div、p)位于同一行时的垂直居中问题
- 关于a 标签变为块级元素的作用
- 内联元素可以嵌套块级元素吗?
- CSS块级标签与内联标签嵌套规则
- 全新Intelligent.Manufacturing.Software.IMSPost.v8.2f.Suite.Win64后处理 在大多数情况下,用户只需在IMSPOST软件的对话窗口和菜单项中
- Spring Boot 系列博客
- mybatis 中生成的字段不带引号 #{}和${}
- Android小技巧
- 函数模板和模板函数
- 对p标签嵌套块级元素的思考
- leetcode 229. Majority Element II 摩尔投票法 Moore Voting
- Mybatis逆向工程(填坑)
- 回车触发事件
- 开山篇
- 修改ActionBar上各个元素的间距问题
- Debugging Analysis of Kernel panics and Kernel oopses using System Map
- netstat 命令
- 过程模型介绍和对比(敏捷开发、瀑布式模型等)