inline-block(行内区块元素)的详解和应用

时间:2022-09-25 03:11:15

说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>

效果

inline-block(行内区块元素)的详解和应用

有没有发现,每个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

效果

inline-block(行内区块元素)的详解和应用

兼容性

很遗憾,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;

inline-block(行内区块元素)的详解和应用

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