CSS DIV元素与SPAN元素的差别

日期:2021-03-12 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

最先讲两个定义,1个是行内元素,1个是块级元素。制造行业元素是指该元素标识的內容不不容易对如今的构造导致危害,属于运用款式,輔助运用款式表等作 用;而块级元素为1个块状,独立占有1行,非常于在1个该元素前后左右各加1个换行。

二者最显著的差别是:DIV(division)是1个块级元素,能够包括段 落、题目、报表,甚至诸如章节、引言和备注等。而SPAN 是行内元素,SPAN 的前后左右是不容易换行的,它沒有构造的实际意义,纯碎是运用款式,当别的行内元素都不符合适度,可使用SPAN。 块元素非常于嵌入元素在前后左右各加1个
换行。实际上,块元素和行内元素也并不是1成 不会改变的,要是给块元素界定display:inline,块元素就变成嵌入元素,一样地,给嵌入元 素界定了display:block就变成块元素了。

实际流程:

编码示例:


拷贝编码
编码以下:

<style> div,span{border:1px solid #000;margin:2px;} </style>
<div>div1</div><div>div2</div><span>span1</span><span>span2</span>
<div style="display:inline">div3</div> <div style="display:inline">
div4</div> <span style="display:block">span3</span> <span style="
display:block">span4</span>

提醒:能够先改动一部分编码后再运作

技能:一些盆友会说DIV是层标识,实际上HTML里 是沒有层这个说法的,只但是是以便易于了解,Dreamweaver里才这样写的,每一个目标都可以以 变成“层”,只必须给目标界定position属 性(值为absolute或relavite)。 比如,要让照片变成“层”,能够这样写代 码:


拷贝编码
编码以下:

<img src="demo.gif" style="posibion:absolute;left:20px;top:20px"/>

非常提醒

本例编码运作实际效果如图所示,以便更能表明难题,这里给块元素和嵌入元素都加了1像 素宽的黑色实线边框,从图中能够看到,DIV默认设置为块元素,界定display属 性值为inline后之内嵌元素显示信息,而SPAN默 觉得嵌入元素,界定display特性值为block后 则以块元素显示信息。

SPAN标识有1个关键而好用的特点,即它甚么事也不容易做,它的唯1目地便是紧紧围绕你的HTML代 码中的其它元素,这样你便可认为它们特定款式了。