html中span的宽高,css如何设置span的相对宽度？

css如何设置span的相对宽度？下面本篇文章就来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

因为span标签元素属于内联元素，而内联元素是忽略宽度和高度的，无法设置宽度和高度。

可以使用display属性将span元素转换为块状元素或行内块状元素。块状元素或行内块状元素的高度、宽度、行高以及顶和底边距都可设置。display:block--将元素显示为块级元素，此元素前后会带有换行符。

display:inline-block--将元素显示为行内块元素；此元素和其他元素都在一行上，不会自动换行，默认排列方式为从左到右；

然后使用width属性配合相对长度单位%来设置span的相对宽度。

示例：

div{

border:1px solid red ;

}

span{

display: block;

width: 50%;

border: 1px solid palegreen;

}

fetr

效果图：

span的宽度是相对于div和浏览器窗口的，总是其的50%。

更多前端开发知识，请查阅 HTML中文网 ！！