如何改变span元素的宽度与高度
内联元素：也称为行内元素，当多个行内元素连续排列时，他们会显示在一行里面。
内联元素的特性：本身是无法设置宽度和高度属性的，但是可以通过CSS样式来控制，达到我们想要的宽度和高度。
span举例1：
1. span元素属于内联元素，当我们直接设置了宽度和高度的时候代码及显示的结果如下:
...
<style type="text/css">
span{border:1px solid blue;width:200px;height:200px;}
</style>
...
<span>我是内联元素</span>
虽然定义了宽度和高度，但是并没有起作用。
2. 在样式属性中添加display:block。
<style type="text/css">
span{border:1px solid blue;width:200px;height:200px;display:block;}
</style>
这时候可以看到长度和宽度起作用了。
span举例2：
1. 定义2个并排的span元素，并定义样式display属性设置为block,分别显示如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:12px;
text-align: center;
line-height:20px;
margin-left:5px;
border:1px solid red;
background-color:red;
color:white;
width:100px;
height:20px;
display:block;
}
</style>
</head>
<body> <span>放大</span><span>缩小</span>
</body>
</html>
当定义display:block的时候，表示的span的属性变成一个行级块元素，所以这时候显示在两行中。
2.修改display的属性，display:inline-block;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:12px;
text-align: center;
line-height:20px;
margin-left:5px;
border:1px solid red;
background-color:red;
color:white;
width:100px;
height:20px;
display:inline-block;
}
</style>
</head>
<body> <span>放大</span><span>缩小</span>
</body>
</html>
这样可以就可以将span元素放到一行，并且可以使用css来自定义元素的大小样式了。
inline-block: 既有inline的同行特性，又有block的宽度和高度特性。
如何改变span元素的宽度与高度的更多相关文章
- 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度，高度】
1.取值 $("#test").text() //取id=test里面的文字 $("#test&qu ...
- box-sizing属性（指定针对元素的宽度与高度的计算方法）
在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- display:block; 块级元素。<a>,<span>标签设置宽度和高度
display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...
- JS获取display为none的隐藏元素的宽度和高度的解决方案
有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...
- 获取dom元素的宽度和高度
一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...
- JS无法获取display为none的隐藏元素的宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( ...
- 获取display:none的元素的宽度和高度
display为none的元素不能通过offsetWidth和offsetHeight来获取宽高(未参与css渲染), 解决方案:可以通过在display为none的元素使用行内样式style设置宽高 ...
随机推荐
- PHP玩转微信公众平台自定义接口
从微信公众平台开通自定义回复后,就一直在关注微信接口这一块,很想用自定义回复这块做个站长工具的查询,例如PR查询,备案查询等,输入网址信息,就能自动获取PR,获取备案信息,应该是一个不错的想法.不过以 ...
- 【转】40条常见的移动端Web页面问题解决方案
1.安卓浏览器看背景图片,有些设备会模糊 2.图片加载 3.假如手机网站不用兼容IE浏览器,一般我们会使用zep ...
- PAT 1046. 划拳(15)
划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...
- POJ 2125 Destroying the Graph 二分图最小点权覆盖
Destroying The Graph Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 8198 Accepted: 2 ...
- Linux 共享内存详解一
共享内存段被多个进程附加的时候,如果不是所有进程都已经调用shmdt,那么删除该共享内存段时,会出现一个临时的不完整的共享内存段(key值是0),无法彻底删除.只有当所有进程都调用shmdt,这个临时 ...
- Python学习Day2笔记(字符编码和函数)
1.字符编码 #ASCII码里只能存英文和特殊字符 不能存中文 存英文占1个字节 8位#中文编码为GBK 操作系统编码也为GBK#为了统一存储中文和英文和其他语言文字出现了万国码Unicode 所有一 ...
- [LeetCode] Populating Next Right Pointers in Each Node II 每个节点的右向指针之二
Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...
- RESTful API 设计指南
转自:http://www.ruanyifeng.com/blog/2014/05/restful_api.html 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机. ...
- supervisor的安装与简单介绍
1,介绍 Supervisor是一个进程管理工具,官方的说法 用途就是有一个进程需要每时每刻不断的跑,但是这个进程又有可能由于各种原因有可能中断.当进程中断的时候我希望能自动重新启动它,此时,我就需要 ...
- js-读取复选框
js: var obj = document.getElementsByName("yk"); var check_val = []; for(k in obj){ if(obj[ ...