说inline-block(行内区块元素)之前,先说下他另外的2个兄弟

display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。

inline-block详解

inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。(这句话下面会用例子解释)

还是似懂非懂吗,来看下例子吧,保证就懂了

详细应用

我在了解inline-block之前,我的导航栏一直采用float浮动来达到横向排列的目的,然而浮动是会产生副作用的,需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100%;
background: yellow;
height: 100px;
text-align: center;
line-height: 100px;
}
a{
color:#fff;
text-decoration: none;
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background: red;
}
</style>
</head>
<body>
<div>
<a href="">我是a1</a>
<a href="">我是a2</a>
<a href="">我是a3</a>
<a href="">我是a4</a>
</div>
</body>
</html>

效果

有没有发现,每个a之间都会有一个空隙,这个空隙是因为块级元素会换行,就有换行,.HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙

如何取消inline-block产生的间隙

我认为有2种方法

第一种

使用负值的margin各个浏览器的负值也不相同,才能完美贴合

浏览器 margin值(左右)
火狐 margin:-4px
chrome margin:-3px
IE margin:-2px

第二种

父元素的css中设置word-spacing负值

浏览器 word-spacing
火狐 word-spacing:-8px
chrome word-spacing:-6px
IE word-spacing:-4px

效果

兼容性

很遗憾,IE7以下的浏览器不支持inline-block,但并非完全不支持

解决IE6、IE7兼容性的方法:

1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。

2、直接设置display:inline,使用zoom:1触发layout。

兼容所有浏览器的方法是:

display:inline-block;

*display:inline;

*zoom:1;

兼容性解决方法参考自charlinginline-block的兼容性问题

inline-block(行内区块元素)的详解和应用的更多相关文章

  1. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  2. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  3. CSS 块状元素和内联元素的详解

    我们先来分析一下块级元素.内联级元素的定义和解析:  块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  6. HTML行内元素、块状元素、行内块状元素的区别

    HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...

  7. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  8. __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...

  9. HTML行内元素、块状元素和行内块状元素的区分

    HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...

随机推荐

  1. 网络编程-pcap数据包格式

    Libpcap的官方网站是http://www.tcpdump.org/,该项目和Tcpdump项目是同一个团队维护.Libpcap是一个平台独立的 数据包捕获开发包,制定了数据包离线存储的事实标准. ...

  2. HDU 5875 Function 【倍增】 (2016 ACM/ICPC Asia Regional Dalian Online)

    Function Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  3. sharepoint2007的中文版

    今天终于下载到了sharepoint2007的中文版了,以前微软的测试板也没有中文版,今天终于下载到了,经过测试,用英文版的sn也是可以用的.微软提供的测试版,输入正式的key,就可以变成正式版了.我 ...

  4. CTE Recursion Performance

    CTE全名是Common Table Expression,语法基础请参考MSDN文档:https://msdn.microsoft.com/zh-cn/library/ms175972.aspx. ...

  5. Eclipse : 找不到或无法加载主类

    问题: 找不到或无法加载主类 解决思路: Step1: 去网上百度了下,基本上都说是环境变量的问题. 原因:环境变量设置有问题. 解决方法:重设环境变量 结果:当然问题没解决. Step2:再次百度, ...

  6. JVM垃圾回收机制入门

    前言 数据库是大家会普遍重视的一个领域,异步通信一般用不到,虚拟机在大部分时候不会出问题,常被人忽视,所以我打算先学习虚拟机,从零单排Java高性能问题. 堆内存存储结构 Java6是以年代来规划内存 ...

  7. 你真正的了解Ajax?Ajax技术简述

    Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

  8. jsp判断手机访问和电脑访问

    <% //取用户操作系统信息 String agent = request.getHeader("User-Agent") == null ? "": r ...

  9. Sublime 注册码

    ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC ...

  10. Linux下tomcat使用

    http://tomcat.apache.org/download-70.cgi这里下载 放到Linux目录下,解压开, 默认port:8080能够直接使用 经常使用启动命令catalina.sh   ...