1. 概念display:inline-block

将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性,甚至更多,比如 inline-block 元素也可以设置 vertical-align 属性。inline-block 后的元素就是一个格式化为行内元素的块容器。其他的内联元素可以和其显示在同一行,中间允许有空格。

2. 使用

   (1) display:inline-block可以用来处理行内元素不等高对齐排列问题(列表布局),防止出现过高元素下方没有元素排列,而是被挤到该元素的右下方。(vertical-align: top/bottom;设置对齐的基准线)

(2)修正IE6中浮动元素的双边距问题

(3)水平放置多个类似块blo ck元素而不需要使用float

(4)使一个inline元素具有高宽边距而其依然能够保持inline

3. 水平间隙问题

    关于使用display:inline-block带来的水平间隙问题,产生该水平间隙的原因主要是HTML中的换行符、空格符、制表符等合并为空白符,在字体不为0的情况下,空白符将会产生一定的宽度,即产生了元素间的水平间隙。

解决该水平间隙的方法有:(1)字体大小设置为0,即font-size:0;此时要注意父元素字体大小设置后会影响到子元素字体大小,要记得将子元素字体大小重置!(2)合理地设置letter-spacing的值(负值)!(3)合理地设置word-spacing的值(负值)!(4)前一个标签的结束标签和后一个标签的开始标签连续使用,或者后一个嵌套标签的结束标签连续使用,不空格!合理的使用(1)(2)(3)(4)的css hack可以解决display:inline-block后元素间的水平间隙问题。

4. IE下实现display:inline-block的方法

(1)先使用display:inline-block触发块元素,然后再定义display:inline,让块元素呈递为内联对象。两个display要放在两个css声明中才能生效。

div {display:inline-block;...}
    div {display:inline;}

(2)直接让块元素设置为内联对象display:inline;再触发layout,如zoom:1;

div {display:inline; zoom:1;...}

inline-block的简单理解的更多相关文章

  1. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  2. git的简单理解及基础操作命令

    前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...

  3. 关于Block的简单使用

    Block在整个iOS开发中无所不见,很重要,很重要,文本在这里block的简单使用介绍.我们可以简单地定义.使用block. 1. Block和C的指针函数很像,但比C的函数灵活多了.废话了.... ...

  4. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  5. [转]简单理解Socket

    简单理解Socket 转自 http://www.cnblogs.com/dolphinX/p/3460545.html  题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公 ...

  6. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  7. Deep learning:四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  8. Deep learning:四十二(Denoise Autoencoder简单理解)

    前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Be ...

  9. 简单理解dropout

    dropout是CNN(卷积神经网络)中的一个trick,能防止过拟合. 关于dropout的详细内容,还是看论文原文好了: Hinton, G. E., et al. (2012). "I ...

  10. 我们为之奋斗过的C#-----C#的一个简单理解

    我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET ...

随机推荐

  1. BZOJ 3159决战

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3159 题意:给出一棵树,(1)路径加一个值:(2)路径上的节点的值反转(只是值反转,不是节 ...

  2. 学习笔记TimePicker

    new TimePickerDialog(this, new OnTimeSetListener() { @Override public void onTimeSet(TimePicker view ...

  3. SQL将金额转换为汉子

    -- ============================================= -- Author: 苟安廷 -- Create date: 2008-8-13 -- Descrip ...

  4. \r与\n有何区别,编码的时候应该如何使用

    \r与\n有何区别,编码的时候应该如何使用 区别: \r: 全称:carriage return (carriage是“字车”的意思,打印机上的一个部件) 简称:return 缩写:r ASCII码: ...

  5. Java——再看IO

    一.编码问题 utf-8编码中,一个中文占3个字节,一个英文占1个字节:gbk编码中,一个中文占2个字节,一个英文占1个字节. Java是双字节编码,为utf-16be编码,是说一个字符(无论中文还是 ...

  6. ctrl+z暂停任务

    (1) CTRL+Z挂起进程并放入后台 (2) jobs 显示当前暂停的进程 (3) bg %N 使第N个任务在后台运行(%前有空格) (4) fg %N 使第N个任务在前台运行 默认bg,fg不带% ...

  7. 《Redis设计与实现》读书笔记

    <Redis设计与实现>读书笔记 很喜欢这本书的创作过程,以开源的方式,托管到Git上进行创作: 作者通读了Redis源码,并分享了详细的带注释的源码,让学习Redis的朋友轻松不少: 阅 ...

  8. ThreadLocal 实现线程内共享变量

    package com.cn.gbx; import java.util.Date; import java.util.Random; import java.util.Timer; import j ...

  9. 常用的jquery

    获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...

  10. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...