inline-block
在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
display:inline-block元素间的换行符空格间隙问题:
解决办法一:父元素设置fontsize:0px
子元素设置正常文字大小
解决办法二:使用letter-spacing属性,一般设置为-4px即可,具体参见张鑫旭的博客
margin的值是不会和左右宽度耦合的,只会垂直宽度合并
通过min-width设定一定的值,解决Firefox浏览器窗口极端情况下的效果。