p标签与span标签的区别

直接上代码

<!DOCTYPE html>
<html><head><style type="text/css"></style></head><body><p>我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span><p>我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span><p>我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span></body>
</html>

效果如下图

f12直接看代码
p标签css

span标签css

这里我因为我开了f12，所以p标签774.4px其实就是当前window的max-width,莫非p标签自动换行的缘故与width属性有关？
重新贴代码

<!DOCTYPE html>
<html><head><style type="text/css">p{width: auto !important;}</style></head><body><p style="width: auto !important;">我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span><p>我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span><p>我是p标签</p><p>我是p标签</p><span>我是span标签</span><span>我是span标签</span></body>
</html>

这里的代码给p标签加了width:auto的样式，但是在浏览器中执行效果如下图

我去查看了一些资料，在w3c中找到了这样一段描述：

当我把p标签的display改成inline,style中的width自动变成auto

效果如下图

看来p标签与span标签区别在于display，一个是block，一个是inline.

p标签与span标签的区别相关推荐

div标签和span标签区别
<div>标签和<span>标签的异与同相同的地方: 都是成对标签例如<div></div><span></span> 都可以 ...
html中div标签圈套,HTML中div标签和span标签的应用
HTML中div标签和span标签的应用发布时间:2020-06-16 18:09:16 来源:亿速云阅读:217 作者:元一一.div标签 DIV标签,称为区隔标记.作用是设定字.画.表格等的 ...
简述div标签和span标签的不同_div与span区别及用法
DIV与SPAN区别及div与san用法篇接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
行内标签（最常用的：a标签、img标签、span标签）
a 标签: 功能: 从一个页面跳转到其他页面,或者是当前页面的其他位置. 属性: href :指定跳转的目标路径. 值可以是一个外部网站的地址: 也可以是一个内部网页的地址 target: _self ...
简述div标签和span标签的不同_SPAN标签和DIV标签的区别
SPAN元素和DIV元素有什么区别解决思路: 最明显的区别是:DIV是块元素,SPAN是内嵌元素.块元素相当于内嵌元素在前后各加一个换行.其实,块元素和行内元素也不是一成不变的,只要给块元素定义d ...
简述div标签和span标签的不同,div和span标签之间的区别
Can anyone give me the difference between div and span tags? 解决方案 a div is a block level, meaning it ...
关于使得p标签以及span标签里面内容自动换行css实现
只需要给p标签加上以下代码即可 p{word-wrap: break-word;word-break: break-all;overflow: hidden; }
html css修改span的字体的值,一、编辑网页文本（span标签与字体属性、文本属性）...
一.本课目标掌握字体属性的使用掌握文本排版样式的使用为什么使用CSS? 有效的传递页面信息使用CSS美化过的页面文本,漂亮,美观,吸引用户可以很好的突出页面的主题内容,使用户第一眼可以看到页 ...
【一】HTML：标题注释，段落换行，格式化、div、span标签
目录创建简单的页面标题注释段落和换行体育新闻文本格式化标签 div span标签创建简单的页面 <!DOCTYPE html> <html lang="zh- ...

p标签与span标签的区别

p标签与span标签的区别

p标签与span标签的区别相关推荐

最新文章

热门文章