一直以来没有弄清block与line-block的用法，今天花点时间整理一下。

<body>

    <div class="div1">div1</div>

    <div class="div2">div2</div>

    <span class="span1">span1</span>

    <span class="span2">span2</span>

</body>
div,span{width: 100px;height: 100px;background-color: #cbcc6b;margin: 1px}

span这样的行内元素是不能设置宽高的，display的默认属性inline；div属于块级元素可以设置宽高，并且独占一行，display的默认属性block；效果如图：

当给span元素设置:

span{display: block}

效果如图：

设置：

span{display: inline-block}

效果如下：

同时块级元素也可以设置为：

div,span{width: 100px;height: 100px;background-color: #cbcc6b;margin: 1px;display: inline}

总结：设置display时，block：块级元素，独占一行，可设置宽高；inline：行内元素，默认在同一行显示，不能设置宽高；inline-block：相当于block加上左浮动。

注意：在ie6、7下对块级元素使用inline-block会出现问题。可以使用float实现相同的效果。

dispaly 的block与inline-block的用法的更多相关文章

  1. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  2. display:inline-block，block，inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  3. block，inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. block，inline和inlinke-block细节对比

    block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...

  5. block，inline和inline-block概念和区别（转）

    转自  http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...

  6. block，inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

  7. block，inline和inline-block对比

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  9. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  10. block，inline和inline-block概念和区别（转载）

    转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...

随机推荐

  1. MMU

    1.MMU功能 将虚拟地址转化为物理地址:访问权限管理. 2.地址转化 2.1 总体分析 2.2 一级转换格式 位解释:(段设置) B:表示是否使能write buffer: C:  表示是否开启ca ...

  2. 用Python给你的博客加上水印

    之前写的博客里面用到的图片都没有加水印,今天才在别的网站上发现自己的博客居然一个字不动的出现在了别人的文章里,而且还不标注出处,简直醉了. 其实博客这种东西讲真我是很愿意让别人看得,因为自己写的也比较 ...

  3. ffmpeg - libavutil/attribute.h

    在ffmpeg中,这个文件被很多其他的文件所包含.该文件中定义了一些gcc中支持的语言扩展的宏, 例如强制内联,外部内联,pure函数等.并根据是否使用了GCC,以及GCC的版本,把宏转换为 相应的编 ...

  4. Attribute "resource" must be declared for element type "mapper".

    今天在玩mybatis的时候,遇到这个奇葩问题. 最后发现,原因是 dtd文件配置错误了.错把Mapper的直接copy过来 把DOCTYPE mapper改成configuration,Mapper ...

  5. Egret Wing3 FTP使用方法

    FTP 挺实用的,不用自己去申请sinasea什么的免费空间来测试项目了. 添加FTP服务器配置 默认就行. 指定目录上传至FTP服务器 选择免费云测试空间.然后选择bin-release/web目录 ...

  6. MySQL主从同步的延迟原理

    1. MySQL数据库主从同步延迟原理. 答:谈到MySQL数据库主从同步延迟原理,得从mysql的数据库主从复制原理说起,mysql的主从复制都是单线程的操作,主库对所有DDL和DML产生binlo ...

  7. PHPRPC jsp发布服务

    PHPRPC是面向服务的高性能远程过程调用协议.PHPRPC for java 是此协议的一种实现,详细请到官方看PHPRPC的介绍 ,以其它rpc协议的性能对比请:Java.PHPRPC.Hessi ...

  8. python学习笔记3－celery分布式任务处理器

    celery是用python写的一个异步的任务框架,功能非常强大,具体的说明可以查看官网,这里主要提供点demo让你迅速使用该框架   1.环境安装 默认安装好了redis pip install c ...

  9. 关于ES6的数组字符串方法

    注:ES6的一些新属性会显示语法错误,不过不会影响效果,在Languages里面也可以调: let:用来定义变量 特点:只能在代码块里面使用,let拥有块级作用域;并且let不允许重复声明;比如: v ...

  10. android 编译错误 com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0

    解决方案一: JDK版本不一致造成的,指的是高版本的JDK编译的class不能放在低版本的JDK上运行. 如果是Version 52,就表示JDK8编译的class不能运行在JDK7上,所以需要在本地 ...