为了账号安全,请及时绑定邮箱和手机立即绑定

p标签内增加div后,为什么变了?

<style type="text/css">

div,p{background:pink;}

</style>

</head>

<body>

<div>div1</div>

<div>div2</div>

<p>段落1段<div>落1段落1</div>段落1段落1</p>

</body>

练习题里:原先P标签内都有粉丝背景色,增加<div>...<div>后,</div>段落1段落1</p>就没背景颜色了!这是为何??

http://img1.sycdn.imooc.com//551d3cc60001c89103720145.jpg

正在回答

2 回答

p里不能嵌套div(及其他block元素)。“</div>段落1段落1” 这里是没有css样式的,前面的“<p>段落1段<div>“自动补全了</p>,所以显示背景。

这是DTD(文档类型定义)里的规则

The P element represents a paragraph. It cannot contain block-level elements (including P itself).
P表现的是一个段落。不能包含块级(block)元素(包括P自身)。

We discourage authors from using empty P elements. User agents should ignore empty P elements.
我们不鼓励使用空的P标签,因为浏览器会忽略空的P标签。    


随笔一则,仅供参考:

今天工作也不是很忙,做调试提示框时候发现了两个苦恼的问题,整了很久我也没有知道是啥原因。所以赶紧请教同事。
o(︶︿︶)o 唉,不是惭愧,那个解决问题的方法是我不知道的,我以前也没有看到过,不过现在明白了就写下来以后记住就好了~
第一个我在p标签里嵌套了一个div,结果网页上总是显示的代码和写的代码不同,同事告诉我,p标签上不能嵌套div
第二个是背景图片显示定位的问题,我在写css的时候显示把背景定位写到上面,背景图片紧挨其后,在页面显示的效果图片是有那个阴影,但是怎么也不会出来小图标。我急了,这是咋回事呢?想了许久还是不知道,
结果同事一眼就看出来了,要把背景图片写在背景图片定位的上面去,这样就好了。。
哦哦哦,原来是这样的,知道html 在网页上是从上到下读的,就没有想到css也是这样的,哈哈哈~~~

1 回复 有任何疑惑可以回复我~

div默认是block方式显示,会单独撑开一行,所以会把P撑开。

而div默认没有外边距,p有上下边距,所以p中的div会距离上边的内容有边距

0 回复 有任何疑惑可以回复我~
#1

xiao小开 提问者

p标签内增加<div>..</div>会导致另起一行,我是理解的。可是为什么最后一行“段落1段落1”(即</div>段落1段落1</p>)还是被包含在整个<p>....</p>内的,为什么没背景效果了?请教,谢谢!
2015-04-02 回复 有任何疑惑可以回复我~
#2

用户已禁用 回复 xiao小开 提问者

如果你按下F12的话,你可以看到开发者工具中,p中div后面的文字已经不再p内了,所以就没有了背景。
2015-04-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

p标签内增加div后,为什么变了?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信