为什么在html页面设置<span>的高度和宽度没有效果呢

为什么在html页面设置<span>的高度和宽度没有效果呢,第1张

<span>标签属于行内元素(inline),所以无法设置高度和宽度;如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block):

span{display:inlie-block}

实例演示:下面给出了两种样式,class1设置span 的宽高,class2改变span为行内块体元素,然后给其中一个span添加class1样式,另一个同时添加class1和class2样式,观察效果

创建Html元素

<span class="class1">示例文字</span><br>

<span class="class1 class2">示例文字</span>

设置css样式

.class1{width:200pxheight:30pxline-height:30pxpadding:10pxmargin:20pxborder:1px solid green}

.class2{display:inline-block}

观察效果:

第一个span因为默认为行内元素,所以宽度和高度的设置不起作用;第二个span已经改为inline-block方式,所以可以设置宽度和高度

<input name="" type="text" size="15" style="width:100pxheight:50px"/>

修改style里面相对应的宽和高像素就行了。

background-size:宽度 高度

如:给body背景写:

body{

background-size:200px 300px

}

html:超文本标记语言, 标准通用标记语言下的一个应用。

“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。

超文本标记语言的结构包括 “头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6100396.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存