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

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

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

  1. .divcss5{
  2. width:150px;height:100px;
  3. border:1px solid #000;
  4. }

2、Body内Html代码为：

  1. divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外

3、截图


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

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

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

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

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

我们用到样式对span设置display:block。
在span的css中增加css display属性，将display值设置为block类型（块），即可实现。

最终CSS+DIV代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <title>span宽度高度解决案例</title>
  6. <style>
  7. .divcss5{
  8. width:150px;height:100px;
  9. border:1px solid #000;
  10. display:block
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外
  16. </body>
  17. </html>

完整代码与效果截图


宽度高度生效

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

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


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

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

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

具体解决CSS代码：

  1. display:-moz-inline-box; /* css注释：for ff2 */
  2. display:inline-block;

注意前后顺序

最终CSS DIV代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <title>span宽度高度解决案例</title>
  6. <style>
  7. .divcss5{
  8. width:150px;height:100px;
  9. border:1px solid #000;
  10. display:-moz-inline-box; /* css注释：for ff2 */
  11. display:inline-block;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外
  17. </body>
  18. </html>

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


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

总结，成功对span设置宽度和高度生效两种情况的选择，可根据自己需要确定。完美解决又不让span标签前后内容换行，这个时候我们使用display:-moz-inline-box; display:inline-block;即可解决。

css span宽度和css span高度成功设置经验篇的更多相关文章

  1. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  2. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  4. CSS中宽度与高度

    div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...

  5. DIV+CSS布局时， DIV的高度和宽度特性

    这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...

  6. HTML设置span宽度

    CSS中的 width 属性并不总是有效的如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效. 解决:span { ...

  7. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  8. css中如何实现左边的高度随着右边改变而改变

    css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...

  9. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

随机推荐

  1. 【WEB前端】CSS书写规范

    古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出 ...

  2. 语音识别功能_微信小程序代办清单任务

    最近想给自己的代办清单任务微信小程序想加个语音识别识别功能,废话不多说,直接说重点,语音识别使用的是百度语音识别api,因为微信小程序的录音输入文件目前只能是mp3或aac 但是百度语音识别不支持这两 ...

  3. .net core 部署 docker (CentOS7)

    最近研究 docker 在Linux 下部署 .net core 项目,在过程中踩了很多坑,网上的资料对我帮助确实大,但有些问题未指明出来. 特地整理一份在发布文档 本文使用的是 root 账号操作, ...

  4. dotnet core瘦身发布

    需要安装nuget包Microsoft.Packaging.Tools.Trimming然后利用如下命令发布dotnet publish -r win10-x64 -c release --self- ...

  5. WPF学习笔记（4）：获取DataGridTemplateColumn模板定义的内容控件

    在之前的DataGrid的DataGridTemplateColumn列中,自定义了一个TextBox控件,但是在C#代码中提示找不到这个控件,导致无法对该控件进行操作.在网上搜索后,发现一些处理方法 ...

  6. [学习笔记]BSGS

    \(\%\%\% Fading\) 早就会了,我最近才理解,当时颓废太多忘学了 1.[SDOI2013]随机数生成器 当天正好在学数列,回来发现用必修五的知识就没了-- 不过特判好烦啊. \(Code ...

  7. Spring学习笔记3——消息队列(rabbitmq), 发送邮件

    本节的内容是用户注册时,将邮箱地址先存入rabbitmq队列,之后返回给用户注册成功:之后消息队列的接收者从队列中获取消息,发送邮件给用户. 一.RabbitMQ介绍     如果之前对rabbitm ...

  8. 移动端font-size适配方案

    概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...

  9. node - 使用request发送http请求

    在nodejs的开发中,有时需要后台去调用其他服务器的接口,这个时候,就需要发送HTTP请求了.有一个简单的工具可以用,Simplified HTTP request client,可以比较方便的模拟 ...

  10. oracle expdp impdp 导入导出备份

    数据库导入导出: 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORA ...