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> 错误(块级和内联并列一级了)
问题虽小,但是我今天才知道,哎~
你要去做一个大人,不要回头,不要难过。
“总是要走一些弯路,才能知道正确的路是什么。开发是这样,学习是这样,人生也是这样。”