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 ...
随机推荐
- 八、MPxToolCommand, tool command
1. Tool Property Sheets: 是用来更改context属性的编辑框,类似于attribute editor.(property和attribute本质上是一个意思)作用于activ ...
- 【转载】JMeter学习（一）工具简单介绍
JMeter学习(一)工具简单介绍 一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静 ...
- operator 的两种用法
C++,有时它的确是个耐玩的东东,就比如operator,它有两种用法,一种是operator overloading(操作符重载),一种是operator casting(操作隐式转换).1.操作符 ...
- zedboard如何从PL端控制DDR读写(七)
前面已经详细介绍了从PL端如何用AXI总线去控制DDR的读写,并且从AXI_BRESP的返回值来看,我们也是成功写入了的.但是没有通过别的方式来验证写入的数据的话,总是感觉差了点什么. 今天试了一把从 ...
- Deep Learning（深度学习）学习笔记整理
申明:本文非笔者原创,原文转载自:http://www.sigvc.org/bbs/thread-2187-1-3.html 4.2.初级(浅层)特征表示 既然像素级的特征表示方法没有作用,那怎样的表 ...
- supervisor 配置
1. 生成配置文件$ echo_supervisord_conf > /etc/supervisord.conf 2.修改配置文件vi /etc/supervisord.conf找到[inclu ...
- Spring3 url匹配规则
Spring3 url匹配规则 Wildcard Description ? 匹配任何单字符 * 匹配0或者任意数量的字符 ** 匹配0或者更多的目录 宝贝网址:
- Android菜鸟成长记1--环境的搭配和第一个项目的构建
一.配置Android环境 1.下载JavaJDK的本地,然后拷贝出来(因为Android实在java的基础上开发的,所以要先配置java环境) 2.java环境变量的配置 配置方法(我的电脑上-&g ...
- 【POJ2949】Word Rings（最大平均值环）
题意:给定N个字符串,如果A串的最后两个字母跟B串的前两个字母相同它们就能连接. 求一个由字符串组成的首尾相连的环,使(字符串总长度/字符串个数)最大. n<=100000 len<=10 ...
- java文件末尾追加内容的两种方式
java 开发中,偶尔会遇到在文件末尾对文件内容进行追加,实际上有多种方式可以实现,简单介绍两种: 一种是通过RandomAccessFile类实现,另一种是通过FileWriter类来实现. 实现方 ...