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 ...
随机推荐
- is not in the sudoers file 问题解决【转载】
解决方案:首需要切换到root身份$su - 或者 $sudo -s (注意有- ,这和su是不同的,在用命令"su"的时候只是切换到root,但没有把root的环境变量传过去,还 ...
- 解决box-flex不均等分的问题
我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了! 我之所以这么说是因为我今天写box-flex的时候遇到了一个可以让我蛋碎的问题~~~ 首先,b ...
- jstl <c:forEach> 介绍
varStatus是<c:forEach>jstl循环标签的一个属性,varStatus属性.就拿varStatus="status"来说,事实上定义了一个status ...
- Android菜鸟成长记5-ADB和sqllite
Android开发环境中,ADB是我们进行Android开发经常要用的调试工具,它的使用当然是我们Android开发者必须要掌握的. ADB概述 Android Debug Bridge,Androi ...
- 使用rownum对oracle分页
以Student表为例进行分页 建表及插入 -- 有表结构如下 create table STUDENT ( sno INTEGER, sname ), sage INTEGER ); -- 插入数据 ...
- C++ 用libcurl库进行http通讯网络编程（转）
转载:http://www.cnblogs.com/moodlxs/archive/2012/10/15/2724318.html 目录索引: 一.LibCurl基本编程框架 二.一些基本的函数 三. ...
- LeetCode OJ 331. Verify Preorder Serialization of a Binary Tree
One way to serialize a binary tree is to use pre-order traversal. When we encounter a non-null node, ...
- gdal编译C#开发版本
gdal的编译比较麻烦,情况有很多种,今天我编译的gdal遇到的问题就和以前的有点不一样,仅供参考借鉴. 1.下载gdal源码 gdal源码下载地址:https://trac.osgeo.org/gd ...
- [原创]Matlab获取当前时间信息
本文主要介绍下Matlab中如何获取当前时间的一些方法. 基本变量date.now.clock date 按照日期字符串返回当前系统时间 now 按照连续的日期数值返回当前系统时间 clock按照日期 ...
- Java 基础知识总结 (二、基本数据类型)
二.基本数据类型 java基本数据类型只能先声明后使用 boolean true/false char 16-bit unicode character byte 8-bit integer sho ...