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 ...
随机推荐
- 关于view.measure
在编写下啦刷新的项目代码的时候,在Listview的HeaderView中的head.xml文件中,根布局为RelativeLayout的时候,在计算headerView.measure的时候,出现空 ...
- link
public IEnumerable InsuranceSearch(InsuranceSC sc, out int TotalCount) { var data = from q in Insura ...
- CentOS6.5下安装apache2.2和PHP 5.5.28
CentOS6.5下安装apache2.2 1. 准备程序 :httpd-2.2.27.tar.gz 下载地址:http://httpd.apache.org/download.cgi#apache2 ...
- 第一波实习的前端笔记（2）——js.md
1.如何解决移动端点透问题? $('xx').on('touchend', function(event){ event.preventDefault(); }) 但是,存在滑动页面会触发问题.期待更 ...
- NRF51822之修改设备名(掉电不保存)
主要代码 /**@brief Function for handling the Application's BLE Stack events. * * @param[in] p_ble_evt Bl ...
- Spring项目解决Post乱码
Java EE解决Post乱码:在web.xml中加入: <filter> <filter-name>encodingFilter</filter-name> &l ...
- 使用Python来对MySQL数据库进行操作
使用Python对Mysql进行操作,前提是安装了python-Mysql的安装包,安装的方法有多种,可以使用easy_install或者pip 或者是源码进行安装. 下面介绍下如何使用Python ...
- JQuery 简单的文字超出部分隐藏下拉显示
HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...
- js中函数的定义
- NLPP-02-Exercises
<PYTHON自然语言处理>第2章 内容简介:各种文本语料库. 古腾堡项目 www.gutenberg.org OLAC元数据格式档 http://www.language-archive ...