p元素包含div元素的问题

我们都知道div可以包含块状元素和行内元素，包括p元素，但是p元素包含div会怎么样呢，下面就来试验一下吧：

首先：

    <style type="text/css">p {border: 2px dotted red;}div {border: 2px solid green;}</style><p><div>asdfghjkl</div></p>

结果是这样的：

然后，我们仔细分析到底是什么促成了如此诡异的布局

在p元素和div元素之间写下一个字符串，选中p元素的第一个子元素

    <style type="text/css">p:nth-child(1){border: 2px dotted red;}div {border: 2px solid green;}</style><p>qwertyuiop<div>asdfghjkl</div></p>

原来div上面的那一条斑点边框不是一条，而是两条，只不过原来没内容重叠在一起了

那么第三个元素就是div和p之间的内容了？再在div下面添加一行字符串，用css选中第三个元素：

    <style type="text/css">p:nth-child(3){border: 2px dotted red;}div {border: 2px solid green;}</style><p>qwertyuiop<div>asdfghjkl</div>zxcvbnm</p>

啊啊啊，可以看出添加的字符串既不属于div又不属于p ，两个元素之间的字符串完全被抛弃了

由此，我们看出，p元素被div分割成了三块块状元素，并且第三块是有问题的。在p元素中添加div元素是无法控制格式的，所以不建议在p元素内添加div元素是有原因的，除非你特别牛逼，能算出来到底该怎么布置

注：以上全部显示结果是在Firefox浏览器中实现的，由于博主太懒没有在其他浏览器中打开（主要是畏惧上传图片的流程哈哈）

p元素包含div元素的问题相关推荐

子节点含有表单元素的div元素的blur事件
1.div元素的blur事件 blur事件一般在表单元素如input元素才是存在的,对div.span等元素时无效的,但是可以给div元素加上tabindex属性,也可以让div等元素有焦点,所以bl ...
html5的a能不能放div,从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型...
我们知年有这只制明个手近天点里要它出水机近天点道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css ...
jQuery——遍历DOM元素的后代元素
任务描述本关任务:用 jQuery 向下遍历 DOM 节点.效果如下: 相关知识为了完成本关任务,你需要掌握:1.children(),2. find(). 向下遍历DOM节点基本的html结构 ...
html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数，实现不同的样式...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
html5--1.18 div元素与布局
1.18 div元素与布局 1.元素的分类 2.div元素与布局 1.元素的分类块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...
控制元素的div属性
1.需求分析改变元素的宽.高.颜色.显示.重置等属性. 2.技术分析基础的css.html.js 3.详细分析如图,单击按钮,改变元素属性: 3.1 HTML部分根据视图不难发现,内容分两大不 ...
IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
BUG描述: 页面中某DIV使用了position:relative,结合top=-25px等元素定位.在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动. 分析: 这是IE6一个已知 ...
关于router-link包含dom元素会出现Warnings while compiling.警告的问题！
做路由的时候,我突然有一个想法,这个<router-link></router-link>能不能不仅仅包文字,能不能包含dom元素呢?如果能包dom元素,那它都能包含什么dom ...
html toggle自动隐藏,Javascript / HTML – 切换可见性(当另一个div元素呈现可见时自动导致一个div元素隐藏)...
基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性. 我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点 ...

p元素包含div元素的问题

p元素包含div元素的问题相关推荐

最新文章

热门文章