今天看到一个网站的一个链接效果很好看,代码如下:
.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;顾名思义就是行内块的意思了。也就是说他具血了行内元素的不换行特征,同时也具有块元素的可以设置宽高等特征。