HTML 关于p标签的嵌套问题

1、最近公司官网用cmseasy模板做了一套页面，想在后台替换一部分页面内容，但是坑的是在后台编辑的html代码中只能使用p标签，也就是说一个页面只能用p标签，真的是心累，最坑的是我竟然才发现p标签有下面这个问题，哎，废话不多说，写个demo记录一下：

1）页面中有一部分是下图这样的：

但是切图给了：

就是说我们要把中间的文字自己嵌套上去，而且页面只能用p标签：

<p style="background-image: url(images/bg_top.png);width: 100vw; height: 150px;background-size: 100% auto;">
	<p style="font-size: 30px;color: white;">服务&支持</p>
	<p style="font-size: 30px;color: white;">Service&Support</p>	
</p>

但是发现：效果并不是我们想的那样：

2）而且我们设置成行内元素：display：inline-block； 或 display：inline；

效果还是一样，不能实现，最后我使用了绝对定位：position：absolute；调整的位置。

原因是因为：p标签是块级元素，它嵌套不了块级元素；

2、总结：

1）块级元素（block）与内联元素（inline）的区别：

• 块级元素：独占一行，宽高起作用：如：div、p、ul、ol、table、menu、h系列、li等
• 内联元素：可与其他内联元素同一行，宽高不起作用：如：span、q、input、img、i等
• inline-block：可以与内联元素同一行，并且还可以调整宽高。

2）块级元素和内联元素的嵌套规则：

• 内联元素：可以嵌套内联元素，不可以嵌套块级元素
• 块级元素：可以嵌套块级元素，或者是内联元素
• 部分块级元素：不能嵌套块级元素，只能嵌套内联元素，如：p、h1~h6

3）块级元素中嵌套的元素，块元素和块元素一级，内联元素和内联元素一级：

<div><h2></h2><p></p></div>　　　　　　　　	正确（块级和块级并列一级）
<div><a href="#"></a><span></span></div>　　	正确（内联与内联并列一级）
<div><h2></h2><span></span></div>　　　　   	错误（块级和内联并列一级了）　

问题虽小，但是我今天才知道，哎~

你要去做一个大人，不要回头，不要难过。

“总是要走一些弯路，才能知道正确的路是什么。开发是这样，学习是这样，人生也是这样。”