dispaly 的block与inline-block的用法
一直以来没有弄清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的用法的更多相关文章
- CSS——display（Block none inline等）属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- display:inline-block，block，inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block，inline和inlinke-block细节对比
block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...
- block，inline和inline-block概念和区别（转）
转自 http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- block，inline,inline-block的区别
block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...
- block，inline和inline-block对比
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- css(二) block，inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block，inline和inline-block概念和区别（转载）
转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
随机推荐
- 根据指定Word模板生成Word文件
最近业务需要批量打印准考证信息 1.根据Table数据进行循环替换,每次替换的时候只替换Word中第一个Table的数据, 2.每次替换之后将Word中第一个Table数据进行复制,将复制Table和 ...
- coroSync packmarker
CoroSync+Pacemaker实现web高可用 2015-04-12 23:38:19 标签:CoroSync pacemaker 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 ...
- wget cooikes 下载
2.下来用wget带cookie的命令下载,命令如下: wget -c –load-cookies=cookies.txt ”下载地址” -O “文件名” & [文件名处自己命名 ...
- NSString和NSMutableString的创建及其一些常用方法
NSString和NSMutableString都是对象类型,是NSObject的子类.NSString是不可变字符串,NSMutableString是可变字符串 一.NSString的创建 1.创建 ...
- Shared pool
Shared pool 一.Shared pool的引入 当你发出一条sql语句交付Oracle,在执行和获取结果前,Oracle对此sql将进行几个步骤的处理过程: 1.语法检查(syntax ch ...
- kali 虚拟机开启mysql:3306 供主机访问.
mysql -u root -p use mysql; update user set host='ip' where user='root'; //更新访问权限 flush privileges; ...
- 深入理解js——prototype原型
之前(深入理解js--一切皆是对象)中说道,函数也是一种对象.它也是属性的集合,你也可以对函数进行自定义属性.而JavaScript默认的给了函数一个属性--prototype(原型).每个函数都有一 ...
- Android_ADB 常用 shell命令 和 sqlite3 简单增删改查
今天学习了一个ADB的常用命令.接下来简单使用几个常用ADB shell 命令. 首先我们得明白什么是adb.exe ADB -Android Debug Bridge, 是 Android sdk ...
- linux 下文件节点索引
最近发现一个奇怪的问题,就是一个pyhton 后台的服务一直打印日志文件,在中间我用vim看日志文件,关闭时习惯性的:wq退出,在此之后日志文件就不输出了. 1 对于这个现象我开始认为是python ...
- 查看真机的APP沙盒文件
1.Xcode --> window --> devices -->左边选择设备 右下边选择要查看的app 双击应用可查看目录 点击设置按钮,选 Download Container ...