css span宽度和css span高度成功设置经验篇

时间 2019-12-08

标签 css span 宽度高度成功设置经验栏目 CSS 繁體版

原文原文链接

咱们介绍两种状况下的对span宽度高度样式成功设置。css

为了观察和实践CSS SPAN宽度和span高度成功设置，DIVCSS5新建一个css命名为“.divcss5”的盒子，设置css宽度为150px，css高度为100px,为了观察高度和宽度样式，咱们再设置个css边框属性样式。html

一、这样应用案例CSS代码为：ui

二、Body内Html代码为：spa

三、截图firefox

对span设置宽度和高度未生效xml

从上图咱们看见对span标签设置宽度和高度样式没有生效。接下来咱们介绍两种解决span设置高度和宽度生效。htm

第一种状况：对span设置宽度高度后，独占一行（先后将换行）对象

对SPAN设置宽度和高度后效果图

Span成功设置宽度和高度后独占一行blog

咱们用到样式对span设置display:block。
在span的css中增长css display属性，将display值设置为block类型（块），便可实现。utf-8

最终CSS+DIV代码：

完整代码与效果截图

宽度高度生效

第二种状况：对span设置宽度高度后，先后内容不换行

对span标签设置宽度和高度效果图：

对span成功设置宽度和高度同时与先后内容紧贴不换行

这种状况是即能实现span宽度和高度生效，又不让span对象先后内容不换行。

在css2.1标准中为display增长了一个叫inline-block的属性值，恰好能够实现便是inline对象，又能够像block那样设置宽度的属性值，这个属性值在ie6以上版本都有效，firefox要在3.0之后才行，若是要兼容2.0的朋友可使用-moz-inline-box达到一样的效果。

具体解决CSS代码：

注意先后顺序

最终CSS DIV代码：

完整完美解决SPAN高度和高度兼容代码与效果截图

成功完美解决SPAN宽度高度样式

总结，成功对span设置宽度和高度生效两种状况的选择，可根据本身须要肯定。完美解决又不让span标签先后内容换行，这个时候咱们使用display:-moz-inline-box; display:inline-block;便可解决。