css span宽度和css span高度成功设置经验篇
我们介绍两种情况下的对span宽度高度样式成功设置。
为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px,css高度为100px,为了观察高度和宽度样式,我们再设置个css边框属性样式。
1、这样应用案例CSS代码为:
2、Body内Html代码为:
- 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代码:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <title>span宽度高度解决案例</title>
- <style>
- .divcss5{
- width:150px;height:100px;
- border:1px solid #000;
- display:block
- }
- </style>
- </head>
- <body>
- divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外
- </body>
- </html>
完整代码与效果截图
宽度高度生效
第二种情况:对span设置宽度高度后,前后内容不换行
对span标签设置宽度和高度效果图:
对span成功设置宽度和高度同时与前后内容紧贴不换行
这种情况是即能实现span宽度和高度生效,又不让span对象前后内容不换行。
在css2.1标准中为display增加了一个叫inline-block的属性值,刚好可以实现即是inline对象,又可以像block那样设置宽度的属性值,这个属性值在ie6以上版本都有效,firefox要在3.0以后才行,如果要兼容2.0的朋友可以使用-moz-inline-box达到同样的效果。
具体解决CSS代码:
- display:-moz-inline-box; /* css注释:for ff2 */
- display:inline-block;
注意前后顺序
最终CSS DIV代码:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
- <title>span宽度高度解决案例</title>
- <style>
- .divcss5{
- width:150px;height:100px;
- border:1px solid #000;
- display:-moz-inline-box; /* css注释:for ff2 */
- display:inline-block;
- }
- </style>
- </head>
- <body>
- divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外
- </body>
- </html>
完整完美解决SPAN高度和高度兼容代码与效果截图
成功完美解决SPAN宽度高度样式
总结,成功对span设置宽度和高度生效两种情况的选择,可根据自己需要确定。完美解决又不让span标签前后内容换行,这个时候我们使用display:-moz-inline-box; display:inline-block;即可解决。
css span宽度和css span高度成功设置经验篇的更多相关文章
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- span宽度高度设置
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
- CSS中宽度与高度
div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...
- DIV+CSS布局时, DIV的高度和宽度特性
这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...
- HTML设置span宽度
CSS中的 width 属性并不总是有效的如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效. 解决:span { ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- css中如何实现左边的高度随着右边改变而改变
css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...
- 解决css的float父div没有高度
在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...
随机推荐
- HTML给table添加单线边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- websevice动态控制访问ip
一般而言webservice是部署在哪台服务器,然后它的address location就是指向哪个,但是由于有些情况处于各种原因,如网络策略,需要先访问某个ip之后再进行跳转到一个ip,这个时候就需 ...
- Elasticsearch重要文章之四:监控每个节点(ThreadPool部分)
http://zhaoyanblog.com/archives/754.html ThreadPool部分 Elasticsearch 内部使用了线程池,通过这些线程池之间的合作完成工作,在需要时传递 ...
- Android开发重点难点:RelativeLayout(相对布局)详解
https://i.cnblogs.com/EditPosts.aspx?opt=1 重点知识 和线性布局(LinearLayout)一样,RelaiveLayout相对布局也是我们用的比较多的一个布 ...
- springboot常用注解
@SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration注解.其中@ComponentScan让 ...
- Swift5 语言参考(一) 关于语言参考
本系列文章的这一部分描述了Swift编程语言的形式语法.此处描述的语法旨在帮助您更详细地理解语言,而不是允许您直接实现解析器或编译器. Swift语言相对较小,因为Swift代码中几乎无处不在的许多常 ...
- Linux巩固记录(5) hadoop 2.7.4下自己编译代码并运行MapReduce程序
程序代码为 ~\hadoop-2.7.4\share\hadoop\mapreduce\sources\hadoop-mapreduce-examples-2.7.4-sources\org\apac ...
- css 的 conic-gradient 学习
偶然间在微信公众号奇舞周刊上看到了这篇文章<CSS Painting API>,算是对 conic-gradient的初次见面. 后来有空的时候,百度搜了一下,看了这篇文章<CSS神 ...
- Linux 学习错误点整理之网络配置
本人是一名实习生,最近在学习Linux,在实操的过程中还是遇到了一些问题,所以想记录下来,供自己以后复习,也希望能给跟我一样的菜鸟的人带来一点点帮助. 我用的是VMware Workstation P ...
- Oracle修改指定表空间为自动扩展
1.数据文件自动扩展的好处 1)不会出现因为没有剩余空间可以利用到数据无法写入 2)尽量减少人为的维护 3)可以用于重要级别不是很大的数据库中,如测试数据库等 2.数据文件自动扩展的弊端 1)如果任其 ...