一直以来没有弄清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. C# 将DataTable存储到DBF文件中

    (准备)生成一个DataTable /// <summary> /// 生成一个数据表 /// </summary> /// <returns></retur ...

  2. Flask——route

    Flask——route 关于路由flask中有三种方法(例子)处理: flask.Flask.route 装饰器(关于装饰器可以参考该文),这时最常见的使用方法,在装饰器的参数中加入想要的路由即可, ...

  3. jquery源码学习之queue方法

    队列模块的代码结构 静态方法jQuery下有queue,dequeue,_queueHooks这三种方法:静态方法不建议直接在外部调用: 实例方法.queue,.dequeue,.clearQueue ...

  4. java如何得到GET和POST请求URL和参数列表(转)

    在servlet中GET请求可以通过HttpServletRequest的getRequestURL方法和getQueryString()得到完整的请求路径和请求所有参数列表,POST的需要getPa ...

  5. CSS3基础 02(2D /3D)

    一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translat ...

  6. 未在本地计算机上注册“OraOLEDB.Oracle.1”提供程序解决方案

    未在本地计算机上注册“OraOLEDB.Oracle.1”提供程序解决方案 一.现象:  C#程序中需要以Provider=OraOLEDB.Oracle.1方式访问ORACLE数据库.但程序执行时报 ...

  7. CUnit的用法

    转自:http://blog.csdn.net/scucj/article/details/4385630/ CUnit下载地址: http://sourceforge.net/projects/cu ...

  8. 反向代理及如何获得原始IP

    在现代网站架构中,scalability 已经不再是可有可无的质量属性,而是决定着网站的生死攸关,所以稍微上规模的站点都不会只有一个web server,让internet clients 直接与其交 ...

  9. JQuery this 和 $(this) 详解

    this  this 在面向对象语言中,指代调用上下文对象,在js中,也是一模一样的概念,所以不管这个this出现在什么地方,只要追踪到当前调用对象是什么,那么this是什么也就一目了然了. 先看一个 ...

  10. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...