display:inline-block; 在css中是什么意思?

作者: admin 分类: css 发布时间: 2018-04-18 20:23

今天看到一个网站的一个链接效果很好看,代码如下:

.button {
    padding: 4px 20px;
    border: 1px solid #2784C2;
    color: #fff;
    background: #008BDD;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 5px;
}

效果如下:

效果图

看到里面有一个代码看不懂:display: inline-block;

查询百度得到了答案:

inline-block主要的用处是用来处理行内非替换元素的高宽问题的!

行内非替换元素,比如span、a等标签,正常情况下士不能设置宽高的,加上该属性之后,就可以触发让这类标签表现得如块级元素一样,可以设置宽高。

注意IE6不支持inline-block属性,可以用hack来解决:*display:inline;zoom:1;

表示的是行内块状元素,img、input在默认情况下即为行内块状元素。

行内块状元素的特点是:
既能够设置宽高,又不独自占据一行(块元素,如div、p等,默认情况下能设置宽高,但独自占据一行
行元素,如span、strong等,默认能够和其他行元素处于同一行,但是不能设置宽高)

displsy:inline-block;顾名思义就是行内块的意思了。也就是说他具血了行内元素的不换行特征,同时也具有块元素的可以设置宽高等特征。

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Powered by 草根站长笔记 © 2015-2020 草根站长笔记 Inc.版权所有,禁止转载