往 p 标签里放了个 div,把浏览器都给整不会了

简介: 块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)

image.png


我们先上代码:


<p>    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵    <div>      嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿    </div>    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </p>


让我们看看浏览器的解析结果:


image.png


没错,出问题了,那么问题是有了,但这是为什么呢?


这时朋友跟我说:p 是行内元素,div 是块级元素,块级元素是不能放在行内元素里面的。


我:呃呃呃,就你这水平居然知道块级元素是不能放在行内元素里面的?那 p 明显是块级元素你咋不知道?


这里我们再补充一下块级元素和行内元素的区别:


块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)


行内元素**或称为内联元素**:内容决定所占空间的多少,内容多少就占多少空间。不能设置宽高(默认宽高是0)。margin 垂直方向无效(margin-top,margin-bottom),如果设置垂直方向用line-height属性。


仔细看看浏览器解析后的结果:


<p>
    呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
  </p>
  <div>
    嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
  </div>
  “哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈”
  <p></p>


我们发现浏览器是这么处理的:


在 p 遇见 div 还没有结束时自动给我们补上了


而后面遇见


而前面没有


时自己给我们加上了一个


其实仔细想想,它这么做确实没啥不对的,因为 html 标签的作用就是:专门给文本添加特殊的语义。那么我们的 p 标签的语义是啥?当然就是表明这是一个段落了,你往里塞一个会独占一行的 div 合适吗?显然是不合适的,那你 div 就把段落给切开来了,那么浏览器这么做也就没什么不对了,它不就是把你的段落给切开来了吗,哈哈。


所以我们要记住,p 里面不能放块级元素,像 div 或 p 这种东西可千万不要往 p 里面塞啊。

目录
相关文章
|
11月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
283 0
|
19天前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
23 2
|
1月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
2月前
div高度填满浏览器剩余空间(不出现纵向滚动条)
div高度填满浏览器剩余空间(不出现纵向滚动条)
20 0
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
143 0
|
应用服务中间件 区块链
小猫很惊奇!修改tomcat项目的浏览器标签小图标
小猫很惊奇!修改tomcat项目的浏览器标签小图标
533 0
小猫很惊奇!修改tomcat项目的浏览器标签小图标
|
存储 Web App开发 缓存
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
【前端第二课】各种HTML标签;HTML引入CSS的方法;HTML引入js的方法;基础的浏览器调试工具
|
Web App开发 前端开发 Android开发
微信浏览器中 Input 标签 CSS 兼容性问题
微信浏览器中 Input 标签 CSS 兼容性问题
153 0
|
算法
让一个div盒子在浏览器视窗中居中的算法
让一个div盒子在浏览器视窗中居中的算法
181 0
让一个div盒子在浏览器视窗中居中的算法

热门文章

最新文章

下一篇
DDNS