内联元素：也称为行内元素，当多个行内元素连续排列时，他们会显示在一行里面。

内联元素的特性：本身是无法设置宽度和高度属性的，但是可以通过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元素的宽度与高度的更多相关文章

  1. 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度，高度】

    1.取值 $("#test").text()                                    //取id=test里面的文字 $("#test&qu ...

  2. box-sizing属性（指定针对元素的宽度与高度的计算方法）

    在css中,使用width属性与height属性来指定元素的宽度与高度.使用box-sizing属性,可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内部补白区域与边框 ...

  3. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  4. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  5. display:block; 块级元素。<a>,<span>标签设置宽度和高度

    display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...

  6. JS获取display为none的隐藏元素的宽度和高度的解决方案

    有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...

  7. 获取dom元素的宽度和高度

    一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...

  8. JS无法获取display为none的隐藏元素的宽度和高度的解决方案

    在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( ...

  9. 获取display:none的元素的宽度和高度

    display为none的元素不能通过offsetWidth和offsetHeight来获取宽高(未参与css渲染), 解决方案:可以通过在display为none的元素使用行内样式style设置宽高 ...

随机推荐

  1. ZBrush中的头部模型该如何进行雕刻

    使用ZBrush®能够快速雕刻人物头部模型,教程只是大概介雕刻前的准备工作和一些软件基础,真正的雕刻还需要学习者具备一定的功底,本文向大家展示头部模型制作流程解析,初学者可以以它做参考拓展自己思路. ...

  2. iOS CoreAnimation详解(一) 有关Layer的动画

    以前由于项目需要 也写了一些动画 ,但是知识不系统,很散.这段时间趁着项目完成的空袭,来跟着大神的脚步系统的总结一下iOS中Core Animation的知识点. 原博客地址:http://blog. ...

  3. Centos 7 minimal install 无网络无ifconfig的解决

    Centos7这个比较不厚道, minimal install下居然不带net-tools 先要连上网络 修改/etc/sysconfig/network-scripts/ifcfg-ens12312 ...

  4. MikroTik RB750r2 操作记录

    1. 客户端的下载 http://www.mikrotik.com/download  下载 winbox 2. Reset重置密码的正确姿势 http://wiki.mikrotik.com/ind ...

  5. linux查看cpu 命令

    总核数 = 物理CPU个数 * 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 * 每颗物理CPU的核数 * 超线程数 查看物理CPU个数 cat /proc/cpuinfo| grep & ...

  6. codevs 1245 最小的N个和

    1245 最小的N个和 http://codevs.cn/problem/1245/ 题目描述 Description 有两个长度为 N 的序列 A 和 B,在 A 和 B 中各任取一个数可以得到 N ...

  7. [LeetCode] Paint House 粉刷房子

    There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...

  8. PHP中多站点的设置

    当初配置多站点的问题,整了几个小时没整好,第二天一看才发现是单词拼错了(无奈..),所以能复制的一定复制!!! 1,首先进行Apache的配置(先复制一份进行备份,以免丢失). 进入Apache文件下 ...

  9. 使用SharpPCap在C#下进行网络抓包

    在做大学最后的毕业设计了,无线局域网络远程安全监控策略那么抓包是这个系统设计的基础以前一直都是知道用winpcap的,现在网上搜了一下,有用C#封装好了的,很好用下面是其中的几个用法这个类库作者的主页 ...

  10. Android----消息弹出框

    关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...