Css中的display属性linline-block(行内区块元素)的详解和应用
原文链接:https://www.cnblogs.com/lijinwen/p/5679864.html
说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将会变得很方便
(目的是用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各个浏览器的负值也不相同,才能完美贴合
第二种
在父元素的css中设置word-spacing负值
效果
兼容性
很遗憾,IE7以下的浏览器不支持inline-block,但并非完全不支持
解决IE6、IE7兼容性的方法:
1、首先设置inline-block触发块元素,具有了layout(CSS布局)的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。
2、直接设置display:inline,使用zoom:1触发layout。
兼容所有浏览器的方法是:
display:inline-block;
*display:inline;
*zoom:1;