*知识储备:

内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行。

块级元素:是可以控制宽和高、margin等,并且会换行。

1.inline-block 详解

(1)一句话就是在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。

在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block

(2)浏览器兼容性问题:

那么为了能够让所有浏览器支持display:inline-block,综合一下,最终的实现代码如下:
display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下触发IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,需要时还必须用到position:relative解决上面提到的bug */
zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

2.dispaly:inline inline-block block 三者区别精要概括

inline:使用此属性后,元素会被显示为内联元素,元素则不会换行。
block:使用此属性后,元素会被现实为块级元素,元素会进行换行。
inline-block:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。

css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括的更多相关文章

  1. Block详解二(底层分析)

    Block专辑: Block讲解一 MRC-block与ARC-block Block详解一(底层分析) 今天讲述Block的最后一篇,后两篇仅仅是加深1,2篇的理解,废话少说,开始讲解! __blo ...

  2. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  3. iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem

    http://blog.csdn.net/totogo2010/article/details/7681879 1.UINavigationController导航控制器如何使用 UINavigati ...

  4. [转]iOS学习之UINavigationController详解与使用(三)ToolBar

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682641 iOS学习之UINavigationController详解与使用(二)页面切 ...

  5. [转]iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682433 iOS学习之UINavigationController详解与使用(一)添加U ...

  6. 各大公司广泛使用的在线学习算法FTRL详解

    各大公司广泛使用的在线学习算法FTRL详解 现在做在线学习和CTR常常会用到逻辑回归( Logistic Regression),而传统的批量(batch)算法无法有效地处理超大规模的数据集和在线数据 ...

  7. 跟我学机器视觉-HALCON学习例程中文详解-FUZZY检测用于开关引脚测量

    跟我学机器视觉-HALCON学习例程中文详解-FUZZY检测用于开关引脚测量 * This example program demonstrates the basic usage of a fuzz ...

  8. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  9. 跟我学机器视觉-HALCON学习例程中文详解-测量圆环脚宽间距

    跟我学机器视觉-HALCON学习例程中文详解-测量圆环脚宽间距 This example program demonstrates the basic usage of a circular meas ...

随机推荐

  1. mac上的键盘生活——quicksliver

      昨天晚上一直在找mac上的博客客户端,没发现很好的国内支持客户端,却发现了一个新的东西--quicksliver 简单的说,这个就是个快捷键启动方式,这是我在mac上用的最好的一个快捷键启动程序( ...

  2. JavaScript高级程序设计8.pdf

    基本包装类型 为了便于操作基本类型值,ECMAScript定义了3个特殊的引用类型Boolean,Number和String.这些类型与本章介绍的其他用类型相似,同时也具备与各自的基本类型相应的特殊行 ...

  3. LOL游戏程序中对一些函数的Hook记录(Win10 x64)

    [PC Hunter Standard][League of Legends.exe-->Ring3 Hook]: 108Hooked Object Hook Address and Locat ...

  4. Graphs and Minimum Cuts(Karger's Min-Cut Algorithm)

    Graphs  Two ingredients 1. vertices (nodes) v 2. edges(undirected or directed) Examples: road networ ...

  5. C# 调试

    1.监视窗口

  6. Java中的成员初始化顺序和内存分配过程

    Java中的成员初始化顺序和内存分配过程 原帖是这样描述的: http://java.dzone.com/articles/java-object-initialization?utm_source= ...

  7. weblogic下 微信公众平台获取token报错

    问题描述: 开发微信公众平台,本地tomcat可以正常获取token并发送模板消息,部署在weblogic后报错,异常信息如下: java.security.InvalidKeyException: ...

  8. c#基础语言编程-集合

    引言 在c#常用的集合分为非泛型集合和泛型集合. 非泛型集合的类和接口位于System.Collections命名空间.这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. 泛型集合 ...

  9. 浅谈UML中类之间的五种关系及其在代码中的表现形式

    本文转载:http://www.cnblogs.com/DebugLZQ/archive/2013/05/13/3066715.html 什么是类? 将某类东西归纳在一起,可以成为一个类. 类有很多种 ...

  10. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...