div是块级元素,span是行内元素,这都是什么意思,具体有什么区别

发布网友 发布时间:2022-04-06 07:35

我来回答

6个回答

懂视网 时间:2022-04-06 11:57

style 属性规定元素的行内样式(inline style)

行内元素属性设置

行内元素同样具有盒子模型

行内元素同样具有盒子模型,那么就可以给行内元素设置不同的 css 属性,比如宽度、高度、内边距和外边距,那么行内元素是否需要设置这些属性呢?

行内元素设置宽度和高度

给行内元素设置宽度和高度是无效的

.span1 {
 height: 200px;
 width: 200px;
}
 
<span class='span1'>行内元素设置宽度和高度</span>

此时我们通过观察页面以及盒子的渲染出来的模型,可以发现:

即使给行内元素设置了宽度和高度,行内元素所表现出来的具体的宽度和高度就是内容本身的宽度和高度,所以给行内元素设置宽和高是无效的

行内元素设置 padding 和 margin

将影响左右,但不影响上下

行内元素设置 padding 和 margin 上下具体值表现

<span class='span2'>行内元素设置边距上下属性</span><br>
 
.span2 {
 padding-top: 20px;
 padding-bottom: 30px;
 margin-top: 40px;
 margin-bottom: 50px;
}

从上面的图我们可以发现,我们给行内元素设置了 padding-top、padding-bottom、margin-top、margin-bottom 属性,但是这些属性并没有发生具体的作用,在效果上看貌似是被撑开了,但是并没有对其他的元素造成影响。

行内元素设置 padding 和 margin 左右具体值表现

会发生效果

<span class='span3'>行内元素设置边距左右属性</span><br>
 
.span3 {
 padding-left: 100px;
 padding-right: 200px;
 margin-left: 300px;
 margin-right: 400px;
}

从上图可以看出,如果我们给行内元素设置 padding-left,padding-right,margin-left,margin-right 属性 将会影响该行内元素的位置

更多相关知识,请访问PHP中文网!

热心网友 时间:2022-04-06 09:05

HTML 元素被定义为块级元素或内联元素。

1、块级元素:

①总是在新行上开始;

②高度,行高以及外边距和内边距都可控制;

③宽度缺省是它的容器的100%,除非设定一个宽度。

④它可以容纳内联元素和其他块元素

常见块级元素:address - 地址、blockquote - 块引用、center - 居中对齐块、dir - 目录列表、div - 常用块级容器,也是css layout的主要标签、dl - 定义列表

2、内联元素(行内元素)

①和其他元素都在一行上;

②高,行高及外边距和内边距不可改变;

③宽度就是它的文字或图片的宽度,不可改变

④内联元素只能容纳文本或者其他内联元素

常见内联元素:a - 锚点、abbr - 缩写、acronym - 首字、 b - 粗体(不推荐)、 bdo - bidi override、big - 大字体、br - 换行

扩展资料:

可变元素由上下文语境来决定是块元素还是内联元素 。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块(map)

object - object对象

◎script - 客户端脚本

热心网友 时间:2022-04-06 10:23

关于这2个有什么区别,可以从不同的角度来解释!
先这么理解嘛:
块元素(例如div)在没有任何布局属性作用时,默认排列方式是换行排列;
内联元素(例如span、a)在没有任何布局属性作用时,默认排列方式是在同行排列,直到宽度超出包含它的容器宽度时才自动换行。

这是一种比较容易理解的解释!

其实当内联元素通过display:block;声明后它也可以转换为块元素!这个经常用于当你一个块中放一张图片,要让图片水平居中的时候(示例:<img src="logo.gif" style="display:block;margin:0 auto;" />)
但是块元素(如div table等)就莫法换成内联元素了!

热心网友 时间:2022-04-06 11:57

最简单的理解.
span 不换行
div 换行
为什么呢
因为div是块元素
而span是跟<a></a>一样不影响块的.

如果你想给你的文字加样式.可以在外面加span 比如
<span style="color:red">文字</span>的颜色
这样这五个字依然在一行 只不过"文字"变成了红色.

热心网友 时间:2022-04-06 13:49

简单理解,DIV是放在外部使用的,而span很少单独使用,一般都是放在div或者table里面使用。所以叫行内元素!!!!
嘿嘿,给分吧!!!!!

热心网友 时间:2022-04-06 15:57

块元素是可以转换成内联元素的,只是转换的时候,高度和宽度不起作用了..你可以自己试一下...因为内联元素是不可以设置高度与宽度的..

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com